THREE.JS入门教程(3)着色器-下


Posted in Javascript onJanuary 24, 2013

译序
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。

.简介
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体。现在我要开始创建一些更加有意思的东西了。

在这一篇教程中,我们会先花点时间来加入一个动画循环,然后是顶点attributes变量和一个uniform变量。我们还要加一些varying变量,这样顶点着色器就可以向片元着色器传递信息了。最终的结果是哪个粉红色的球体会从顶部开始向两侧“点燃”,然后作有规律的运动。这有一点迷幻,但是会帮助你对着色器中的三种变量有更好的了解:他们互相联系,实现了整个集合体。当然我们会在Three.js的框架中做这些。
1.模拟光照
让我们更新颜色吧,这样球体看起来就不会是个扁平晦暗的圆了。如果我们想看看Three.js是怎样处理光照的,我敢肯定你会发现这比我们需要的要复杂得多,所以我们先模拟光照吧。你应该浏览一下Three.js中那些奇妙的着色器,还有一些来自最近的一个 Chris Milk 和 Google, Rome 的WebGL项目。
回到着色器,我们要更新顶点着色器来向片元着色器传递顶点的法向量。利用一个varying变量:

// 创建一个varying变量vNormal,顶点着色器和片元着色器都包含了该变量 
varying vec3 vNormal; 
void main() { 
// 将vNormal设置为normal,后者是Three.js创建并传递给着色器的attribute变量 
vNormal = normal; 
gl_Position = projectionMatrix * 
modelViewMatrix * 
vec4(position, 1.0); 
}

在片元着色器中,我们将会创建一个相同变量名的变量,然后将法线向量和另一个表示来自右上方光线的向量点乘,并将结果作用于颜色。最后结果的效果有点像平行光。
// 和顶点着色器中一样的变量vNormal 
varying vec3 vNormal; 
void main() { 
// 定义光线向量 
vec3 light = vec3(0.5,0.2,1.0); 
// 确保其归一化 
light = normalize(light); 
// 计算光线向量和法线向量的点积,如果点积小于0(即光线无法照到),就设为0 
float dProd = max(0.0, dot(vNormal, light)); 
// 填充片元颜色 
gl_FragColor = vec4(dProd, // R 
dProd, // G 
dProd, // B 
1.0); // A 
}

使用点积的原因是:两个向量的点积表明他们有多么“相似”。如果两个向量都是归一化的,而且他们的方向一模一样,点积的值就是1;如果两个向量的方向恰巧完全相反,点积的值就是-1。我们所做的就是把点积的值拿来作用到光纤上,所以如果这个点在球体的右上方,点积的值就是1,也就是完全照亮了;而在另一边的点,获得的点积值接近0,甚至到了-1。我们将获得的任何负值都设置为0。当你将数据传入之后,你就会看到最基本的光照效果了。

下面是什么?我们会将顶点的坐标掺和进来。
2.Attribut变量
接下来我要通过Attribute变量为每一个顶点传递一个随机数,这个随机数被用来将顶点沿着法线向量推出去一段距离。新的结果有点像一个怪异的不规则物体,每次刷新页面物体都会随机变化。现在,他还不会动(后面我会让他动起来),但是几次刷新就可以很好地观察到,他的形状是随机的。
让我们开始为顶点着色器加入attribute变量吧:

attribute float displacement; 
varying vec3 vNormal; 
void main() { 
vNormal = normal; 
// 将随机数displacement转化为三维向量,这样就可以和法线相乘了 
vec3 newPosition = position + 
normal * vec3(displacement); 
gl_Position = projectionMatrix * 
modelViewMatrix * 
vec4(newPosition, 1.0); 
}

你看到什么都没变,因为attribute变量displacement还没有被设定你,所以着色器就使用了0作为默认值。这时displacement还没起作用,但我们马上就要在着色器材质中加上attribute变量了,然后Three.js就会自动地把它们绑在一起运行了。

