{"id":"e368998e-82d4-4436-8c50-5dc8edc7b541","shortId":"zNvYHL","kind":"skill","title":"threejs-shaders","tagline":"Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.","description":"# Three.js Shaders\n\n## When to Use\n- You need custom shader logic in Three.js.\n- The task involves `ShaderMaterial`, uniforms, GLSL, vertex deformation, or fragment-based effects.\n- You are extending material behavior beyond what built-in materials provide.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    time: { value: 0 },\n    color: { value: new THREE.Color(0xff0000) },\n  },\n  vertexShader: `\n    void main() {\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    uniform vec3 color;\n\n    void main() {\n      gl_FragColor = vec4(color, 1.0);\n    }\n  `,\n});\n\n// Update in animation loop\nmaterial.uniforms.time.value = clock.getElapsedTime();\n```\n\n## ShaderMaterial vs RawShaderMaterial\n\n### ShaderMaterial\n\nThree.js provides built-in uniforms and attributes.\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  vertexShader: `\n    // Built-in uniforms available:\n    // uniform mat4 modelMatrix;\n    // uniform mat4 modelViewMatrix;\n    // uniform mat4 projectionMatrix;\n    // uniform mat4 viewMatrix;\n    // uniform mat3 normalMatrix;\n    // uniform vec3 cameraPosition;\n\n    // Built-in attributes available:\n    // attribute vec3 position;\n    // attribute vec3 normal;\n    // attribute vec2 uv;\n\n    void main() {\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    void main() {\n      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n    }\n  `,\n});\n```\n\n### RawShaderMaterial\n\nFull control - you define everything.\n\n```javascript\nconst material = new THREE.RawShaderMaterial({\n  uniforms: {\n    projectionMatrix: { value: camera.projectionMatrix },\n    modelViewMatrix: { value: new THREE.Matrix4() },\n  },\n  vertexShader: `\n    precision highp float;\n\n    attribute vec3 position;\n    uniform mat4 projectionMatrix;\n    uniform mat4 modelViewMatrix;\n\n    void main() {\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    precision highp float;\n\n    void main() {\n      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n    }\n  `,\n});\n```\n\n## Uniforms\n\n### Uniform Types\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    // Numbers\n    floatValue: { value: 1.5 },\n    intValue: { value: 1 },\n\n    // Vectors\n    vec2Value: { value: new THREE.Vector2(1, 2) },\n    vec3Value: { value: new THREE.Vector3(1, 2, 3) },\n    vec4Value: { value: new THREE.Vector4(1, 2, 3, 4) },\n\n    // Colors (converted to vec3)\n    colorValue: { value: new THREE.Color(0xff0000) },\n\n    // Matrices\n    mat3Value: { value: new THREE.Matrix3() },\n    mat4Value: { value: new THREE.Matrix4() },\n\n    // Textures\n    textureValue: { value: texture },\n    cubeTextureValue: { value: cubeTexture },\n\n    // Arrays\n    floatArray: { value: [1.0, 2.0, 3.0] },\n    vec3Array: {\n      value: [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0)],\n    },\n  },\n});\n```\n\n### GLSL Declarations\n\n```glsl\n// In shader\nuniform float floatValue;\nuniform int intValue;\nuniform vec2 vec2Value;\nuniform vec3 vec3Value;\nuniform vec3 colorValue;    // Color becomes vec3\nuniform vec4 vec4Value;\nuniform mat3 mat3Value;\nuniform mat4 mat4Value;\nuniform sampler2D textureValue;\nuniform samplerCube cubeTextureValue;\nuniform float floatArray[3];\nuniform vec3 vec3Array[2];\n```\n\n### Updating Uniforms\n\n```javascript\n// Direct assignment\nmaterial.uniforms.time.value = clock.getElapsedTime();\n\n// Vector/Color updates\nmaterial.uniforms.position.value.set(x, y, z);\nmaterial.uniforms.color.value.setHSL(hue, 1, 0.5);\n\n// Matrix updates\nmaterial.uniforms.matrix.value.copy(mesh.matrixWorld);\n```\n\n## Varyings\n\nPass data from vertex to fragment shader.\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  vertexShader: `\n    varying vec2 vUv;\n    varying vec3 vNormal;\n    varying vec3 vPosition;\n\n    void main() {\n      vUv = uv;\n      vNormal = normalize(normalMatrix * normal);\n      vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;\n\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    varying vec2 vUv;\n    varying vec3 vNormal;\n    varying vec3 vPosition;\n\n    void main() {\n      // Use interpolated values\n      gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);\n    }\n  `,\n});\n```\n\n## Common Shader Patterns\n\n### Texture Sampling\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    map: { value: texture },\n  },\n  vertexShader: `\n    varying vec2 vUv;\n\n    void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    uniform sampler2D map;\n    varying vec2 vUv;\n\n    void main() {\n      vec4 texColor = texture2D(map, vUv);\n      gl_FragColor = texColor;\n    }\n  `,\n});\n```\n\n### Vertex Displacement\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    time: { value: 0 },\n    amplitude: { value: 0.5 },\n  },\n  vertexShader: `\n    uniform float time;\n    uniform float amplitude;\n\n    void main() {\n      vec3 pos = position;\n\n      // Wave displacement\n      pos.z += sin(pos.x * 5.0 + time) * amplitude;\n      pos.z += sin(pos.y * 5.0 + time) * amplitude;\n\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n    }\n  `,\n  fragmentShader: `\n    void main() {\n      gl_FragColor = vec4(0.5, 0.8, 1.0, 1.0);\n    }\n  `,\n});\n```\n\n### Fresnel Effect\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  vertexShader: `\n    varying vec3 vNormal;\n    varying vec3 vWorldPosition;\n\n    void main() {\n      vNormal = normalize(normalMatrix * normal);\n      vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    varying vec3 vNormal;\n    varying vec3 vWorldPosition;\n\n    void main() {\n      // cameraPosition is auto-provided by ShaderMaterial\n      vec3 viewDirection = normalize(cameraPosition - vWorldPosition);\n      float fresnel = pow(1.0 - dot(viewDirection, vNormal), 3.0);\n\n      vec3 baseColor = vec3(0.0, 0.0, 0.5);\n      vec3 fresnelColor = vec3(0.5, 0.8, 1.0);\n\n      gl_FragColor = vec4(mix(baseColor, fresnelColor, fresnel), 1.0);\n    }\n  `,\n});\n```\n\n### Noise-Based Effects\n\n```glsl\n// Simple noise function\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\n// Value noise\nfloat noise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\n// Usage\nfloat n = noise(vUv * 10.0 + time);\n```\n\n### Gradient\n\n```glsl\n// Linear gradient\nvec3 color = mix(colorA, colorB, vUv.y);\n\n// Radial gradient\nfloat dist = distance(vUv, vec2(0.5));\nvec3 color = mix(centerColor, edgeColor, dist * 2.0);\n\n// Smooth gradient with custom curve\nfloat t = smoothstep(0.0, 1.0, vUv.y);\nvec3 color = mix(colorA, colorB, t);\n```\n\n### Rim Lighting\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  vertexShader: `\n    varying vec3 vNormal;\n    varying vec3 vViewPosition;\n\n    void main() {\n      vNormal = normalize(normalMatrix * normal);\n      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n      vViewPosition = mvPosition.xyz;\n      gl_Position = projectionMatrix * mvPosition;\n    }\n  `,\n  fragmentShader: `\n    varying vec3 vNormal;\n    varying vec3 vViewPosition;\n\n    void main() {\n      vec3 viewDir = normalize(-vViewPosition);\n      float rim = 1.0 - max(0.0, dot(viewDir, vNormal));\n      rim = pow(rim, 4.0);\n\n      vec3 baseColor = vec3(0.2, 0.2, 0.8);\n      vec3 rimColor = vec3(1.0, 0.5, 0.0);\n\n      gl_FragColor = vec4(baseColor + rimColor * rim, 1.0);\n    }\n  `,\n});\n```\n\n### Dissolve Effect\n\n```glsl\nuniform float progress;\nuniform sampler2D noiseMap;\n\nvoid main() {\n  float noise = texture2D(noiseMap, vUv).r;\n\n  if (noise < progress) {\n    discard;\n  }\n\n  // Edge glow\n  float edge = smoothstep(progress, progress + 0.1, noise);\n  vec3 edgeColor = vec3(1.0, 0.5, 0.0);\n  vec3 baseColor = vec3(0.5);\n\n  gl_FragColor = vec4(mix(edgeColor, baseColor, edge), 1.0);\n}\n```\n\n## Extending Built-in Materials\n\n### onBeforeCompile\n\nModify existing material shaders.\n\n```javascript\nconst material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });\n\nmaterial.onBeforeCompile = (shader) => {\n  // Add custom uniform\n  shader.uniforms.time = { value: 0 };\n\n  // Store reference for updates\n  material.userData.shader = shader;\n\n  // Modify vertex shader\n  shader.vertexShader = shader.vertexShader.replace(\n    \"#include <begin_vertex>\",\n    `\n    #include <begin_vertex>\n    transformed.y += sin(position.x * 10.0 + time) * 0.1;\n    `,\n  );\n\n  // Add uniform declaration\n  shader.vertexShader = \"uniform float time;\\n\" + shader.vertexShader;\n};\n\n// Update in animation loop\nif (material.userData.shader) {\n  material.userData.shader.uniforms.time.value = clock.getElapsedTime();\n}\n```\n\n### Common Injection Points\n\n```javascript\n// Vertex shader chunks\n\"#include <begin_vertex>\"; // After position is calculated\n\"#include <project_vertex>\"; // After gl_Position\n\"#include <beginnormal_vertex>\"; // Normal calculation start\n\n// Fragment shader chunks\n\"#include <color_fragment>\"; // After diffuse color\n\"#include <output_fragment>\"; // Final output\n\"#include <fog_fragment>\"; // After fog applied\n```\n\n## GLSL Built-in Functions\n\n### Math Functions\n\n```glsl\n// Basic\nabs(x), sign(x), floor(x), ceil(x), fract(x)\nmod(x, y), min(x, y), max(x, y), clamp(x, min, max)\nmix(a, b, t), step(edge, x), smoothstep(edge0, edge1, x)\n\n// Trigonometry\nsin(x), cos(x), tan(x)\nasin(x), acos(x), atan(y, x), atan(x)\nradians(degrees), degrees(radians)\n\n// Exponential\npow(x, y), exp(x), log(x), exp2(x), log2(x)\nsqrt(x), inversesqrt(x)\n```\n\n### Vector Functions\n\n```glsl\n// Length and distance\nlength(v), distance(p0, p1), dot(x, y), cross(x, y)\n\n// Normalization\nnormalize(v)\n\n// Reflection and refraction\nreflect(I, N), refract(I, N, eta)\n\n// Component-wise\nlessThan(x, y), lessThanEqual(x, y)\ngreaterThan(x, y), greaterThanEqual(x, y)\nequal(x, y), notEqual(x, y)\nany(bvec), all(bvec)\n```\n\n### Texture Functions\n\n```glsl\n// GLSL 1.0 (default) - use texture2D/textureCube\ntexture2D(sampler, coord)\ntexture2D(sampler, coord, bias)\ntextureCube(sampler, coord)\n\n// GLSL 3.0 (glslVersion: THREE.GLSL3) - use texture()\n// texture(sampler, coord) replaces texture2D/textureCube\n// Also use: out vec4 fragColor instead of gl_FragColor\n\n// Texture size (GLSL 1.30+)\ntextureSize(sampler, lod)\n```\n\n## Common Material Properties\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    /* ... */\n  },\n  vertexShader: \"/* ... */\",\n  fragmentShader: \"/* ... */\",\n\n  // Rendering\n  transparent: true,\n  opacity: 1.0,\n  side: THREE.DoubleSide,\n  depthTest: true,\n  depthWrite: true,\n\n  // Blending\n  blending: THREE.NormalBlending,\n  // AdditiveBlending, SubtractiveBlending, MultiplyBlending\n\n  // Wireframe\n  wireframe: false,\n  wireframeLinewidth: 1, // Note: >1 has no effect on most platforms (WebGL limitation)\n\n  // Extensions\n  extensions: {\n    derivatives: true, // For fwidth, dFdx, dFdy\n    fragDepth: true, // gl_FragDepth\n    drawBuffers: true, // Multiple render targets\n    shaderTextureLOD: true, // texture2DLod\n  },\n\n  // GLSL version\n  glslVersion: THREE.GLSL3, // For WebGL2 features\n});\n```\n\n## Shader Includes\n\n### Using Three.js Shader Chunks\n\n```javascript\nimport { ShaderChunk } from \"three\";\n\nconst fragmentShader = `\n  ${ShaderChunk.common}\n  ${ShaderChunk.packing}\n\n  uniform sampler2D depthTexture;\n  varying vec2 vUv;\n\n  void main() {\n    float depth = texture2D(depthTexture, vUv).r;\n    float linearDepth = perspectiveDepthToViewZ(depth, 0.1, 1000.0);\n    gl_FragColor = vec4(vec3(-linearDepth / 100.0), 1.0);\n  }\n`;\n```\n\n### External Shader Files\n\n```javascript\n// With vite/webpack\nimport vertexShader from \"./shaders/vertex.glsl\";\nimport fragmentShader from \"./shaders/fragment.glsl\";\n\nconst material = new THREE.ShaderMaterial({\n  vertexShader,\n  fragmentShader,\n});\n```\n\n## Instanced Shaders\n\n```javascript\n// Instanced attribute\nconst offsets = new Float32Array(instanceCount * 3);\n// Fill offsets...\ngeometry.setAttribute(\"offset\", new THREE.InstancedBufferAttribute(offsets, 3));\n\nconst material = new THREE.ShaderMaterial({\n  vertexShader: `\n    attribute vec3 offset;\n\n    void main() {\n      vec3 pos = position + offset;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n    }\n  `,\n  fragmentShader: `\n    void main() {\n      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n    }\n  `,\n});\n```\n\n## Debugging Shaders\n\n```javascript\n// Check for compile errors\nmaterial.onBeforeCompile = (shader) => {\n  console.log(\"Vertex Shader:\", shader.vertexShader);\n  console.log(\"Fragment Shader:\", shader.fragmentShader);\n};\n\n// Visual debugging\nfragmentShader: `\n  void main() {\n    // Debug UV\n    gl_FragColor = vec4(vUv, 0.0, 1.0);\n\n    // Debug normals\n    gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);\n\n    // Debug position\n    gl_FragColor = vec4(vPosition * 0.1 + 0.5, 1.0);\n  }\n`;\n\n// Check WebGL errors\nrenderer.debug.checkShaderErrors = true;\n```\n\n## Performance Tips\n\n1. **Minimize uniforms**: Group related values into vectors\n2. **Avoid conditionals**: Use mix/step instead of if/else\n3. **Precalculate**: Move calculations to JS when possible\n4. **Use textures**: For complex functions, use lookup tables\n5. **Limit overdraw**: Avoid transparent objects when possible\n\n```glsl\n// Instead of:\nif (value > 0.5) {\n  color = colorA;\n} else {\n  color = colorB;\n}\n\n// Use:\ncolor = mix(colorB, colorA, step(0.5, value));\n```\n\n## TSL (Three.js Shading Language) - Future Direction\n\nTSL is the new shader authoring system for Three.js, designed to work with both WebGL and WebGPU renderers. GLSL patterns above are **WebGL-only** and will not work with the WebGPU renderer.\n\n### TSL Quick Start\n\n```javascript\nimport { MeshStandardNodeMaterial } from \"three/addons/nodes/Nodes.js\";\nimport {\n  uv, sin, timerLocal, vec4, color, positionLocal, normalLocal,\n  float, mul, add\n} from \"three/addons/nodes/Nodes.js\";\n\nconst material = new MeshStandardNodeMaterial();\n\n// Animated color based on UV and time\nconst time = timerLocal();\nmaterial.colorNode = color(sin(add(uv().x, time)), uv().y, 0.5);\n\n// Vertex displacement\nmaterial.positionNode = add(\n  positionLocal,\n  mul(normalLocal, sin(add(positionLocal.x, time)).mul(0.1))\n);\n```\n\n### Key Differences from GLSL\n\n| GLSL (WebGL only)       | TSL (WebGL + WebGPU)         |\n| ----------------------- | ---------------------------- |\n| `ShaderMaterial`        | `MeshStandardNodeMaterial`   |\n| String-based shaders    | JavaScript node graph        |\n| `onBeforeCompile`       | Node composition             |\n| Manual uniforms         | `uniform()` node             |\n| `texture2D()`           | `texture()` node             |\n| `gl_Position`           | `positionNode`               |\n| `gl_FragColor`          | `colorNode` / `outputNode`   |\n\n### When to Use What\n\n- **GLSL ShaderMaterial**: Existing WebGL projects, maximum shader control, porting existing shaders\n- **TSL NodeMaterial**: New projects, WebGPU support needed, cross-renderer compatibility\n\n## See Also\n\n- `threejs-materials` - Built-in material types\n- `threejs-postprocessing` - Full-screen shader effects\n- `threejs-textures` - Texture sampling in shaders\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","shaders","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-shaders","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-shaders","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (15,963 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.801Z","embedding":null,"createdAt":"2026-04-18T21:46:22.252Z","updatedAt":"2026-04-22T06:52:01.801Z","lastSeenAt":"2026-04-22T06:52:01.801Z","tsv":"'/shaders/fragment.glsl':1293 '/shaders/vertex.glsl':1289 '0':80,315,316,319,321,511,918 '0.0':184,185,238,239,623,624,685,691,761,819,838,881,1347,1348,1378 '0.1':874,937,1271,1395,1561 '0.2':830,831 '0.5':384,452,453,514,554,625,629,745,837,880,885,1386,1387,1396,1451,1463,1548 '0.8':555,630,832 '0x00ff00':910 '0xff0000':85,287 '1':256,262,268,275,314,320,383,1200,1202,1405 '1.0':95,106,176,183,186,227,237,240,307,424,432,454,483,547,556,557,582,590,615,631,639,684,692,698,699,715,762,795,817,836,845,879,893,1127,1183,1279,1339,1346,1349,1379,1388,1397 '1.30':1164 '1.5':253 '10.0':726,935 '100.0':1278 '1000.0':1272 '12.9898':658 '2':263,269,276,367,1413 '2.0':308,705,752 '3':270,277,363,1310,1318,1421 '3.0':309,619,704,1142 '4':278,1429 '4.0':826 '43758.5453':660 '5':1438 '5.0':532,538 '78.233':659 'ab':998 'aco':1041 'add':913,938,1522,1542,1552,1557 'additiveblend':1193 'also':1152,1625 'amplitud':512,521,534,540 'anim':109,949,1529 'appli':988 'array':304 'asin':1039 'ask':1682 'assign':372 'atan':1043,1046 'attribut':124,157,159,162,165,210,1304,1324 'author':1476 'auto':603 'auto-provid':602 'avail':135,158 'avoid':1414,1441 'b':680,710,718,1023 'base':51,642,1531,1576 'basecolor':621,636,828,842,883,891 'basic':997 'becom':343 'behavior':57 'beyond':58 'bias':1137 'blend':1190,1191 'boundari':1690 'built':25,61,120,132,155,896,991,1630 'built-in':24,60,119,131,154,895,990,1629 'bvec':1120,1122 'c':687,712 'calcul':966,973,1424 'camera.projectionmatrix':201 'cameraposit':153,600,610 'ceil':1004 'centercolor':749 'check':1353,1398 'chunk':961,977,1243 'clamp':1017 'clarif':1684 'clear':1657 'clock.getelapsedtime':112,374,954 'color':81,99,105,279,342,733,747,765,909,981,1452,1455,1458,1517,1530,1540 'colora':735,767,1453,1461 'colorb':736,768,1456,1460 'colornod':1596 'colorvalu':283,341 'common':455,955,1168 'compat':1623 'compil':1355 'complex':1433 'compon':1099 'component-wis':1098 'composit':1583 'condit':1415 'console.log':1359,1363 'const':73,126,194,245,398,461,504,561,773,905,1172,1249,1294,1305,1319,1525,1536 'control':189,1609 'convert':280 'coord':1133,1136,1140,1149 'cos':1035 'creat':13 'criteria':1693 'cross':1082,1621 'cross-render':1620 'cubetextur':303 'cubetexturevalu':301,359 'curv':757 'custom':9,14,35,756,914 'd':694,717 'data':391 'debug':1350,1368,1372,1380,1389 'declar':323,940 'default':1128 'defin':191 'deform':47 'degre':1049,1050 'depth':1262,1270 'depthtest':1186 'depthtextur':1255,1264 'depthwrit':1188 'deriv':1213 'describ':1661 'design':1480 'dfdi':1218 'dfdx':1217 'differ':1563 'diffus':980 'direct':371,1470 'discard':866 'displac':502,528,1550 'dissolv':846 'dist':741,751 'distanc':742,1073,1076 'dot':616,655,820,1079 'drawbuff':1223 'edg':867,870,892,1026 'edge0':1029 'edge1':1030 'edgecolor':750,877,890 'effect':10,16,52,559,643,847,1205,1641 'els':1454 'environ':1673 'environment-specif':1672 'equal':1113 'error':1356,1400 'eta':1097 'everyth':192 'exist':901,1604,1611 'exp':1056 'exp2':1060 'expert':1678 'exponenti':1052 'extend':23,55,894 'extens':1211,1212 'extern':1280 'f':672,702,703,706 'fals':1198 'featur':1237 'file':1282 'fill':1311 'final':983 'float':209,231,328,361,517,520,612,648,663,675,679,686,693,722,740,758,815,850,857,869,943,1261,1267,1520 'float32array':1308 'floatarray':305,362 'floatvalu':251,329 'floor':669,1002 'fog':987 'fract':653,673,1006 'fragcolor':103,181,235,449,499,552,633,840,887,1156,1160,1274,1344,1375,1383,1392,1595 'fragdepth':1219,1222 'fragment':20,50,395,975,1364 'fragment-bas':49 'fragmentshad':96,177,228,433,484,548,591,802,1178,1250,1291,1299,1340,1369 'fresnel':558,613,638 'fresnelcolor':627,637 'full':188,1638 'full-screen':1637 'function':647,993,995,1069,1124,1434 'futur':1469 'fwidth':1216 'geometry.setattribute':1313 'gl':89,102,170,180,221,234,426,448,477,498,541,551,584,632,798,839,886,969,1159,1221,1273,1333,1343,1374,1382,1391,1591,1594 'glow':868 'glsl':6,45,322,324,644,729,848,989,996,1070,1125,1126,1141,1163,1231,1446,1489,1565,1566,1602 'glslversion':1143,1233 'gradient':728,731,739,754 'graph':1580 'greaterthan':1107 'greaterthanequ':1110 'group':1408 'highp':208,230 'hue':382 'if/else':1420 'import':68,1245,1286,1290,1508,1512 'includ':930,931,962,967,971,978,982,985,1239 'inject':956 'input':1687 'instanc':1300,1303 'instancecount':1309 'instead':1157,1418,1447 'int':331 'interpol':446 'intvalu':254,332 'inversesqrt':1066 'involv':42 'javascript':67,125,193,244,370,397,460,503,560,772,904,958,1171,1244,1283,1302,1352,1507,1578 'js':1426 'key':1562 'languag':1468 'length':1071,1074 'lessthan':1101 'lessthanequ':1104 'light':771 'limit':1210,1439,1649 'linear':730 'lineardepth':1268,1277 'lod':1167 'log':1058 'log2':1062 'logic':37 'lookup':1436 'loop':110,950 'main':88,101,169,179,220,233,413,444,474,492,523,550,573,599,785,810,856,1260,1328,1342,1371 'manual':1584 'map':466,487,496 'mat3':149,349 'mat3value':289,350 'mat4':137,140,143,146,214,217,352 'mat4value':293,353 'match':1658 'materi':27,56,63,74,127,195,246,399,462,505,562,774,898,902,906,1169,1173,1295,1320,1526,1628,1632 'material.colornode':1539 'material.onbeforecompile':911,1357 'material.positionnode':1551 'material.uniforms.color.value.sethsl':381 'material.uniforms.matrix.value.copy':387 'material.uniforms.position.value.set':377 'material.uniforms.time.value':111,373 'material.userdata.shader':923,952 'material.userdata.shader.uniforms.time.value':953 'math':994 'matric':288 'matrix':385 'max':818,1014,1020 'maximum':1607 'mesh.matrixworld':388 'meshstandardnodemateri':1509,1528,1573 'min':1011,1019 'minim':1406 'miss':1695 'mix':635,708,734,748,766,889,1021,1459 'mix/step':1417 'mod':1008 'modelmatrix':138,579 'modelviewmatrix':92,141,173,202,218,224,421,429,480,544,587,792,1336 'modifi':17,900,925 'move':1423 'mul':1521,1554,1560 'multipl':1225 'multiplyblend':1195 'mvposit':791,801 'mvposition.xyz':797 'n':723,945,1093,1096 'need':34,1619 'new':75,83,128,196,204,247,260,266,273,285,291,295,312,317,400,463,506,563,775,907,1174,1296,1307,1315,1321,1474,1527,1615 'node':1579,1582,1587,1590 'nodemateri':1614 'nois':641,646,662,664,724,858,864,875 'noise-bas':640 'noisemap':854,860 'normal':164,417,419,575,577,609,787,789,813,972,1085,1086,1381 'normalloc':1519,1555 'normalmatrix':150,418,576,788 'note':1201 'notequ':1116 'number':250 'object':1443 'offset':1306,1312,1314,1317,1326,1332 'onbeforecompil':899,1581 'opac':1182 'output':984,1667 'outputnod':1597 'overdraw':1440 'p0':1077 'p1':1078 'pass':390 'pattern':457,1490 'perform':1403 'permiss':1688 'perspectivedepthtoviewz':1269 'platform':1208 'point':957 'port':1610 'pos':525,546,1330,1338 'pos.x':531 'pos.y':537 'pos.z':529,535 'posit':90,94,161,171,175,212,222,226,423,427,431,478,482,526,542,581,585,589,794,799,964,970,1331,1334,1390,1592 'position.x':934 'positionloc':1518,1553 'positionlocal.x':1558 'positionnod':1593 'possibl':1428,1445 'postprocess':1636 'pow':614,824,1053 'precalcul':1422 'precis':207,229 'progress':851,865,872,873 'project':1606,1616 'projectionmatrix':91,144,172,199,215,223,428,479,543,586,800,1335 'properti':1170 'provid':64,118,604 'quick':65,1505 'r':862,1266 'radial':738 'radian':1048,1051 'random':649,677,681,688,695 'rawshadermateri':115,187 'refer':920 'reflect':1088,1091 'refract':1090,1094 'relat':1409 'render':1179,1226,1488,1503,1622 'renderer.debug.checkshadererrors':1401 'replac':1150 'requir':1686 'return':652,707 'review':1679 'rim':770,816,823,825,844 'rimcolor':834,843 'safeti':1689 'sampl':459,1646 'sampler':1132,1135,1139,1148,1166 'sampler2d':355,486,853,1254 'samplercub':358 'scope':1660 'screen':1639 'see':1624 'shade':1467 'shader':3,5,21,29,36,326,396,456,903,912,924,927,960,976,1238,1242,1281,1301,1351,1358,1361,1365,1475,1577,1608,1612,1640,1648 'shader.fragmentshader':1366 'shader.uniforms.time':916 'shader.vertexshader':928,941,946,1362 'shader.vertexshader.replace':929 'shaderchunk':1246 'shaderchunk.common':1251 'shaderchunk.packing':1252 'shadermateri':7,43,113,116,606,1572,1603 'shadertexturelod':1228 'side':1184 'sign':1000 'simpl':645 'sin':530,536,654,933,1033,1514,1541,1556 'size':1162 'skill':1652 'skill-threejs-shaders' 'smooth':753 'smoothstep':760,871,1028 'source-sickn33' 'specif':1674 'sqrt':1064 'st':651,666,670,674 'st.xy':656 'start':66,974,1506 'step':1025,1462 'stop':1680 'store':919 'string':1575 'string-bas':1574 'substitut':1670 'subtractiveblend':1194 'success':1692 'support':1618 'system':1477 'tabl':1437 'tan':1037 'target':1227 'task':41,1656 'test':1676 'texcolor':494,500 'textur':297,300,458,468,1123,1146,1147,1161,1431,1589,1644,1645 'texture2d':495,859,1131,1134,1263,1588 'texture2d/texturecube':1130,1151 'texture2dlod':1230 'texturecub':1138 'textures':1165 'texturevalu':298,356 'three':70,72,1248 'three.color':84,286 'three.doubleside':1185 'three.glsl3':1144,1234 'three.instancedbufferattribute':1316 'three.js':4,28,39,117,1241,1466,1479 'three.matrix3':292 'three.matrix4':205,296 'three.meshstandardmaterial':908 'three.normalblending':1192 'three.rawshadermaterial':197 'three.shadermaterial':76,129,248,401,464,507,564,776,1175,1297,1322 'three.vector2':261 'three.vector3':267,313,318 'three.vector4':274 'three/addons/nodes/nodes.js':1511,1524 'threej':2,1627,1635,1643 'threejs-materi':1626 'threejs-postprocess':1634 'threejs-shad':1 'threejs-textur':1642 'time':78,509,518,533,539,727,936,944,1535,1537,1545,1559 'timerloc':1515,1538 'tip':1404 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transformed.y':932 'transpar':1180,1442 'treat':1665 'trigonometri':1032 'true':1181,1187,1189,1214,1220,1224,1229,1402 'tsl':1465,1471,1504,1569,1613 'type':243,1633 'u':701 'u.x':711,716,719 'u.y':714,720 'uniform':8,44,77,97,122,134,136,139,142,145,148,151,198,213,216,241,242,249,327,330,333,336,339,345,348,351,354,357,360,364,369,465,485,508,516,519,849,852,915,939,942,1176,1253,1407,1585,1586 'updat':107,368,376,386,922,947 'usag':721 'use':11,32,445,1129,1145,1153,1240,1416,1430,1435,1457,1600,1650 'uv':167,415,476,1373,1513,1533,1543,1546 'v':1075,1087 'valid':1675 'valu':79,82,200,203,252,255,259,265,272,284,290,294,299,302,306,311,447,467,510,513,661,917,1410,1450,1464 'vari':389,403,406,409,434,437,440,470,488,566,569,592,595,778,781,803,806,1256 'vec2':166,334,404,435,471,489,650,657,665,667,671,683,690,697,700,744,1257 'vec2value':258,335 'vec3':98,152,160,163,211,282,337,340,344,365,407,410,438,441,524,567,570,593,596,607,620,622,626,628,732,746,764,779,782,804,807,811,827,829,833,835,876,878,882,884,1276,1325,1329 'vec3array':310,366 'vec3value':264,338 'vec4':93,104,174,182,225,236,346,422,430,450,481,493,545,553,580,588,634,790,793,841,888,1155,1275,1337,1345,1376,1384,1393,1516 'vec4value':271,347 'vector':257,1068,1412 'vector/color':375 'version':1232 'vertex':46,393,501,926,959,1360,1549 'vertexshad':86,130,206,402,469,515,565,777,1177,1287,1298,1323 'vertic':18 'viewdir':812,821 'viewdirect':608,617 'viewmatrix':147 'visual':15,1367 'vite/webpack':1285 'vnormal':408,416,439,451,568,574,594,618,780,786,805,822,1385 'void':87,100,168,178,219,232,412,443,473,491,522,549,572,598,784,809,855,1259,1327,1341,1370 'vposit':411,420,442,1394 'vs':114 'vuv':405,414,436,472,475,490,497,725,743,861,1258,1265,1377 'vuv.y':737,763 'vviewposit':783,796,808,814 'vworldposit':571,578,597,611 'wave':527 'webgl':1209,1399,1485,1494,1567,1570,1605 'webgl-on':1493 'webgl2':1236 'webgpu':1487,1502,1571,1617 'wirefram':1196,1197 'wireframelinewidth':1199 'wise':1100 'work':1482,1499 'write':19 'x':378,999,1001,1003,1005,1007,1009,1012,1015,1018,1027,1031,1034,1036,1038,1040,1042,1045,1047,1054,1057,1059,1061,1063,1065,1067,1080,1083,1102,1105,1108,1111,1114,1117,1544 'xyz':425,583 'y':379,1010,1013,1016,1044,1055,1081,1084,1103,1106,1109,1112,1115,1118,1547 'z':380","prices":[{"id":"6245e0de-d1a2-4c83-9528-9272b06e44b0","listingId":"e368998e-82d4-4436-8c50-5dc8edc7b541","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:22.252Z"}],"sources":[{"listingId":"e368998e-82d4-4436-8c50-5dc8edc7b541","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-shaders","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-shaders","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:22.252Z","lastSeenAt":"2026-04-22T06:52:01.801Z"}],"details":{"listingId":"e368998e-82d4-4436-8c50-5dc8edc7b541","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-shaders","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"f97311689b279d7e13eb91c3abfecce38643aa6b","skill_md_path":"skills/threejs-shaders/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-shaders"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-shaders","description":"Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-shaders"},"updatedAt":"2026-04-22T06:52:01.801Z"}}