WebGL简单绘制图形的两种方法

分手后的思念是犯贱 2022-11-24 12:57 200阅读 0赞

第一种方法跟canvas相似 , 不常用.

step1: 添加一个画布元素  
step2: 获取到画布元素的基于webgl的上下文环境对象  
step3: 使用对象的api

<body>
        <canvas id="pic" width="200" height="200" style="border: dashed 1px solid"></canvas>
        <script type="text/javascript"> // 获取画布元素 let pic = document.getElementById("pic"); // 获取到元素的上下文环境对象 let gl = pic.getContext('webgl'); // 设置绘制图形的颜色 设置好后自动保存到缓存中 gl.clearColor(1.0,0.0,0.0,1.0); // 调用缓存中的值填充图形 gl.clear(gl.COLOR_BUFFER_BIT) </script>
    </body>

--------------------

第二种方法: 使用着色器绘制

> `着色器介绍`:  
> 着色器是使用 OpenGL ES Shading Language (**GLSL**) 语言编写的程序, 负责记录像素点的**位置**和**颜色**, 并由顶点着色器和片段着色器组成, 通过GLSL编写这些着色器. 并将代码文本传递给WebGL编译. 编写时两个着色器是分开编写, 使用时是集合使用的, 集合统称为**着色器程序**  
>   
> **顶点着色器**: 负责记录整个绘制图形顶点的坐标信息  
> **片段着色器**: 负责确定像素的颜色值

<body>
        <canvas id="pic" width="200" height="200" style="border: dashed 1px solid"></canvas>
        <script type="text/javascript"> // 获取画布元素 let pic = document.getElementById("pic"); // 获取到元素的上下文环境对象 let gl = pic.getContext('webgl'); // 顶点着色器变量 let VSHADER_SOURCE = 'void main() {' + // 顶点位置矢量值, vec4方法, 定义点的坐标并转换成变量保存 'gl_Position = vec4(0.0,0.0,0.0,1.0);' + // 设置缩放距离的直径 'gl_PointSize = 10.0;' + '}'; // 片段着色器变量 let FSHADER_SOURCE = 'void main() {' + // 设置图形像素的颜色并保存 'gl_FragColor = vec4(0.0,1.0,0.0,1.0);' + '}'; </script>
    </body>