WebGl通过缓冲区绘制多个点
Posted yiluxiangbei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WebGl通过缓冲区绘制多个点相关的知识,希望对你有一定的参考价值。
使用缓冲区对象向顶点着色器传入多个点
1. 创建缓冲区对象gl.createBuffer()
2. 绑定缓冲区对象gl.bindBuffer()
3. 将数据写入缓冲区对象gl.bufferData()
4. 将缓冲区对象分配给一个attribute对象gl.vertexAttribPointer()
5. 开启attribute变量 gl.enableVertexAttribArray()
1 // 顶点着色器,设置坐标和设置尺寸。 2 var VSHADER_SOURCE = 3 ` 4 attribute vec4 a_Position; 5 attribute float a_PointSize; 6 void main(){ 7 gl_Position=a_Position; 8 gl_PointSize=a_PointSize; 9 } 10 ` 11 12 //片元着色器 13 var FSHADER_SOURCE = 14 ` 15 void main(){ 16 gl_FragColor=vec4(1.0,0.0,0.0,1.0); 17 } 18 ` 19 20 function main() { 21 var canvas = document.getElementById(‘webgl‘); 22 var gl = getWebGLContext(canvas); 23 if (!gl) { 24 return; 25 } 26 //初始化着色器 27 if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 return; 29 } 30 31 //必须初始化着色器后, 获取attribute变量的存储位置 getAttribLocation(program,name); 32 var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); 33 34 // 获取大小的存储位置 35 var a_PointSize = gl.getAttribLocation(gl.program, ‘a_PointSize‘); 36 37 if (a_Position < 0) { 38 console.log(‘a_Position0‘); 39 return; 40 } 41 // // 将顶点位置传输给attribute 42 // gl.vertexAttrib3f(a_Position,0.0,0.0,.0,0); 43 44 gl.vertexAttrib1f(a_PointSize, 20.0); 45 46 // 设置顶点位置,并返回数量 47 var n = initVertextBuffers(gl); 48 //设置背景色 49 gl.clearColor(0.0, 0.0, 0.0, 1.0); 50 // 清空canvas 51 gl.clear(gl.COLOR_BUFFER_BIT); 52 53 // 绘制一个点 从第一个顶点绘制3个点 54 gl.drawArrays(gl.POINTS, 0, n); 55 56 } 57 main(); 58 59 function initVertextBuffers(gl) { 60 // Float32Array 类型化数组执行起来效率更快。 webGL类型化数组与普通数组不同,不支持pop,push方法。 61 var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]); 62 var n = 3;//点的个数 63 //创建缓冲区对象 64 var vertexBuffer = gl.createBuffer(); 65 if (!vertexBuffer) { 66 console.log(‘Failed to create the buffer object‘); 67 return -1; 68 } 69 70 // 将缓冲区对象绑定到目标 71 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 72 // 向缓冲区写入数据(只能写在目标) 73 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 74 var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); 75 76 // 将缓冲区对象分配给a_Position变量 77 gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 78 79 // 连接a_Position变量与分配给它的缓冲区对象 80 gl.enableVertexAttribArray(a_Position); 81 return n; 82 }
以上是关于WebGl通过缓冲区绘制多个点的主要内容,如果未能解决你的问题,请参考以下文章