让雨点之间互相感化是很难快速计算的——跟着新的雨点的到来，运算量将会呈指数级增长——所以我们必须做一点优化。

如今我们把着色器连接到 WebGL 情况中去：

function createShader(gl,source,type){ 
 
var shader = gl.createShader(type); 
 
source = document.getElementById(source).text; 
 
gl.shaderSource(shader, source); 
 
gl.compileShader(shader); 
 
return shader; 
 
} 
 
var vertexShader = createShader(gl, 'vert-shader', gl.VERTEX_SHADER); 
 
var fragShader = createShader(gl, 'frag-shader', gl.FRAGMENT_SHADER); 
 
var program = gl.createProgram(); 
 
gl.attachShader(program, vertexShader); 
 
gl.attachShader(program, fragShader); 
 
gl.linkProgram(program); 
 
gl.useProgram(program); 

接下来我们创建一个对象然后在它膳绫擎绘制我们的着色器。这里我们来画个矩形——确切地说，画两个矩形。

// create rectangle 
 
var buffer = gl.createBuffer(); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 
 
gl.bufferData( 
 
gl.ARRAY_BUFFER, 
 
new Float32Array([ 
 
-1.0, -1.0, 
 
1.0, -1.0, 
 
-1.0, 1.0, 
 
-1.0, 1.0, 
 
1.0, -1.0, 
 
1.0, 1.0]), 
 
gl.STATIC_DRAW); 
 
// vertex data 
 
var positionLocation = gl.getAttribLocation(program, "a_position"); 
 
gl.enableVertexAttribArray(positionLocation); 
 
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); 

最后，绘制全部图像：

gl.drawArrays(gl.TRIANGLES, 0, 6); 

接下来我们须要一段法度榜样，它由顶点着色器和片段着色器(译注：『片段着色器』又称『像素着色器』)构成。着色器就是一些函数：顶点着色器在每个顶点履行一次，而片段着色器在每个像素上都被调用一次。它们的义务分别是返回坐标和色彩。这是我们的 WebGL 应用的核心。

结不雅如下：

　　推荐阅读

　　JavaScript错误处理和堆栈追踪浅析

有时我们会忽视缺点处理和客栈追踪的一些细节, 然则这些细节对于写竽暌闺测试或缺点处理相干的库来说是异常有效的. 例如这周, 对于 Chai 就有一个异常棒的PR, 该PR极大年夜地改良了我们处>>>详细阅读

本文标题：WebGL实现雨水特效实验

地址：http://www.17bianji.com/lsqh/34616.html

 1/2    1