# threejs-shader

**Repository Path**: mouseliu/threejs-shader

## Basic Information

- **Project Name**: threejs-shader
- **Description**: glsl，shader练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-13
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 说明

# 颜色突变
## step(edge, x) 
## edge 区分中间值
## 函数，其会返回0.0或1.0数值，如果 x < edge 返回0.0，如果 x > edge 返回1.0

# 重复效果、条纹效果
## fract(vUv.x * 3.0)
## 可以通过对 vUv 乘以一定倍数放大，比如0.0-1.0放大3倍变成0.0-3.0，然后用 fract() 函数取小数使得数值在 0.0-1.0 里循环重复，比如1.1、2.1取小数后都变回0.1，再将该数值转换成 vec3 再设置到颜色上，就会产生重复的黑白渐变效果。

# uniform变量
## uniform变量是外部application程序传递给（vertex和fragment）shader的变量。因此它是application通过函数glUniform**（）函数赋值的。在（vertex和fragment）shader程序内部，uniform变量就像是C语言里面的常量（const ），它不能被shader程序修改。（shader只能用，不能改）如果uniform变量在vertex和fragment两者之间声明方式完全一样，则它可以在vertex和fragment共享使用。（相当于一个被vertex和fragment shader共享的全局变量）uniform变量一般用来表示：变换矩阵，材质，光照参数和颜色等信息。

# attribute变量
## attribute变量是只能在vertex shader中使用的变量。（它不能在fragment shader中声明attribute变量，也不能被fragment shader中使用）一般用attribute变量来表示一些顶点的数据，如：顶点坐标，法线，纹理坐标，顶点颜色等。在application中，一般用函数glBindAttribLocation（）来绑定每个attribute变量的位置，然后用函数glVertexAttribPointer（）为每个attribute变量赋值。

# varying变量
## varying变量是vertex和fragment shader之间做数据传递用的。一般vertex shader修改varying变量的值，然后fragment shader使用该varying变量的值。因此varying变量在vertex和fragment shader二者之间的声明必须是一致的。application不能使用此变量。

# Normal（法线贴图）通道
## 顶点 varying vec3 vNormal;
## 顶点 设置 vNormal = normal;
## 片元 vNormal = normal;
## 片元 使用着色 gl_FragColor = vec4(vNormal, 1.0);

<!-- mix函数：
在两个值之间进行插值；
常用方式
uniform float uTime;
float progress = abs(sin(uTime));
vec3 newPos = mix(position1, position, progress); -->

<!-- smoothstep 函数
对 uv.x 在0-1之间平滑
此时不再是线性变化，而是两头变化慢、中间变化快。
float strength = smoothstep(0.0, 1.0, uv.x);
 -->