Three.js-着色器（glsl内置函数）
目录
1. 和角度相关的函数
2. 数学函数
3. 常用函数
4. 几何函数
5.内置函数参数常见形式
6.使用内置函数实现各种图形
6.1 利用取模函数mod（）达到反复渐变效果
6.2 利用step(edge, x)实现斑马线条纹效果
6.3 利用绝对值abs（）实现中间向两边渐变
6.4 利用取最小值min（）实现渐变
6.5 利用取最大值max（）实现渐变效果
6.6 利用step（）、max（）、abs（）实现小正方形
6.7 利用向下取整函数floor（）实现条纹渐变
6.8 利用向上取整函数ceil（）实现渐变格子
6.9 利用随机函数radom（）实现随机效果
6.10 使用length返回向量长度（沿半径计算长度）
6.11 使用distance函数计算两个向量之间的距离
6.12 利用旋转函数rotate（）实现旋转飞镖效果
着色器提供了一系列内置函数，所谓内置函数和内置变量一样，也就是说不用声明，就可以直接调用。比如向量点乘dot()、向量叉乘cross()、两点之间距离distance()等用于数学计算的函数。
1. 和角度相关的函数
下面是一个和角度相关的函数，他们的用法我们度熟悉。
|
函数 |
参数 |
描述 |
|
sin(x) |
弧度 |
正弦函数 |
|
cos(x) |
弧度 |
余弦函数 |
|
tan(x) |
弧度 |
正切函数 |
|
asin(x) |
弧度 |
反正弦函数 |
|
acos(x) |
弧度 |
反余弦函数 |
|
atan(x) |
弧度 |
反正切函数 |
|
radians(x) |
角度 |
角度转换为弧度 |
|
degrees(x) |
弧度 |
弧度转换为角度 |
2. 数学函数
这类主要是对指数对数幂函数的操作。
|
函数 |
描述 |
|
pow(x,y) |
x的y次方。如果x小于0，结果是未定义的。同样，如果x=0并且y<=0,结果也是未定义的。 |
|
exp(x) |
e的x次方 |
|
log(x) |
计算满足x等于e的y次方的y的值。如果x的值小于0，结果是未定义的。 |
|
exp2(x) |
计算2的x次方 |
|
log2(x) |
计算满足x等于2的y次方的y的值。如果x的值小于0，结果是未定义的。 |
|
sqrt(x) |
计算x的开方。如果x小于0，结果是未定义的。 |
|
inversesqrt(x) |
计算x的开方之一的值，如果x小于等于0，结果是未定义的。 |
3. 常用函数
这里是常用函数，和js中的内置函数很像，需要牢记。
|
函数 |
描述 |
|
abs(x) |
返回x的绝对值 |
|
sign(x) |
如果x>0，返回1.0；如果x=0，返回0，如果x<0，返回-1.0 |
|
floor(x) |
返回小于等于x的最大整数值 |
|
ceil(x) |
返回大于等于x的最小整数值 |
|
fract(x) |
返回x-floor(x)，即返回x的小数部分 |
|
mod(x, y) |
返回x和y的模 |
|
min(x, y) |
返回x和y的值较小的那个值。 |
|
max(x, y) |
返回x和y的值较大的那个值。 |
|
clamp(x, minVal, maxVal) |
将x值钳于minVal和maxVal之间，意思就是当x<minVal时返回minVal，当x>maxVal时返回maxVal，当x在minVal和maxVal之间时，返回x |
|
mix(x, y, a) |
返回线性混合的x和y，如：x*(1−a)+y*a |
|
step(edge, x) |
如果x < edge，返回0.0，否则返回1.0 |
|
smoothstep(edge0, edge1, x) |
如果x <= edge0，返回0.0 ；如果x >= edge1 返回1.0；如果edge0 < x < edge1，则执行0~1之间的平滑埃尔米特差值。如果edge0 >= edge1，结果是未定义的。 |
4. 几何函数
这是与长度、距离、向量等相关的函数。
|
length(x) |
返回向量x的长度 |
|
distance(p0,p1) |
计算向量p0，p1之间的距离 |
|
dot |
向量x，y之间的点积 |
|
cross(x, y) |
向量x，y之间的叉积 |
|
normalize(x) |
标准化向量，返回一个方向和x相同但长度为1的向量 |
|
faceforward(N, I, Nref) |
如果Nref和I的点积小于0，返回N；否则，返回-N； |
|
reflect(I, N) |
返回反射向量 |
|
refract(I, N, eta) |
返回折射向量 |
5.内置函数参数常见形式
内置函数参数数据类型常见形式：float、vec2、vec3、vec4
6.使用内置函数实现各种图形
在片元着色器（fragment.glsl）中，通过各种内置函数实现不同效果的图形。
在fragment.glsl的main（）函数前声明uv值及数据精度：
precision lowp float;
varying vec2 vUv;
6.1 利用取模函数mod（）达到反复渐变效果
float strength = mod(vUv.y * 10.0 , 1.0) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.2 利用step(edge, x)实现斑马线条纹效果
1）该step（edge，x）函数中，如果x < edge，返回0.0，否则返回1.0。
float strength = mod(vUv.y * 10.0 , 1.0) ;strength = step(0.5,strength);//0.5为边界值gl_FragColor =vec4(strength,strength,strength,1);实现效果：
2）更改step中边界值为0.8，当strength大于0.8时返回1，否则返回0，因此黑色宽度占80%，白色占20%。代码如下：
float strength = mod(vUv.y * 10.0 , 1.0) ;strength = step(0.8,strength);gl_FragColor =vec4(strength,strength,strength,1);实现效果：
3） 同理，当取vUv的x值时，则生成竖向条纹。
float strength = mod(vUv.x * 10.0 , 1.0) ;strength = step(0.8,strength);gl_FragColor =vec4(strength,strength,strength,1);实现效果：
4）横竖条纹相加
float strength = step(0.8, mod(vUv.x * 10.0 , 1.0)) ;
strength += step(0.8, mod(vUv.y * 10.0 , 1.0)) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
5）条纹相乘（相交位置为1，其余为0）
float strength = step(0.8, mod(vUv.x * 10.0 , 1.0)) ;
strength *= step(0.8, mod(vUv.y * 10.0 , 1.0)) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6）条纹相减
float strength = step(0.8, mod(vUv.x * 10.0 , 1.0)) ;strength -= step(0.8, mod(vUv.y * 10.0 , 1.0)) ;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
7）方块图形
float strength = step(0.2, mod(vUv.x * 10.0 , 1.0)) ;strength *= step(0.2, mod(vUv.y * 10.0 , 1.0)) ;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
8）炫彩T字
float barX = step(0.4, mod(vUv.x * 10.0 - 0.2 , 1.0))*step(0.8, mod(vUv.y * 10.0 , 1.0)) ;
float barY = step(0.4, mod(vUv.y * 10.0 , 1.0))*step(0.8, mod(vUv.x * 10.0 , 1.0)) ;
float strength = barX+barY;
gl_FragColor = vec4(vUv,1,strength);实现效果：
6.3 利用绝对值abs（）实现中间向两边渐变
float strength = abs(vUv.x - 0.5) ;//|-0.5~0.5|=0.5-0-0.5
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.4 利用取最小值min（）实现渐变
float strength =min(abs(vUv.x - 0.5), abs(vUv.y - 0.5)) ;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.5 利用取最大值max（）实现渐变效果
float strength =max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)) ;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.6 利用step（）、max（）、abs（）实现小正方形
float strength =step(0.1,max(abs(vUv.x - 0.5), abs(vUv.y - 0.5))) ;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
反之，若中间正方型为白色，外框为黑色，则：
6.7 利用向下取整函数floor（）实现条纹渐变
1）实现纵向条纹（横向渐变）
float strength = floor(vUv.x*10.0)/10.0;//水平 向下取整实现阶段性图形变化gl_FragColor =vec4(strength,strength,strength,1);实现效果：
2）实现横向条纹（纵向渐变）
float strength = floor(vUv.y*10.0)/10.0;//垂直gl_FragColor =vec4(strength,strength,strength,1);实现效果：
3）利用条纹相乘实现渐变格子
float strength = floor(vUv.x*10.0)/10.0*floor(vUv.y*10.0)/10.0;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.8 利用向上取整函数ceil（）实现渐变格子
float strength = ceil(vUv.x*10.0)/10.0*ceil(vUv.y*10.0)/10.0;gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.9 利用随机函数radom（）实现随机效果
随机函数虽然内置函数并未提供，但可以通过算法实现类随机效果：
在main（）函数前对随机函数进行声明：
// 随机函数
float random (vec2 st) {return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
}1）随机效果
在main（）函数中对random（）函数进行调用：
float strength = random(vUv);gl_FragColor =vec4(strength,strength,strength,1);实现效果：
2）随机格子效果
float strength = ceil(vUv.x*10.0)/10.0*ceil(vUv.y*10.0)/10.0;strength = random(vec2(strength,strength));gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.10 使用length返回向量长度（沿半径计算长度）
float strength = length(vUv);gl_FragColor =vec4(strength,strength,strength,1);实现效果：
6.11 使用distance函数计算两个向量之间的距离
1）计算uv向量与（0.5，0.5）中心点之间的距离
float strength =1.0 - distance(vUv,vec2(0.5,0.5));gl_FragColor =vec4(strength,strength,strength,1);实现效果：
2）利用相除，实现光点效果
float strength =0.15 / distance(vUv,vec2(0.5,0.5)) - 1.0;gl_FragColor =vec4(strength,strength,strength,strength);
实现效果：
3）实现十字交叉星星效果
float strength = 0.15 / distance(vec2(vUv.x,(vUv.y-0.5)*5.0+0.5),vec2(0.5,0.5)) - 1.0;
strength += 0.15 / distance(vec2(vUv.y,(vUv.x-0.5)*5.0+0.5),vec2(0.5,0.5)) - 1.0;
gl_FragColor =vec4(strength,strength,strength,strength);实现效果：
6.12 利用旋转函数rotate（）实现旋转飞镖效果
1）同随机函数一样，虽然glsl并未提供内置函数，但可以通过三角函数实现旋转算法，在main（）函数前对rotate（）函数进行声明：
// 旋转函数
//（uv，旋转度数，旋转中心）
vec2 rotate(vec2 uv, float rotation, vec2 mid)
{return vec2(cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y);
}2）在main（）函数前声明uTime：
uniform float uTime;3）并在main.js中对uTime进行设置：
// 创建着色器材质;
const shaderMaterial = new THREE.ShaderMaterial({vertexShader: deepVertexShader,fragmentShader: deepFragmentShader,uniforms: {// 动画时间uTime: {value: 0,},},side: THREE.DoubleSide,transparent: true,
});并对uTime的值进行绑定：
const elapsedTime = clock.getElapsedTime();
shaderMaterial.uniforms.uTime.value = elapsedTime;4） 在main（）函数内实现旋转：
vec2 rotateUv = rotate(vUv,-uTime*5.0,vec2(0.5));
float strength = 0.15 / distance(vec2(rotateUv.x,(rotateUv.y-0.5)*5.0+0.5),vec2(0.5,0.5)) - 1.0;
strength += 0.15 / distance(vec2(rotateUv.y,(rotateUv.x-0.5)*5.0+0.5),vec2(0.5,0.5)) - 1.0;
gl_FragColor =vec4(strength,strength,strength,strength);实现效果：
Three.js-着色器（glsl内置函数）相关推荐
- python中的json函数_python中装饰器、内置函数、json的详解
装饰器 装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象. 先看简单例子: def run(): time.sleep(1 ...
- 13装饰器和内置函数
装饰器 # 1.装饰用的工具# import time #内置函数计算函数运行时间 # print(time.time())# import time # def func(): # start_ti ...
- 五、python函数、装饰器、内置函数、json及模块
一.递归调用 1.一个函数自己调用自己就是递归调用,最多一个函数递归调用自己999次,超过就会出错 2.递归必须有一个明确的结束条件 3.每次进入更深一层递归时,问题规模相比上次递归都应有所减少 4. ...
- Python装饰器、内置函数之金兰契友
装饰器:装饰器的实质就是一个闭包,而闭包又是嵌套函数的一种.所以也可以理解装饰器是一种特殊的函数. 因为程序一般都遵守开放封闭原则,软件在设计初期不可能把所有情况都想到,所以一般软件都支持功能上的扩展 ...
- python装饰器 稀里糊涂_万恶之源 - Python装饰器及内置函数
装饰器 听名字应该知道这是一个装饰的东西,我们今天就来讲解一下装饰器,有的铁子们应该听说,有的没有听说过.没有关系我告诉你们这是一个很神奇的东西 这个有多神奇呢? 我们先来复习一下闭包 def fun ...
- python列表不包含哪个内置函数_python 列表的推导器和内置函数
#++ =================================== = 列表的推导式 # li = [] # for i in range(1,11): # li.append(i) # ...
- python 列表的推导器和内置函数
#++ =================================== = 列表的推导式 # li = []# for i in range(1,11):# li.append(i)# pri ...
- python一些常用函数_【python】常用的一些内置函数
1.cmp cmp(A,B)函数,比较A,B的大小,如果A大于B,返回1,A小于B返回-1,A等于B返回0 print cmp(12,33) >>>-1 print cmp(&quo ...
- python中divmod_python内置函数 divmod()
先来看一下builtins.py中的代码: def divmod(x, y): # known case of builtins.divmod """ Return th ...
最新文章
- 运行在CentOS7.5上的Django项目时间不正确问题
- TensorFlow学习笔记之五——源码分析之最近算法
- Eclipse4.4设备egit插件提交本地项目代码到远程仓库
- [BZOJ1355][Baltic2009]Radio Transmission
- Mysql 死锁过程及案例详解之记录锁与间隔锁Record Lock Gap Lock
- OpenJdk7编译
- Android--使用XMLPull解析xml
- C++ 11 在 Qt 5 中的应用
- log4j:WARN No appenders could be found for logger
- 链式二叉树的C语言代码
- Ruby在windows下配置所遇到的问题
- CAD2010 64 位 安装后打开就卡死 解决方案
- 湖南职称计算机英语,湖南职称计算机考试哪里考，A，B，C，D各级别是怎么划分的...
- wifi信号满格无法连接服务器,wifi正常为什么不能上网_一招解决wifi信号满格不能上网的方法...
- JavaScript基础总结（1）
- php strpos 区分大小写么?,PHP strpos() 函数
- USB转多路串口 USB hub USB扩展
- redis常用命令:
- 2012最新网络电台mms地址
- 网络摄像头100万至500万分辨率多少？传输带宽占用多少？存储空间是多少？