WebGL实现雨水特效实验

WebGL 实现雨水特效实验

今天我们将要和大年夜家分享一些 WebGL 实验，在这个实验中我们将创建一个异常逼真的雨滴效不雅，并把它放到不合的场景中去。在这篇文┞仿中，我们将给出制造这种效不雅所用到的一些一般性技巧和技能的概览。

请留意：文中制造的效不雅还处于实验阶段，可能无法在所有浏览器中都看到预期的效不雅。最好应用 Chrome。

入门

图片来源：Wikipedia, GGB reflection in raindrop

【编辑推荐】

十三个最佳JavaScript数据网格库
一行神奇的javascript代码
Google爬虫若何抓取JavaScript的？
关于JavaScript的数组随机排序
JavaScript缺点处理和客栈追踪浅析

【义务编辑：枯木 TEL：（010）68476606】

同时你还会看到互相之间距离很近的雨滴会归并成一个——并且如不雅跨越了必定的尺寸，它就会向下滑落，并且留下一道小小的陈迹。

为了模仿这种行动，我们必须绘制大年夜量的雨滴，在每一帧上都更新它们的┞粉射效不雅，并且要在一个合适的帧率下做这些工作，为此我们须要极好的机能———所以，为了可以或许应用显卡的硬件加快，我们将应用 WebGL。

WebGL

WebGL 是一个绘制 2D 和 3D 图形的 JavaScript 接口，并且许可应用 GPU 以获得更好的机能。它基于 OpenGL ES，着色器由一门叫做 GLSL 的说话写成，而不是 JS。

总之，如不雅你仅仅做过网页开辟，那么它看起来是很难应用的——这不仅仅是一门新的说话，并且照样一个全新的概念——然则一旦你控制了一些核心的概念，它就会变得轻易不少。

在这篇文┞仿中我们将仅给出一些根本的应用示例，更多深刻的解析请参阅 WebGl Fundamentals 。

起首我们须要一个 canvas 标签。WebGL 是在 canvas 上绘制的，它是一个绘制情况，类似于我们用 getContext('2d') 获取到的绘制情况。

<canvas id="container" width="800" height="600"></canvas> 
 
 
var canvas = document.getElementById("container"); 
 
var gl = canvas.getContext("webgl");

起首来创建我们的着色器。这是一个顶点着色器，我们不会对顶点做任何修改，所以简单地让数据穿过它就好了：

在这张图片中，我们精晓过绿色通道的数据来获取 X 坐标，经由过程红色通道的数据来获取 Y 坐标。

<script id="vert-shader" type="x-shader/x-vertex"> 
 
// gets the current position 
 
attribute vec4 a_position; 
 
void main() { 
 
// returns the position 
 
gl_Position = a_position; 
 
} 
 
</script>

这个是片段着色器。这个着色器将会根据坐标来设置每个像素点的色彩。

<script id="frag-shader" type="x-shader/x-fragment"> 
 
precision mediump float; 
 
void main() { 
 
// current coordinates 
 	
			 1/3    1 2 3 下一页 尾页	
			

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


本文标题：WebGL实现雨水特效实验
地址：http://www.17bianji.com/lsqh/34616.html
 1/2    1