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 相关文章推荐
href下载文件根据id取url并下载
May 28 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
一个PHP的String类代码
2010/04/20 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
python根据京东商品url获取产品价格
2015/08/09 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python内置模块collections知识点总结
2019/12/19 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
迎接领导欢迎词
2014/01/11 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
爱国电影观后感
2015/06/19 职场文书