网站建设哪家有实力,wordpress做导航页面模板,人和做网站,扬州市广陵区城乡建设局网站1.多缓冲区
多缓冲区技术通常涉及到创建多个缓冲区对象#xff0c;并将它们用于不同的数据集。这种做法可以提高数据处理效率#xff0c;尤其是在处理大量数据或需要频繁更新数据时。通过预先分配和配置多个缓冲区#xff0c;可以在不影响渲染性能的情况下#xff0c;快速…1.多缓冲区
多缓冲区技术通常涉及到创建多个缓冲区对象并将它们用于不同的数据集。这种做法可以提高数据处理效率尤其是在处理大量数据或需要频繁更新数据时。通过预先分配和配置多个缓冲区可以在不影响渲染性能的情况下快速切换数据集。
2.数据偏移
数据偏移是指在处理缓冲区数据时指针跳过一定数量的字节来定位特定的数据。在WebGL中gl.vertexAttribPointer函数的offset参数用于指定从缓冲区起始位置开始的偏移量。这允许开发者将不同类型的数据如顶点位置、法线、颜色等存储在同一个缓冲区中并通过偏移量来正确地访问这些数据。
3. 实现示例
3.1. 声明aPointSize attribute float aPointSize;
3.2. 获取attribute变量aPointSize
const aPointSize gl.getAttribLocation(program, aPointSize);
3.3. 获取字节数 const BYTES points.BYTES_PER_ELEMENT;
3.4. 顶点大小参数设置
gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2);
4. 代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0style* {margin: 0;padding: 0;}canvas {margin: 50px auto;display: block;background: pink;}/styletitle修改点的颜色/title
/headbodycanvas idcanvas width400 height400此浏览器不支持canvas/canvasscript src./js/index.js/scriptscriptconst ctx document.getElementById(canvas)const gl ctx.getContext(webgl)// 顶点着色器源码// 1. 声明aPointSizeconst vertexShaderSource attribute vec4 aPosition;attribute float aPointSize;void main() {gl_Position aPosition; gl_PointSize aPointSize;}// 片源着色器源码const fragmentShaderSource void main() {gl_FragColor vec4(0.0,0.0,0.0,1.0); // r, g, b, a}const program initShader(gl, vertexShaderSource, fragmentShaderSource);const aPosition gl.getAttribLocation(program, aPosition);// 1.获取attribute变量aPointSizeconst aPointSize gl.getAttribLocation(program, aPointSize);// 2.创建顶点数据,前两位是顶点的位置第三位是顶点的大小const points new Float32Array([-0.5, -0.5, 10.0,0.5, -0.5, 20.0,0.0, 0.5, 30.0,])const buffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);// 3.获取字节数const BYTES points.BYTES_PER_ELEMENT;// 4.顶点位置参数设置两个相邻顶点之间的字节数为三个字节所以字节数为BYTES*3; 顶点数据是前两位所以偏移量为0;gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 3, 0);// 5.顶点大小参数设置两个相邻顶点之间的字节数为三个字节所以字节数为BYTES*3; 顶点数据是第三位所以偏移量为BYTES*2;gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2);// 4.激活变量gl.enableVertexAttribArray(aPosition);gl.enableVertexAttribArray(aPointSize);gl.drawArrays(gl.POINTS, 0, 3);// 着色器 function initShader(gl, vertexShaderSource, fragmentShaderSource) {const vertexShader gl.createShader(gl.VERTEX_SHADER);const fragmentShader gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(vertexShader);gl.compileShader(fragmentShader);const program gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);return program;}/script
/body/html
5. 效果如下
