今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击博客原文. 这里我们分别引入三个纹理,分别是地球的表面纹理,对应的海拔灰度图,和云朵的纹理.使用表面纹理还是地球的外貌,海拔灰度图给地球添加凹凸效果,云朵纹理给地球添加云朵效果.下面我们说一说代码. 1. 绘制几何体,加载贴图 我们只需要在一个球体中进行操作,所以新建一个球体.然后分别加载三张纹理. var sphere = new THREE.SphereBufferGeometry(10, 128,…

说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质.着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧. 1. 什么是着色器材质 着色器材质(ShaderMaterial)是一个用GLSL编写的小程序 ,在GPU上运行.它能够提供 materials 之外的效果,也可以将许多对象组合成单个Geometry或Buffer…

上一篇郭先生在例子中用到了着色器变量中的uniform和varying.这篇继续结合例子将一下attribute变量,在使用过程中也发现由于three.js的版本迭代,之前的一些属性和参数已经发生了改变,ShaderMaterial也不需要传递attributes属性值,查看源码我们可以看到如果传递了attributes参数,会给出下面这样的错误. attributes should now be defined in THREE.BufferGeometry instead. 因为我们现在想传…

这篇郭先生说一下three.js着色器的内置变量,分别是 gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变) gl_Position:控制顶点选完的位置 gl_FragColor:片元的RGB颜色值 gl_FragCoord:片元的坐标,同样是以像素为单位 gl_PointCoord:在点渲染模式中,对应方形像素坐标 他们或者单个出现在着色器中,或者组团出现在着色器中,是着色器的灵…

上一篇说顶点着色器和片元着色器的皮毛,这篇郭先生说一说着色器变量,通过变量可以设置材质.先看看今天要做的如下图.在线案例请点击博客原文. 在这个案例之前,我们先复习一下着色器变量 Uniforms是所有顶点都具有相同的值的变量. 比如灯光,雾,和阴影贴图就是被储存在uniforms中的数据. uniforms可以通过顶点着色器和片元着色器来访问. Varyings 是从顶点着色器传递到片元着色器的变量.因此需要在两个着色器中同时定义,对于每一个片元,每一个varying的值将是相邻顶点值的平滑插…

这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能更好地掌握.效果如下图,在线案例请点击博客原文. 这里用到了用到了顶点着色器和片元着色器. 1. 设置几何体 设置一个几何体,对于波浪效果,我们制作一个球几何体(当然也可以设置其他的,可能有意想不到的效果哦!). var sphere = new THREE.SphereBufferGeometry(10, 120, 80); 2. 设置…

郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措.原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着色器材质,利用好的我们的GPU.这篇说一说glsl内置函数. 1. 和角度相关的函数 下面是一个和角度相关的函数,他们的用法我们度熟悉. 函数 参数 描述 sin(x) 弧度 正弦函数 cos(x) 弧度 余弦函数 tan(x) 弧度 正切函数 asin(x) 弧度 反正弦函数 acos(x) 弧度…

在Shader中,我们除了可以设定各种光线处理外,还可以增加纹理贴图. 使用 settexture 命令可以为着色器指定纹理. 示例代码: Shader "Sbin/ff2" { // 贴图采样 properties { // 变量名("描述名",类型)=值 _Color(,,,) _Ambient("环境光", color)=(0.3,0.3,0.3,0.3) _Specular(,,,) // 变量名("描述名",rang…

当Pixi使用WebGL去调用GPU渲染图像时,需要先将图像转化为GPU可以处理的版本.而能够被GPU处理的图像就叫做纹理,在pixi中使用纹理缓存来存储和引用所有纹理.通过将纹理分配给精灵,再将精灵添加到舞台上,从而显示图像. 图像转化为纹理的方式 1. app的loader对象 Pixi强大的loader对象可以加载任何种类的图像资源,并保存在纹理缓存中.后续如果需要继续获取纹理,就不用再重复加载图像,直接从缓存中获取即可,减轻GPU内存占用. app.loader .add("imgs/1…

其实在3D引擎/库的帮助下,我们做webgl开发的难度已经很大大地降低了,熟悉相关API的话,开发一个简单的3D程序可以说是很轻松的事情. 在我看来,webgl的核心就是着色器(顶点着色器.片元着色器),这两者决定了如何在屏幕上绘制出我们想要的效果.所以,无论你是刚入门的3D开发者(我也是刚刚探索3D领域)还是该领域的资深老鸟,对着色器的了解都是至关重要的. 我们一般的软件开发(例如一些管理系统.商城小程序),诸如这些业务逻辑性非常强的程序,都是依靠CPU的高速运算,而做WebGL(3D开发),…