同时也要注意这样一个事实,我将更新后的位置指定给了一个新的三维向量变量,因为原来的位置变量position,就像所有的attribute变量一样,都是只读的。
3.更新着色器材质
现在我们来更新着色器材质,传入一些东西给attribute对象displacement。记住,attribute对象是和顶点一一对应的,所以我们对球体的每一个顶点都有一个值,就像这样:

var attributes = { 
displacement: { 
type: 'f', // 浮点数 
value: [] // 空数组 
} 
}; 
var vShader = $('#vertexshader'); 
var fShader = $('#fragmentshader'); 
// 创建一个包含attribute属性的着色器材质 
var shaderMaterial = 
new THREE.MeshShaderMaterial({ 
attributes: attributes, 
vertexShader: vShader.text(), 
fragmentShader: fShader.text() 
}); 
// 向displacement中填充随机数 
var verts = sphere.geometry.vertices; 
var values = attributes.displacement.value; 
for(var v = 0; v < verts.length; v++) { 
values.push(Math.random() * 30); 
}

这样,就可以看到一个变形的球体了。最Cool的是:所有这些变形都是在GPU中完成的。
4.动起来
要使这东西动起来,应该怎么做?好吧,应该做这两件事情。
一个uniform变量amplitude,在每一帧控制displacement实际造成了多少位移。我们可以使用正弦或余弦函数来在每一帧中生成它,因为这两个函数的取值范围从-1到1。
一个帧循环。

我们需要将这个uniform变量加入到着色器材质中,同时也需要加入到顶点着色器中。先来看顶点着色器:

uniform float amplitude; 
attribute float displacement; 
varying vec3 vNormal; 
void main() { 
vNormal = normal; 
// 将displacement乘以amplitude,当我们在每一帧中平滑改变amplitude时,画面就动起来了 
vec3 newPosition = 
position + 
normal * 
vec3(displacement * 
amplitude); 
gl_Position = projectionMatrix * 
modelViewMatrix * 
vec4(newPosition, 1.0); 
}

然后更新着色器材质:
var uniforms = { 
amplitude: { 
type: 'f', // a float 
value: 0 
} 
}; 
var vShader = $('#vertexshader'); 
var fShader = $('#fragmentshader'); 
// 创建最终的着色器材质 
var shaderMaterial = 
new THREE.MeshShaderMaterial({ 
uniforms: uniforms, 
attributes: attributes, 
vertexShader: vShader.text(), 
fragmentShader: fShader.text() 
});

我们的着色器也已经就绪了。但我们好像又倒退了一步,屏幕中又只剩下光滑的球了。别担心,这是因为amplitude值设置为0,因为我们将amplitude乘上了displacement,所以现在看不到任何变化。我们还没设置循环呢,所以amplitude只可能是0.

在我们的JavaScript中,需要将渲染过程打包成一个函数,然后用requestAnimationFrame去调用该函数。在这个函数里,我们更新uniform(译者注:即amplitude)的值。

var frame = 0; 
function update() { 
// amplitude来自于frame的正弦值 
uniforms.amplitude.value = 
Math.sin(frame); 
// 更新全局变量frame 
frame += 0.1; 
renderer.render(scene, camera); 
// 指定下一次屏幕刷新时,调用update 
requestAnimFrame(update); 
} 
requestAnimFrame(update);

5.小结
就是它了!你看到球体正在奇怪地脉动着。关于着色器,还有太多的内容没有讲到呢,但是我希望这篇教程能够对你有一些帮助。现在,当你看到一些其他的着色器时,我希望你能够理解它们,而且你应该有信心去创建自己的着色器了!

和往常一样,我将这一课的源码打包了

Javascript 相关文章推荐
javascript对JSON数据排序的3个例子
Apr 12 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
javascript self对象使用详解
Oct 18 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue双向数据绑定知识点总结
Apr 18 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 #Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 #Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 #Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php array的学习笔记
2012/05/10 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
深入理解python对json的操作总结
2017/01/05 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
"序列点" 是什么
2016/07/29 面试题
出国留学自荐信
2013/10/25 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android