threejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
How to use
Zainstaluj skill threejs-shaders w swoim projekcie Three.js. Upewnij się, że masz zainstalowaną bibliotekę Three.js.
Utwórz nowy ShaderMaterial, definiując uniforms (zmienne przekazywane do shaderów), vertexShader (kod GLSL dla wierzchołków) i fragmentShader (kod GLSL dla pikseli). Skorzystaj z wbudowanych uniformów Three.js takich jak projectionMatrix, modelViewMatrix czy cameraPosition.
Napisz vertex shader — kod GLSL, który przetwarza każdy wierzchołek geometrii. Minimum to transformacja pozycji wierzchołka za pomocą macierzy projekcji i widoku.
Napisz fragment shader — kod GLSL, który określa kolor każdego piksela. Możesz odwoływać się do uniformów (np. koloru, czasu) i interpolowanych wartości z vertex shadera.
Jeśli potrzebujesz pełnej kontroli nad uniformami i atrybutami, użyj RawShaderMaterial zamiast ShaderMaterial — sam zdefiniujesz wszystkie macierze transformacji i atrybuty wierzchołków.
W pętli animacji aktualizuj uniforms — na przykład zmienną time, aby uzyskać animowane efekty. Przypisz material do geometrii i renderuj scenę.