位置: 编程技术 - 正文

THREE.JS入门教程(3)着色器-下(three.js入门教程(合集))

编辑:rootadmin
译序 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变量: 在片元着色器中,我们将会创建一个相同变量名的变量,然后将法线向量和另一个表示来自右上方光线的向量点乘,并将结果作用于颜色。最后结果的效果有点像平行光。 使用点积的原因是:两个向量的点积表明他们有多么“相似”。如果两个向量都是归一化的,而且他们的方向一模一样,点积的值就是1;如果两个向量的方向恰巧完全相反,点积的值就是-1。我们所做的就是把点积的值拿来作用到光纤上,所以如果这个点在球体的右上方,点积的值就是1,也就是完全照亮了;而在另一边的点,获得的点积值接近0,甚至到了-1。我们将获得的任何负值都设置为0。当你将数据传入之后,你就会看到最基本的光照效果了。 下面是什么?我们会将顶点的坐标掺和进来。 2.Attribut变量 接下来我要通过Attribute变量为每一个顶点传递一个随机数,这个随机数被用来将顶点沿着法线向量推出去一段距离。新的结果有点像一个怪异的不规则物体,每次刷新页面物体都会随机变化。现在,他还不会动(后面我会让他动起来),但是几次刷新就可以很好地观察到,他的形状是随机的。 让我们开始为顶点着色器加入attribute变量吧: 你看到什么都没变,因为attribute变量displacement还没有被设定你,所以着色器就使用了0作为默认值。这时displacement还没起作用,但我们马上就要在着色器材质中加上attribute变量了,然后Three.js就会自动地把它们绑在一起运行了。同时也要注意这样一个事实,我将更新后的位置指定给了一个新的三维向量变量,因为原来的位置变量position,就像所有的attribute变量一样,都是只读的。 3.更新着色器材质 现在我们来更新着色器材质,传入一些东西给attribute对象displacement。记住,attribute对象是和顶点一一对应的,所以我们对球体的每一个顶点都有一个值,就像这样: 这样,就可以看到一个变形的球体了。最Cool的是:所有这些变形都是在GPU中完成的。 4.动起来 要使这东西动起来,应该怎么做?好吧,应该做这两件事情。 一个uniform变量amplitude,在每一帧控制displacement实际造成了多少位移。我们可以使用正弦或余弦函数来在每一帧中生成它,因为这两个函数的取值范围从-1到1。 一个帧循环。 我们需要将这个uniform变量加入到着色器材质中,同时也需要加入到顶点着色器中。先来看顶点着色器: 然后更新着色器材质: 我们的着色器也已经就绪了。但我们好像又倒退了一步,屏幕中又只剩下光滑的球了。别担心,这是因为amplitude值设置为0,因为我们将amplitude乘上了displacement,所以现在看不到任何变化。我们还没设置循环呢,所以amplitude只可能是0. 在我们的JavaScript中,需要将渲染过程打包成一个函数,然后用requestAnimationFrame去调用该函数。在这个函数里,我们更新uniform(译者注:即amplitude)的值。 5.小结 就是它了!你看到球体正在奇怪地脉动着。关于着色器,还有太多的内容没有讲到呢,但是我希望这篇教程能够对你有一些帮助。现在,当你看到一些其他的着色器时,我希望你能够理解它们,而且你应该有信心去创建自己的着色器了! 和往常一样,我将这一课的源码打包了

推荐整理分享THREE.JS入门教程(3)着色器-下(three.js入门教程(合集)),希望有所帮助,仅作参考,欢迎阅读内容。

THREE.JS入门教程(3)着色器-下(three.js入门教程(合集))

文章相关热门搜索词:threejs入门教程,three. js,three.js入门教程(合集),threejs入门教程,three.js入门指南,three.js入门教程(合集),three.js入门教程(合集),three.js 教程,内容如对您有帮助,希望把文章链接给更多的朋友!

THREE.JS入门教程(4)创建粒子系统 译序Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好

THREE.JS入门教程(5)你应当知道的十件事 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学

js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍 IE左键是window.event.button=1右键是window.event.button=2中键是window.event.button=4没有按键动作window.event.button=0Firefox左键是event.button=0右键是event.button=2中键是event.b

标签: three.js入门教程(合集)

本文链接地址:https://www.jiuchutong.com/biancheng/379141.html 转载请保留说明!

上一篇:THREE.JS入门教程(2)着色器-上(threejs入门教程)

下一篇:THREE.JS入门教程(4)创建粒子系统(three.js 教程)

  • 个人车辆无偿给公司使用
  • 公务员抚恤费
  • 稿费的个人所得税税率是多少
  • 成本结转的方法能用百分比法吗
  • 固定资产丢失
  • 个人如何对公账户汇款
  • 纳税申报现金流量表报错了可以重新申报吗
  • 合同每三个月付一次款
  • 房地产公司固定资产管理制度
  • 无法支付的应付款怎么处理
  • 独立核算分公司注销需要清算吗
  • 抵债物品销售
  • 应交税费期初数比期末数大
  • 公司对外投资是股东会还是董事会
  • 调整以前年度多计提的工资
  • 车辆保险赔款怎么入账
  • 销售货物并提供安装服务
  • 同城酒店怎么开发票
  • 发票联丢失能用抵扣联入账吗
  • 外墙装饰公司的资质规定
  • 小规模纳税人附表一怎么填
  • 应扣缴税额是什么意思
  • 新开办筹建费企业所得税申报填写
  • 转让地下建筑物交土地增值税吗
  • 盈亏平衡点定价法例题及答案
  • 购进半成品怎样做分录
  • 往年个税申报数据查询
  • 个税手续费返还要交增值税吗
  • element plus 虚拟化表格
  • 换购商品分录怎么做
  • 安置残疾人就业单位城镇土地使用税
  • mxnet github
  • php转换成html
  • laravel添加数据
  • 公司向股东借的钱怎么还
  • 使用灭火器人要站在上风口还是下风口
  • 人脸清晰化神器软件
  • 公司有个税怎么交
  • 作为大学生你能为国家安全贡献哪些力量论文
  • 汽车租赁业务是否属于租赁服务
  • 企业收到微信和微信消息
  • 个人对公付款
  • 金税盘怎么看税收编码版本号
  • 任意盈余公积金怎么计算
  • 固定资产摊余价值怎么计算
  • 工程施工属于什么经营范围
  • 个体工商户员工如何报生育险
  • 费用转销是什么意思
  • 增值税进项用不完怎么办
  • 预收账款结转收入分录
  • 公司委托银行付款的账务处理
  • 关于合同履约成本的表述错误的有
  • mysql5717安装过程
  • linux内核构成
  • bios设置密码怎么设置
  • mongo 安装
  • 苹果电脑安装虚拟机会有什么影响
  • WNxp下让所有用户桌面显示系统默认图标的方法
  • mac用chrome
  • windows mobile10
  • PadExe.exe - PadExe是什么进程 有什么用
  • win102021年1月大更新
  • win8系统怎么设置桌面图标
  • Windows 7+Fedora 16启动项问题讲解
  • 安卓新创手势
  • CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放
  • bat批处理脚本教程
  • base如何使用
  • unity资源管理机制
  • js中onmouseover
  • node.js deno
  • unity 移动应用开发
  • 张江税务所地址
  • 建筑工地临时板房验收规范最新
  • 出口退税是指对出口货物退还其在国内
  • ca证书免费申请
  • 应税销售额和应纳税额
  • 现在哪个保险公司车险好
  • 税控卡丢失怎么办
  • 长沙市税收排名
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设