资讯专栏INFORMATION COLUMN

Threejs教程之着色器

darkbaby123 / 1748人阅读

摘要:学习基础具备基本和着色器语言知识,不一定要深入学习。着色器所谓的材质对象本质上就是着色器代码和需要传递的数据光源颜色矩阵。比更方便些,着色器中的很多变量不用声明,系统会自动帮你设置,比如顶点坐标变量投影矩阵视图矩阵

Three.js着色器

很多时候如果想写一些特效,往往需要编写着色器代码GLSL,如果你不熟悉着色器语言,自然需要学习着色器语言语法,如果你有着色器语言基础,直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API编写就可以。相比较在原生WebGL代码中编写着色器要方便的多,在threejs中想着色器传递数据不需要像WebGL中要使用WebGL API来传递,threejs会自动帮你处理。

学习基础

具备基本WebGL和着色器语言知识,不一定要深入学习。

基本Threejs基础。

如果有图形学基础更好,没有也没关系,可以慢慢学习。

WebGL入门

关注郭隆邦技术博客,有很多关于webgl的知识和书籍资料。

郭隆邦技术博客提供的webgl视频教程

《WebGL编程指南》,适合入门的书籍

《交互式计算机图形学》源码也是WebGL,相比较《WebGL编程指南》图形学算法内容更多,内容更详实,适合深入学习。

Three.js着色器API

threejs所谓的材质对象Material本质上就是着色器代码和需要传递的uniform数据(光源、颜色、矩阵...)。
很多时候如果想写一些特效,往往需要编写着色器代码GLSL,如果你不熟悉着色器语言,自然需要学习着色器语言语法,如果你有着色器语言基础,直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API编写就可以。相比较在原生WebGL代码中编写着色器要方便的多,在threejs中想着色器传递数据不需要像WebGL中要使用WebGL API来传递,threejs会自动帮你处理。

RawShaderMaterial

和原生WebGL中一样,顶点着色器、片元着色器代码基本没有任何区别,
不过顶点数据和uniform数据可以通过threejs的API快速传递,要比使用WebGL原生的API与着色器变量绑定要方便得多。

ShaderMaterial

ShaderMaterial比RawShaderMaterial更方便些,着色器中的很多变量不用声明,threejs系统会自动帮你设置,比如顶点坐标变量、投影矩阵、视图矩阵...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97994.html

相关文章

  • 产品三维模型在线预览

    摘要:次时代传统的方式就是创建次时代模型,对应中的材质是高光网格材质对象,通常贴图文件包含颜色贴图法线贴图和高光贴图。 产品在线展示案例预览 玉镯在线预览:http://www.yanhuangxueyuan.co... 汽车在线预览:http://www.yanhuangxueyuan.co... Web3D技术历史 可通过插件或WebGL技术实现Web3D,在线网页上预览操作三维...

    DirtyMind 评论0 收藏0
  • SegmentFault 技术周刊 Vol.35 - WebGL:打开网页看大片

    摘要:在文末,我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一,它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 Web...

    objc94 评论0 收藏0
  • WebVR开发教程——深度剖析

    摘要:片元着色器主要处理片元颜色,在这里只是将纹理坐标和纹理对象传给片元着色器。根据公式分别计算出左右视口的模型视图投影矩阵,传给顶点着色器程序,与顶点缓冲区的顶点坐标相乘绘制出最终顶点。 最近WebVR API 1.1已经发布,2.0草案也在拟定中,在我看来,WebVR走向大众浏览器是早晚的事情了,今天本人将对WebVR开发环境和开发流程进行深入介绍。 WebVR与WebVR API 首先...

    Cciradih 评论0 收藏0
  • threejs构建web三维视图入门教程

    摘要:本文是一篇简单的构建三维视图的入门教程,你可以了解到利用创建简单的三维图形,并且控制图形运动。然后将其加入到中。三创建对象大多数时候,我们需要讲绘制的图形整合到一起进行控制。在轴上运动的完整代码这个入门教程就到这里了,感谢阅读。 本文是一篇简单的webGL+threejs构建web三维视图的入门教程,你可以了解到利用threejs创建简单的三维图形,并且控制图形运动。若有不足,欢迎指出...

    Profeel 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<