重入web3d坑，webgl（三）
2020-06-16 08:53:59
在WebGL中，通过顶点着色器和片元着色器的配合，可以实现绘制不同大小的点以及修改颜色的效果。以下是对相关代码和概念的详细解释：
绘制不同大小的点在WebGL中，可以通过gl_PointSize来控制绘制点的大小。以下是一个示例代码，展示了如何绘制三个不同大小的点：
const vertexShader = ` attribute vec4 a_Position; attribute float a_PointSize; void main() { gl_Position = a_Position; gl_PointSize = a_PointSize; }`;const sizes = new Float32Array([10.0, 20.0, 30.0]);const sizeBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);const a_PointSize = gl.getAttribLocation(program, "a_PointSize");gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);在这个例子中，我们创建了一个包含三个不同点大小的数组sizes，并将其绑定到一个缓冲区对象sizeBuffer上。然后，通过glVertexAttribPointer函数将缓冲区中的数据传递给顶点着色器中的a_PointSize属性。
然而，这种方法在处理大量数据时可能会显得繁琐。为了优化性能，我们可以将坐标和尺寸数据合并到一个缓冲区中，并通过调整glVertexAttribPointer函数的参数来截取所需的数据。以下是一个优化后的示例：
const pointPos = [ 0.5, 0, 0, 10.0, 0, 0, 0, 20.0, 0, 0, 0.5, 30.0];const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pointPos), gl.STATIC_DRAW);const FSIZE = Float32Array.BYTES_PER_ELEMENT;gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 4, 0);gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 4, FSIZE * 3);在这个优化后的例子中，我们将坐标和尺寸数据合并到了一个数组pointPos中，并创建了一个缓冲区对象buffer来存储这些数据。然后，通过调整glVertexAttribPointer函数的参数（特别是步进和偏移参数），我们可以分别截取坐标和尺寸数据，并将其传递给顶点着色器中的相应属性。
修改颜色在WebGL中，可以通过varying变量在顶点着色器和片元着色器之间传递值，从而实现颜色的修改。以下是一个示例代码，展示了如何修改点的颜色：
const vertexShader = ` attribute vec4 a_Position; attribute vec4 a_Color; varying vec4 v_Color; void main() { gl_Position = a_Position; v_Color = a_Color; gl_PointSize = 10.0; }`;const fragmentShader = ` precision mediump float; varying vec4 v_Color; void main() { gl_FragColor = v_Color; }`;在这个例子中，我们在顶点着色器中定义了一个varying变量v_Color，并将其设置为顶点颜色a_Color。然后，在片元着色器中，我们通过gl_FragColor将v_Color的值赋给片元颜色，从而实现颜色的修改。
需要注意的是，由于图片显示可能存在模糊问题（如视口设置不当等），在实际应用中可能需要调整投影和坐标转换等相关参数以确保图片清晰显示。此外，书中提到的几何形状的装配和光栅化是WebGL渲染过程中的重要理论部分，但在此不做深入探讨。
总结通过合理利用WebGL的顶点着色器和片元着色器以及相关的API函数（如glVertexAttribPointer等），我们可以实现绘制不同大小的点以及修改颜色的效果。同时，通过优化数据存储和传递方式（如合并缓冲区、调整步进和偏移参数等），可以提高渲染性能并简化代码实现。
热门标签
