WebGL02

WebGL绘制点

WebGL程序相关三要素和坐标系。

我们将通过代码编写逐步熟悉GLSL这门语言的学习。

什么是着色器

WebGl需要两种着色器

顶点着色器用于描述顶点属性，坐标位置。（x,y,z）
片元着色器逐片元处理颜色，相当于是像素。

我们会将顶点着色器和片元着色器组合起来使用就是一个着色程序。着色程序会在GPU中运行，根据我们设置一系列状态值，再使用gl.drawArrays这类着色方法绘制出相应的图形。以WebGL绘制三角形为例，说明两个着色器之间是如何工作的。

顶点着色器会调用三次绘制对应顶点，接着进行图形装配，光栅化处理，转换成对应的像素点。
片元着色器根据颜色值配置信息对光栅化后的像素进行着色处理。

我们所看到的图像，背后都是由一个个像素点组合起来，所以我们就可以理解着色器为什么是成对组合工作的。顶点着色器进行图形轮廓绘制，最后使用片元着色器对应图形内像素点进行上色。

着色器代码编写

GLSL对应的类型和内置变量

顶点着色器 float-浮点数 vec4-四个浮点数组成的矢量
顶点着色器内置变量 gl_Position vec4 顶点位置、坐标 gl_PointSize float 点的尺寸（像素）
内置函数 vec4 创建对应的vec4对象
片元着色器内置变量 gl_FragColor vec4 对应rgba颜色值。取值范围为0.0到1.0

着色器代码

顶点着色器GLSL代码

const vertexCode= `
    void(){
      // 顶点坐标
      gl_Position= vec4(0.0,0.0,0.0,1.0);
      // 顶点渲染像素大小
      gl_PointSize=24.0;
    }
`

片元着色器

const fragmentCode=`
    void main(){
      // 顶点颜色
      gl_FragColor=vec4(0.0,1.0,0.0,1.0)
    }
`

清空绘图区

设置背景色 clearColor 参数值：（r,g,b,a）
清空画布 clear 参数值：（buffer） gl.COLOR_BUFFER_BIT

清空绘图区就是清空颜色缓存区，调用gl.clear暂时只考虑使用gl.COLOR_BUFFER_BIT

 gl.clearColor(1.0,0.0,0.0,1.0)
 gl.clear(gl.COLOR_BUFFER_BIT)

绘制一个点

// 绘图环境获取
const canvas = document.querySelector('#ice-2_2')
const gl = canvas.getContext('WebGL')

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
// 传入我们编写好的顶点着色器字符串代码
gl.shaderSource(vertexShader, vertexCode)
// 编译着色器
gl.compileShader(vertexShader)

// 除了一些参数不一样，整体流程均可参考上述顶点着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
// 传入我们编写好的顶点着色器字符串代码
gl.shaderSource(fragmentShader, fragmentCode)
// 编译着色器
gl.compileShader(fragmentShader)

// 创建着色器程序
const program = gl.createProgram();
// 为程序添加 顶点着色器
gl.attachShader(program, vertexShader);
// 为程序添加 片元着色器
gl.attachShader(program, fragmentShader);
// 连接 顶点着色器 和 片元着色器，也就是组合成对
gl.linkProgram(program);
// 应用着色器程序，告诉 WebGL 绘制的时候使用这个着色程序
gl.useProgram(program);

// 最后调用绘制函数 gl.drawArrays方法
gl.drawArrays(gl.POINTS, 0, 1)

gl.drawArrays 参数值 (mode, first, count) mode-gl.POINTS绘制单个点 first 指定开始绘制的点 count 指定绘制多少个点

写在最后

未完待续…
希望大家好好生活，健康快乐。