webgl学习笔记一-绘图单点

写在前面

  •   WebGl(全称:Web Graphics Library : web图形库) 是基于OpenGL ES 2.0的3D绘图协议。

  •   WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

绘图一个点的步骤

  • 创建HTML5 canvas
<canvas id="canvas" width="200px" height="200px"></canvas>

  • 获取画布canvas的Id
var canvas = document.getElementById('canvas');

  • 获取画布webgl的上下文
var gl = canvas.getContext('webgl');

  • 编写存储着色器程序

    • 顶点着色器 :指定了点的位置和尺寸
            //顶点着色器程序
            var VSHADER_SOURCE =
                "void main() {" +
                //设置坐标
                "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
                //设置尺寸
                "gl_PointSize = 10.0; " +
                "} ";
    
    
    • 片元着色器 :指定了点的颜色
            //片元着色器程序
        var FSHADER_SOURCE =
            "void main() {" +
            //设置颜色
            "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
            "}";
    
  • 编译着色器。三步曲

    • 创建Shader(着色器)对象
    Object createShader (enum type)
    
    type 两种选择 :
    gl.VERTEX_SHADER创建顶点着色器 ,  gl.FRAGMENT_SHADER 创建片段着色器。
    
    • 将前面的着色器程序绑定到Shader对象上
    shaderSource(Object shader, string source)
    shader :着色器对象
    source :着色器程序
    
    • 编译程序
    compileShader(Object shader)
    
  • 合并程序:将顶点着色器和片元着色器合并,并链接到程序中。四步走

    • 创建一个程序对象
    createProgram();
    
    
    • 附件着色器
    attachShader(Object program, Object shader);
    
    
    • 链接着色器
    linkProgram(shaderProgram);
    
    
    • 使用程序
    useProgram(shaderProgram);
    
    
  • 绘图

gl.drawArrays(gl.POINTS, 0, 1);


附上代码

html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" width="200px" height="200px"></canvas>



</body>
</html>

javascript


<script>

    window.onload = function () {

        //顶点着色器程序
        var VSHADER_SOURCE =
            "void main() {" +
            //设置坐标
            "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
            //设置尺寸
            "gl_PointSize = 10.0; " +
            "} ";

        //片元着色器程序
        var FSHADER_SOURCE =
            "void main() {" +
            //设置颜色
            "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
            "}";
        //获取canvas元素
        var canvas = document.getElementById('canvas');
        //获取绘制webgl绘图上下文
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log("Failed");
            return;
        }
        //编译着色器
//        (1)创建Shader(着色器)对象
//        (2)将着色器程序附加到Shader上
//        (3)编译程序
        var vertShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertShader, VSHADER_SOURCE);
        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragShader, FSHADER_SOURCE);
        gl.compileShader(fragShader);
        //合并程序
//        (1)创建一个程序对象
//        (2)附加着色器
//        (3)链接着色器
//        (4)使用程序
        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

        //绘制一个点
        gl.drawArrays(gl.POINTS, 0, 1);
    }

</script>

参考文献

写在最后

  新博客

posted @   坚守一辈子的幸福  阅读(515)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
历史上的今天:
2014-08-31 String的点点滴滴
点击右上角即可分享
微信分享提示