shader-fundamentals by bbeierle12/skill-mcp-claude
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill shader-fundamentalsGLSL (OpenGL 着色语言) 在 GPU 上运行。顶点着色器变换几何体;片段着色器为像素着色。
// Vertex Shader
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// Fragment Shader
uniform float uTime;
varying vec2 vUv;
void main() {
vec3 color = vec3(vUv, sin(uTime) * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);
}
Vertex Data → [Vertex Shader] → Primitives → Rasterization → [Fragment Shader] → Pixels
↑ ↑ ↑
attributes transforms per-pixel color
| 阶段 | 运行频率 | 用途 |
|---|---|---|
| 顶点着色器 | 每个顶点 | 变换位置,传递数据给片段 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 片段着色器 | 每个像素 | 计算最终颜色 |
bool b = true;
int i = 42;
float f = 3.14;
vec2 v2 = vec2(1.0, 2.0);
vec3 v3 = vec3(1.0, 2.0, 3.0);
vec4 v4 = vec4(1.0, 2.0, 3.0, 4.0);
// 整型向量
ivec2 iv2 = ivec2(1, 2);
ivec3 iv3 = ivec3(1, 2, 3);
// 布尔向量
bvec2 bv2 = bvec2(true, false);
vec4 color = vec4(1.0, 0.5, 0.2, 1.0);
vec3 rgb = color.rgb; // (1.0, 0.5, 0.2)
vec2 rg = color.rg; // (1.0, 0.5)
float r = color.r; // 1.0
// 重新排序
vec3 bgr = color.bgr; // (0.2, 0.5, 1.0)
// 重复
vec3 rrr = color.rrr; // (1.0, 1.0, 1.0)
// 位置别名 (xyzw = rgba = stpq)
vec3 pos = v4.xyz;
vec2 uv = v4.st;
mat2 m2; // 2x2
mat3 m3; // 3x3
mat4 m4; // 4x4
// 访问列
vec4 col0 = m4[0];
// 访问元素
float val = m4[1][2]; // 第 1 列,第 2 行
uniform sampler2D uTexture; // 2D 纹理
uniform samplerCube uCubemap; // 立方体贴图
// 采样纹理
vec4 texColor = texture2D(uTexture, vUv);
vec4 cubeColor = textureCube(uCubemap, direction);
// 从 JavaScript 设置,对所有顶点/片段相同
uniform float uTime;
uniform vec3 uColor;
uniform mat4 uModelMatrix;
uniform sampler2D uTexture;
// 仅在顶点着色器中
attribute vec3 position; // 内置:顶点位置
attribute vec3 normal; // 内置:顶点法线
attribute vec2 uv; // 内置:纹理坐标
attribute vec3 color; // 内置:顶点颜色
// 自定义属性
attribute float aScale;
attribute vec3 aOffset;
// 顶点着色器:写入
varying vec2 vUv;
varying vec3 vNormal;
void main() {
vUv = uv;
vNormal = normal;
}
// 片段着色器:读取(在三角形上插值)
varying vec2 vUv;
varying vec3 vNormal;
void main() {
// vUv 在三角形顶点之间插值
}
// 输出(必须写入)
vec4 gl_Position; // 裁剪空间位置
// 输出(可选)
float gl_PointSize; // 点精灵大小(用于 gl.POINTS)
// 输入
vec4 gl_FragCoord; // 窗口空间位置(像素坐标)
bool gl_FrontFacing; // 如果是正面则为 true
vec2 gl_PointCoord; // 点精灵坐标 [0,1]
// 输出
vec4 gl_FragColor; // 最终像素颜色
局部/对象空间
↓ modelMatrix
世界空间
↓ viewMatrix
视图/眼睛/相机空间
↓ projectionMatrix
裁剪空间 (-1 到 1)
↓ perspective divide
NDC(归一化设备坐标)
↓ viewport transform
屏幕空间(像素)
uniform mat4 modelMatrix; // 局部 → 世界
uniform mat4 viewMatrix; // 世界 → 视图
uniform mat4 projectionMatrix; // 视图 → 裁剪
uniform mat4 modelViewMatrix; // 局部 → 视图 (modelMatrix * viewMatrix)
uniform mat3 normalMatrix; // 用于变换法线
uniform vec3 cameraPosition; // 相机世界位置
void main() {
// 完整变换链
vec4 worldPosition = modelMatrix * vec4(position, 1.0);
vec4 viewPosition = viewMatrix * worldPosition;
vec4 clipPosition = projectionMatrix * viewPosition;
gl_Position = clipPosition;
// 或组合(更高效)
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// 三角函数
sin(x), cos(x), tan(x)
asin(x), acos(x), atan(x)
atan(y, x) // atan2
// 指数函数
pow(x, y) // x^y
exp(x) // e^x
log(x) // ln(x)
sqrt(x) // √x
inversesqrt(x) // 1/√x
// 常用函数
abs(x)
sign(x) // -1, 0, 或 1
floor(x)
ceil(x)
fract(x) // x - floor(x)
mod(x, y) // x % y(浮点数)
min(x, y)
max(x, y)
clamp(x, min, max)
mix(a, b, t) // 线性插值:a*(1-t) + b*t
step(edge, x) // 如果 x < edge 则为 0,否则为 1
smoothstep(e0, e1, x) // 平滑 Hermite 插值
length(v) // 向量大小
distance(a, b) // length(a - b)
dot(a, b) // 点积
cross(a, b) // 叉积(仅 vec3)
normalize(v) // 单位向量
reflect(I, N) // 反射向量
refract(I, N, eta) // 折射向量
faceforward(N, I, Nref) // 如果需要则翻转法线
// vUv 范围从左下角 (0,0) 到右上角 (1,1)
varying vec2 vUv;
void main() {
// 居中 UV:-0.5 到 0.5
vec2 centered = vUv - 0.5;
// 宽高比校正(假设传递了 uResolution)
vec2 uv = vUv;
uv.x *= uResolution.x / uResolution.y;
// 平铺
vec2 tiled = fract(vUv * 4.0); // 4x4 平铺
// 极坐标
float angle = atan(centered.y, centered.x);
float radius = length(centered);
}
// 灰度(感知权重)
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
// 对比度
color = (color - 0.5) * contrast + 0.5;
// 亮度
color += brightness;
// 饱和度
float gray = dot(color, vec3(0.299, 0.587, 0.114));
color = mix(vec3(gray), color, saturation);
// Gamma 校正
color = pow(color, vec3(1.0 / 2.2)); // 线性到 sRGB
color = pow(color, vec3(2.2)); // sRGB 到线性
// 硬边
float mask = step(0.5, value);
// 软边
float mask = smoothstep(0.4, 0.6, value);
// 抗锯齿边(屏幕空间)
float mask = smoothstep(-fwidth(value), fwidth(value), value);
// 将 UV 显示为颜色
gl_FragColor = vec4(vUv, 0.0, 1.0);
// 显示法线
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
// 显示深度
float depth = gl_FragCoord.z;
gl_FragColor = vec4(vec3(depth), 1.0);
// 显示值范围(红色=负值,绿色=正值)
gl_FragColor = vec4(max(0.0, value), max(0.0, -value), 0.0, 1.0);
| 问题 | 可能原因 |
|---|---|
| 黑屏 | gl_Position 未设置,或 NaN 值 |
| Uniform 未更新 | 名称错误或类型不匹配 |
| 纹理黑色 | 纹理未加载,UV 错误 |
| 闪烁 | Z-fighting,精度问题 |
| 面片化外观 | 法线未插值 |
// 声明精度(WebGL 1 的片段着色器中必需)
precision highp float;
precision mediump float;
precision lowp float;
| 精度 | 范围 | 使用场景 |
|---|---|---|
| highp | ~10^38 | 位置,矩阵 |
| mediump | ~10^14 | UV,颜色 |
| lowp | ~2 | 简单标志 |
shader-fundamentals/
├── SKILL.md
├── references/
│ ├── glsl-types.md # 完整类型参考
│ ├── builtin-functions.md # 所有内置函数
│ └── coordinate-spaces.md # 变换管线
└── scripts/
└── templates/
├── basic.glsl # 入门模板
└── fullscreen.glsl # 全屏四边形着色器
references/glsl-types.md — 完整数据类型参考references/builtin-functions.md — 所有 GLSL 内置函数references/coordinate-spaces.md — 变换管线深入解析每周安装数
71
仓库
GitHub 星标数
7
首次出现
2026年1月22日
安全审计
安装于
opencode59
codex58
claude-code56
gemini-cli55
cursor55
github-copilot49
GLSL (OpenGL Shading Language) runs on the GPU. Vertex shaders transform geometry; fragment shaders color pixels.
// Vertex Shader
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// Fragment Shader
uniform float uTime;
varying vec2 vUv;
void main() {
vec3 color = vec3(vUv, sin(uTime) * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);
}
Vertex Data → [Vertex Shader] → Primitives → Rasterization → [Fragment Shader] → Pixels
↑ ↑ ↑
attributes transforms per-pixel color
| Stage | Runs Per | Purpose |
|---|---|---|
| Vertex Shader | Vertex | Transform positions, pass data to fragment |
| Fragment Shader | Pixel | Calculate final color |
bool b = true;
int i = 42;
float f = 3.14;
vec2 v2 = vec2(1.0, 2.0);
vec3 v3 = vec3(1.0, 2.0, 3.0);
vec4 v4 = vec4(1.0, 2.0, 3.0, 4.0);
// Integer vectors
ivec2 iv2 = ivec2(1, 2);
ivec3 iv3 = ivec3(1, 2, 3);
// Boolean vectors
bvec2 bv2 = bvec2(true, false);
vec4 color = vec4(1.0, 0.5, 0.2, 1.0);
vec3 rgb = color.rgb; // (1.0, 0.5, 0.2)
vec2 rg = color.rg; // (1.0, 0.5)
float r = color.r; // 1.0
// Reorder
vec3 bgr = color.bgr; // (0.2, 0.5, 1.0)
// Duplicate
vec3 rrr = color.rrr; // (1.0, 1.0, 1.0)
// Position aliases (xyzw = rgba = stpq)
vec3 pos = v4.xyz;
vec2 uv = v4.st;
mat2 m2; // 2x2
mat3 m3; // 3x3
mat4 m4; // 4x4
// Access columns
vec4 col0 = m4[0];
// Access element
float val = m4[1][2]; // column 1, row 2
uniform sampler2D uTexture; // 2D texture
uniform samplerCube uCubemap; // Cube map
// Sample texture
vec4 texColor = texture2D(uTexture, vUv);
vec4 cubeColor = textureCube(uCubemap, direction);
// Set from JavaScript, same for all vertices/fragments
uniform float uTime;
uniform vec3 uColor;
uniform mat4 uModelMatrix;
uniform sampler2D uTexture;
// Only in vertex shader
attribute vec3 position; // Built-in: vertex position
attribute vec3 normal; // Built-in: vertex normal
attribute vec2 uv; // Built-in: texture coordinates
attribute vec3 color; // Built-in: vertex color
// Custom attributes
attribute float aScale;
attribute vec3 aOffset;
// Vertex shader: write
varying vec2 vUv;
varying vec3 vNormal;
void main() {
vUv = uv;
vNormal = normal;
}
// Fragment shader: read (interpolated across triangle)
varying vec2 vUv;
varying vec3 vNormal;
void main() {
// vUv is interpolated between triangle vertices
}
// Output (must write)
vec4 gl_Position; // Clip-space position
// Output (optional)
float gl_PointSize; // Point sprite size (for gl.POINTS)
// Input
vec4 gl_FragCoord; // Window-space position (pixel coordinates)
bool gl_FrontFacing; // True if front face
vec2 gl_PointCoord; // Point sprite coordinates [0,1]
// Output
vec4 gl_FragColor; // Final pixel color
Local/Object Space
↓ modelMatrix
World Space
↓ viewMatrix
View/Eye/Camera Space
↓ projectionMatrix
Clip Space (-1 to 1)
↓ perspective divide
NDC (Normalized Device Coordinates)
↓ viewport transform
Screen Space (pixels)
uniform mat4 modelMatrix; // Local → World
uniform mat4 viewMatrix; // World → View
uniform mat4 projectionMatrix; // View → Clip
uniform mat4 modelViewMatrix; // Local → View (modelMatrix * viewMatrix)
uniform mat3 normalMatrix; // For transforming normals
uniform vec3 cameraPosition; // Camera world position
void main() {
// Full transform chain
vec4 worldPosition = modelMatrix * vec4(position, 1.0);
vec4 viewPosition = viewMatrix * worldPosition;
vec4 clipPosition = projectionMatrix * viewPosition;
gl_Position = clipPosition;
// Or combined (more efficient)
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// Trigonometry
sin(x), cos(x), tan(x)
asin(x), acos(x), atan(x)
atan(y, x) // atan2
// Exponential
pow(x, y) // x^y
exp(x) // e^x
log(x) // ln(x)
sqrt(x) // √x
inversesqrt(x) // 1/√x
// Common
abs(x)
sign(x) // -1, 0, or 1
floor(x)
ceil(x)
fract(x) // x - floor(x)
mod(x, y) // x % y (floating point)
min(x, y)
max(x, y)
clamp(x, min, max)
mix(a, b, t) // Linear interpolation: a*(1-t) + b*t
step(edge, x) // 0 if x < edge, else 1
smoothstep(e0, e1, x) // Smooth Hermite interpolation
length(v) // Vector magnitude
distance(a, b) // length(a - b)
dot(a, b) // Dot product
cross(a, b) // Cross product (vec3 only)
normalize(v) // Unit vector
reflect(I, N) // Reflection vector
refract(I, N, eta) // Refraction vector
faceforward(N, I, Nref) // Flip normal if needed
// vUv ranges from (0,0) at bottom-left to (1,1) at top-right
varying vec2 vUv;
void main() {
// Center UVs: -0.5 to 0.5
vec2 centered = vUv - 0.5;
// Aspect-corrected (assuming you pass uResolution)
vec2 uv = vUv;
uv.x *= uResolution.x / uResolution.y;
// Tiling
vec2 tiled = fract(vUv * 4.0); // 4x4 tiles
// Polar coordinates
float angle = atan(centered.y, centered.x);
float radius = length(centered);
}
// Grayscale (perceptual weights)
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
// Contrast
color = (color - 0.5) * contrast + 0.5;
// Brightness
color += brightness;
// Saturation
float gray = dot(color, vec3(0.299, 0.587, 0.114));
color = mix(vec3(gray), color, saturation);
// Gamma correction
color = pow(color, vec3(1.0 / 2.2)); // Linear to sRGB
color = pow(color, vec3(2.2)); // sRGB to linear
// Hard edge
float mask = step(0.5, value);
// Soft edge
float mask = smoothstep(0.4, 0.6, value);
// Anti-aliased edge (screen-space)
float mask = smoothstep(-fwidth(value), fwidth(value), value);
// Show UVs as color
gl_FragColor = vec4(vUv, 0.0, 1.0);
// Show normals
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);
// Show depth
float depth = gl_FragCoord.z;
gl_FragColor = vec4(vec3(depth), 1.0);
// Show value range (red=negative, green=positive)
gl_FragColor = vec4(max(0.0, value), max(0.0, -value), 0.0, 1.0);
| Issue | Likely Cause |
|---|---|
| Black screen | gl_Position not set, or NaN values |
| Uniform not updating | Wrong name or type mismatch |
| Texture black | Texture not loaded, wrong UV |
| Flickering | Z-fighting, precision issues |
| Faceted look | Normals not interpolated |
// Declare precision (required in fragment shader for WebGL 1)
precision highp float;
precision mediump float;
precision lowp float;
| Precision | Range | Use Case |
|---|---|---|
| highp | ~10^38 | Positions, matrices |
| mediump | ~10^14 | UVs, colors |
| lowp | ~2 | Simple flags |
shader-fundamentals/
├── SKILL.md
├── references/
│ ├── glsl-types.md # Complete type reference
│ ├── builtin-functions.md # All built-in functions
│ └── coordinate-spaces.md # Transform pipeline
└── scripts/
└── templates/
├── basic.glsl # Starter template
└── fullscreen.glsl # Fullscreen quad shader
references/glsl-types.md — Complete data type referencereferences/builtin-functions.md — All GLSL built-in functionsreferences/coordinate-spaces.md — Transform pipeline deep-diveWeekly Installs
71
Repository
GitHub Stars
7
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode59
codex58
claude-code56
gemini-cli55
cursor55
github-copilot49
Shader Craft:36种GLSL着色器技术,实时视觉效果开发指南
555 周安装