学习目标：
- 掌握WebGl基础知识
学习内容：
创建一个Webgl程序
- 创建三维上下文对象
- 创建顶点着色器和片元着色器
- 创建和编译顶点着色器和片元着色器
- 创建着色器程序对象
- 绘制图元
创建一个Webgl程序
1.第一步获取画布，创建三维上下文对象
<canvas class="canvas" width="500" height="500"></canvas><script>const canvas = document.querySelector('.canvas')const gl = canvas.getContext('webgl')</script>
2.第二步创建顶点着色器和片元着色器
顶点着色器和片元着色器（两种方法，一种就是下面这样在script标签内通过type属性创建，第二种就是通过js的模版字符串创建）
方法一：
<!-- 顶点着色器 --><script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 aPos;
attribute vec2 aPos1;voidmain(){
gl_PointSize =10.0;
vec2 newPos = aPos + aPos1;
gl_Position =vec4(newPos,0.0,1.0);}</script><!-- 片元着色器 --><script id="fragment-shader" type="x-shader/x-fragment">voidmain(){
gl_FragColor =vec4(1.0,0.0,0.0,1.0);}</script><script>// 获取着色器源码const vertexSource = document.getElementById('vertex-shader').innerText
const fragmentSource = document.getElementById('fragment-shader').innerText
</script>
方法二：
<script>// 定义顶点着色器const vertexShaderSource =`
attribute vec2 position;
void main(){
gl_Position = vec4(position, 0.0, 1.0);
}
`// 定义片元着色器const fragmentShaderSource =`
void main(){
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`</script>
- attribute vec2 position;:声明了一个名为 position 的顶点属性，它是一个二维向量。
- void main(){…}:顶点着色器的主函数，计算每个顶点的最终位置。
- gl_Position = vec4(position, 0.0，1.0);:将顶点属性 position赋值给gl_Position，这是一个四维向量，表示顶点的最终位置。vec4(position, 0.0, 1.0)表示在二维空间中，顶点的z值为0.0,w值为1.0。
- gl_FragColor = vec4(1.0,0.0,00,1.0);:将片元的颜色设置为红色，使用 vec4表示颜色，RGBA 分别为(1.0,0.0, 0.0, 1.0)。
3.第三步创建和编译顶点着色器和片元着色器
// 创建顶点着色器对象和片元着色器对象const vertexShader = gl.createShader(gl.VERTEX_SHADER)const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)// 绑定着色器源码到对应着色器对象上
gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)// 编译着色器源码
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)
- gl.createShader(gl.VERTEX_SHADER);:创建一个顶点着色器对象。
- gl.shaderSource(vertexShader, vertexShaderSource);:将顶点着色器源码绑定到顶点着色器对象。
- gl.compileShader(vertexShader);:编译顶点着色器。
4.第四步创建着色器程序对象
// 创建程序对象const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program);
gl.useProgram(program);
- gl.createProgram();:创建一个着色器程序对象。
- gl.attachShader(program, vertexShader);:将顶点着色器附加到着色器程序对象。
- gl.attachShader(program, fragmentShader);:将片元着色器附加到着色器程序对象。
- gl.linkProgram(program);:链接着色器程序对象，将顶点着色器和片元着色器链接成一个完整的可执行程序。
- gl.useProgram(program);:告诉 WebGL使用这个着色器程序对象作为当前的渲染程序。
5.第五步绘制图元
// 绘制图元
gl.drawArrays(gl.POINTS,0,1)
- gl.drawArrays(gl.POINTS, 0, 1);:从当前绑定的缓冲区中提取数据，根据指定的绘制模式进行绘制
- gl.POINTS：指定绘制图元类型为一个点
- 0：从顶点数组的第一个点开始绘制
- 1：绘制一个点
运行结果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个WebGL程序</title><style>
canvas{border: 1px solid #ccc
}</style></head><body><canvas class="canvas" width="500" height="500"></canvas><!-- 顶点着色器 --><script id="vertex-shader" type="x-shader/x-vertex">voidmain(){
gl_PointSize =10.0;
gl_Position =vec4(0.5,0.0,0.0,1.0);}</script><!-- 片段着色器 --><script id="fragment-shader" type="x-shader/x-fragment">voidmain(){
gl_FragColor =vec4(1.0,0.0,0.0,1.0);}</script><script>const canvas = document.querySelector('.canvas')const gl = canvas.getContext('webgl')// 创建顶点着色器和片元着色器const vertexShader = gl.createShader(gl.VERTEX_SHADER)const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)// 获取着色器源码const vertexSource = document.getElementById('vertex-shader').innerText
const fragmentSource = document.getElementById('fragment-shader').innerText
// 绑定着色器源码
gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)// 编译着色器源码
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)// 创建程序对象const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program);
gl.useProgram(program);// 绘制图元
gl.drawArrays(gl.POINTS,0,1)</script></body></html>
总结
本篇文章讲解了如何通过WebGL绘制一个最基础的点，后续文章会持续更新。
本文转载自: https://blog.csdn.net/weixin_45231569/article/details/141788230
版权归原作者 梦想的奢望 所有， 如有侵权，请联系我们删除。
版权归原作者 梦想的奢望 所有， 如有侵权，请联系我们删除。