How to use the ShaderChunk function from three
Find comprehensive JavaScript three.ShaderChunk code examples handpicked from public code repositorys.
three.ShaderChunk is a collection of pre-written shader code that can be included in Three.js shaders to add various effects and functionality.
486 487 488 489 490 491 492 493 494 495 496'', ' gl_Position = finalPosition;', '', THREE.ShaderChunk.logdepthbuf_vertex, THREE.ShaderChunk.fog_vertex && ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );', THREE.ShaderChunk.fog_vertex, '}' ].join( '\r\n' ); THREE.ShaderChunk[ 'meshline_frag' ] = [
0
2
1+ 211 other calls in file
370 371 372 373 374 375 376 377 378 379} THREE.ShaderChunk['meshline_vert'] = [ '', THREE.ShaderChunk.logdepthbuf_pars_vertex, THREE.ShaderChunk.fog_pars_vertex, '', 'attribute vec3 previous;', 'attribute vec3 next;', 'attribute float side;',
011+ 10 other calls in file
How does three.ShaderChunk work?
three.ShaderChunk is a library of pre-written GLSL code that can be included in Three.js shaders to add various effects and functionality. These code snippets can be inserted into a Three.js shader using the #include directive, allowing developers to easily add commonly used shader code without having to write it themselves. The three.ShaderChunk library includes a wide variety of shader code snippets, ranging from simple calculations and color transforms to more complex effects like fog, shadows, and reflections. Each code snippet is contained within its own JavaScript module, with the file name indicating the purpose of the code (e.g. "lights_phong_vertex.glsl.js" for code related to Phong shading and lighting). To use three.ShaderChunk, a developer can simply import the necessary code snippets as needed and insert them into their shader using the #include directive. For example, the following code snippet shows how to use three.ShaderChunk to add Phong shading and lighting to a Three.js mesh: javascript Copy code {{{{{{{ import { ShaderChunk } from 'three'; const vertexShader = ` #include #include void main() { // ... } `; const fragmentShader = ` #include #include void main() { // ... } `; In this example, we import the ShaderChunk object from the three module and include the necessary Phong shading and lighting code snippets in the vertex and fragment shaders using the #include directive. Overall, three.ShaderChunk simplifies the process of writing and managing complex GLSL shader code in Three.js by providing a library of reusable code snippets that can be easily included in custom shaders.
Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25import * as THREE from "three"; import { ShaderChunk } from "three"; // Import the necessary code snippets for fog import fog_pars_fragment from "three/src/renderers/shaders/ShaderChunk/fog_pars_fragment.glsl.js"; import fog_fragment from "three/src/renderers/shaders/ShaderChunk/fog_fragment.glsl.js"; // Define the material and include the fog code snippets using #include const material = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5, metalness: 0.5, // Include the fog code snippets onBeforeCompile: (shader) => { shader.fragmentShader = ` ${shader.fragmentShader.replace("#include ", fog_pars_fragment)} ${shader.fragmentShader.replace("#include ", fog_fragment)} `; }, }); // Create a mesh with the material and add it to the scene const geometry = new THREE.BoxGeometry(); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
In this example, we first import ShaderChunk from Three.js, and then import the necessary fog code snippets from the three/src/renderers/shaders/ShaderChunk directory. We then create a MeshStandardMaterial and add the fog code snippets to the material's onBeforeCompile callback using the #include directive. Finally, we create a mesh with the material and add it to the scene.
three.Vector3 is the most popular function in three (22341 examples)