three.js 着色器材质之glsl内置函数
郭先生发现在开始学习three.js着色器材质时，我们经常会无从下手，辛苦写下的着色器，也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言–GLSL，只有懂了这个语言，我们才能更好的写出着色器材质，利用好的我们的GPU。这篇说一说glsl内置函数。 1. 和角度相关的函数 下面 ...
原文：three.js 着色器材质之初识着色器
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 . 什么是着色器材质 着色器材质 ShaderMaterial 是一个用GLSL编写的小程序 ，在GPU上运行。它 ...
2020-08-03 09:06 4 1634 推荐指数：
相关推荐
three.js 着色器材质之变量（二）
上一篇郭先生在例子中用到了着色器变量中的uniform和varying。这篇继续结合例子将一下attribute变量，在使用过程中也发现由于three.js的版本迭代，之前的一些属性和参数已经发生了改变，ShaderMaterial也不需要传递attributes属性值，查看源码我们可以看到 ...
three.js 着色器材质之纹理
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击博客原文。 这里我们分别引入三个纹理，分别是地球的表面纹理，对应的海拔灰度图，和云朵的纹理。使用表面纹理还是地球的外貌，海拔灰度图给地球添加凹凸效果，云朵纹理给地球添加云朵效果。下面我们说一说代码 ...
three.js 着色器材质内置变量
这篇郭先生说一下three.js着色器的内置变量，分别是 gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变） gl_Position：控制顶点选完的位置 ...
three.js 着色器材质之变量（三）
这篇郭先生在练习一下着色器变量，在度娘上面或者官网上经常看到类似水波一样的效果，这篇就试着做一个这样的效果，顺便巩固一下顶点着色器和片元着色器，毕竟多多练习才能更好地掌握。效果如下图，在线案例请点击博客原文。 这里用到了用到了顶点着色器和片元着色器。 1. 设置几何体 设置一个几何体 ...
three.js 着色器材质之变量（一）
上一篇说顶点着色器和片元着色器的皮毛，这篇郭先生说一说着色器变量，通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击博客原文。 在这个案例之前，我们先复习一下着色器变量 Uniforms是所有顶点都具有相同的值的变量。 比如灯光，雾，和阴影贴图就是被储存在uniforms中 ...
[译] THREE.JS入门教程-3.着色器-下
译序 Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 国外网站 aerotwist.com ...
[译] THREE.JS入门教程-2.着色器-上
译序 Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 国外网站 aerotwist.com ...