;
386 |
387 | // @ts-ignore
388 | const newObj = new self.constructor({
389 | baseMaterial: self.__csm.baseMaterial.clone(),
390 | vertexShader: self.__csm.vertexShader,
391 | fragmentShader: self.__csm.fragmentShader,
392 | uniforms: self.__csm.uniforms,
393 | patchMap: self.__csm.patchMap,
394 | cacheKey: self.__csm.cacheKey,
395 | });
396 |
397 | return newObj;
398 | }
399 | }
400 |
401 | export {
402 | type CSMPatchMap,
403 | type CSMProxy,
404 | type CustomShaderMaterialParameters,
405 | type MaterialConstructor,
406 | } from "./types";
407 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Custom Shader Material
2 | Extend Three.js standard materials with your own shaders!
3 |
4 |
5 |
6 |
7 | 
8 | 
9 | 
10 |
11 |
12 |
13 | These demos are real, you can click them! They contains full code, too.
14 | More demos here! 📦
15 |
16 |
17 |
18 |
19 |
20 |
21 | 
22 |
23 |
24 | 
25 |
26 |
27 |
28 | 
29 |
30 |
31 | 
32 |
33 |
34 |
35 | Custom Shader Material (CSM) lets you extend Three.js' material library with your own Vertex and Fragment shaders. **_It Supports both Vanilla and React!_**
36 |
37 |
38 | Show Vanilla example
39 |
40 | ```js
41 | import CustomShaderMaterial from "three-custom-shader-material/vanilla";
42 |
43 | function Box() {
44 | const geometry = new THREE.BoxGeometry();
45 | const material = new CustomShaderMaterial({
46 | baseMaterial: THREE.MeshPhysicalMaterial,
47 | vertexShader: /* glsl */ ` ... `, // Your vertex Shader
48 | fragmentShader: /* glsl */ ` ... `, // Your fragment Shader
49 | // Your Uniforms
50 | uniforms: {
51 | uTime: { value: 0 },
52 | ...
53 | },
54 | // Base material properties
55 | flatShading: true,
56 | color: 0xff00ff,
57 | ...
58 | });
59 |
60 | return new THREE.Mesh(geometry, material);
61 | }
62 | ```
63 |
64 |
65 |
66 |
67 | Show React example
68 |
69 | ```jsx
70 | import CustomShaderMaterial from 'three-custom-shader-material'
71 |
72 | function Cube() {
73 | const materialRef = useRef()
74 |
75 | useFrame((state) => {
76 | if (materialRef.current) {
77 | materialRef.current.uniforms.uTime.value = state.clock.elapsedTime
78 | }
79 | })
80 |
81 | return (
82 |
83 |
84 |
99 |
100 | )
101 | }
102 | ```
103 |
104 |
105 |
106 | Show Vue (Tresjs) example
107 |
108 | > Moved to [Cientos' Docs](https://cientos.tresjs.org/guide/materials/custom-shader-material.html#trescustomshadermaterial)
109 |
110 |
111 |
112 | ## Installation
113 |
114 | ```bash
115 | npm install three-custom-shader-material
116 | yarn add three-custom-shader-material
117 | ```
118 |
119 | ## Output Variables
120 |
121 | CSM provides the following output variables, all of them are optional but you MUST use these variables like you would use standard GLSL output variables to see results.
122 |
123 | | Variable | Type | Description | Available In | Notes |
124 | | --------------------------------- | ------- | ---------------------------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
125 | | Vertex Shader
| - | - | - | - |
126 | | csm_Position | `vec3` | Custom vertex position. | Vertex Shader | csm_Position will be projected furthur down the line. Thus, no projection is needed here. |
127 | | csm_PositionRaw | `vec4` | Direct equivalent of `gl_Position`. | Vertex Shader | |
128 | | csm_Normal | `vec3` | Custom vertex normals. | Vertex Shader |
129 | | csm_PointSize | `float` | Direct equivalent of `gl_PointSize`. | Vertex Shader | Only available in `PointsMaterial` |
130 | | Fragmet Shader
| - | - | - | - |
131 | | csm_DiffuseColor | `vec4` | Custom diffuse color. | Fragment Shader | Base material's shading will be applied to this color. |
132 | | csm_FragColor | `vec4` | Direct equivalent of `gl_FragColor`. | Fragment Shader | csm_FragColor will override any shading applied by a base material. To preserve shading and other effects like roughness and metalness, use `csm_DiffuseColor` |
133 | | csm_Roughness | `float` | Custom roughness. | Fragment Shader | Only available in materials with an `roughnessMap`. |
134 | | csm_Metalness | `float` | Custom metalness. | Fragment Shader | Only available in materials with an `metalnessMap`. |
135 | | csm_AO | `float` | Custom AO. | Fragment Shader | Only available in materials with an `aoMap`. |
136 | | csm_Clearcoat | `float` | Custom clearcoat factor. | Fragment Shader | Only available in materials with a `clearcoat`. |
137 | | csm_ClearcoatRoughness | `float` | Custom clearcoat roughenss factor. | Fragment Shader | Only available in materials with a `clearcoat`. |
138 | | csm_ClearcoatNormal | `vec3` | Custom clearcoat normal. | Fragment Shader | Only available in materials with a `clearcoat`. |
139 | | csm_Transmission | `float` | Custom transmission factor. | Fragment Shader | Only available in materials with a `transmission`. |
140 | | csm_Thickness | `float` | Custom transmission thickness. | Fragment Shader | Only available in materials with a `transmission`. |
141 | | csm_Iridescence | `float` | Custom iridescence factor. | Fragment Shader | Only available in materials with a `iridescence`. |
142 | | csm_Emissive | `vec3` | Custom emissive color. | Fragment Shader | Only available in materials with a `emissive`. |
143 | | csm_FragNormal | `float` | Custom fragment normal. | Only available in materials with a `normalMap`. |
144 | | Fragmet Shader (Special)
| - | - | - | - |
145 | | csm_DepthAlpha | `float` | Custom alpha for `MeshDepthMaterial`. | Fragment Shader | Useful for controlling `customDepthMaterial` with same shader as the shader material. |
146 | | csm_UnlitFac | `float` | Custom mix between `csm_DiffuseColor` and `csm_FragColor`. | Fragment Shader | Can be used to mix lit and unlit materials. Set to `1.0` by default if `csm_FragColor` is found in shader string. |
147 |
148 | ## Bump mapping
149 |
150 | Bump mapping was removed in v6.4.0. This is becasue it cannot be implimented with a singular clean output variable. You can still impliment bump mapping by using `csm_FragNormal` output variable. See the [Bump example](https://farazzshaikh.github.io/THREE-CustomShaderMaterial/#/bump) for a full working example.
151 |
152 | ## Typing
153 |
154 | CSM infers prop types based on the `baseMaterial` prop. However, if this does not work for what ever reason, you can pass your base material type as a generic to `CustomShaderMaterial`.
155 |
156 | ```ts
157 | // Vanilla
158 | const material = new CustomShaderMaterial({
159 | baseMaterial: THREE.MeshPhysicalMaterial,
160 | //...Any props
161 | });
162 |
163 | // React
164 |
165 | baseMaterial={THREE.MeshPhysicalMaterial}
166 | //...Any props
167 | ```
168 |
169 | ### Typing React Refs
170 |
171 | You can type the ref of `CustomShaderMaterial` as follows:
172 |
173 | ```tsx
174 | // NOTE: import from /vanilla module
175 | import CSM from "three-custom-shader-material/vanilla";
176 | import { MeshPhysicalMaterial } from "three";
177 |
178 | const ref = useRef>(null!);
179 | ```
180 |
181 | ## Custom overrides
182 |
183 | You can define any custom overrides you'd like using the `patchMap` prop. The prop is used as shown below.
184 |
185 | ```js
186 | const material = new CustomShaderMaterial({
187 | baseMaterial: THREE.MeshPhysicalMaterial,
188 | vertexShader: ` ... `,
189 | fragmentShader: ... `,
190 | uniforms: {...},
191 | patchMap={{
192 | "": { // The keyword you will assign to in your custom shader
193 | "TO_REPLACE": // The chunk you'd like to replace.
194 | "REPLACED_WITH" // The chunk you'd like put in place of `TO_REPLACE`
195 | }
196 | }}
197 | })
198 | ```
199 |
200 | > Note: If `` is not found in shader string, the patch map will not be applied. To ALWAYS apply a patch map, use the special keyword - `*` (star).
201 | >
202 | > ```js
203 | > patchMap={{
204 | > "*": { "TO_REPLACE": "REPLACED_WITH" }
205 | > }}
206 | > ```
207 |
208 | ## Extending already extended materials
209 |
210 | CSM allows you to extend other CSM instances. Values set in the first shader will affect the next.
211 |
212 | > Note: Extending of other materials that use `onBeforeCompile` may or may not work depending on if the default `#includes` are mangled.
213 |
214 |
215 | Show Vanilla example
216 |
217 | ```js
218 | import CustomShaderMaterial from "three-custom-shader-material/vanilla";
219 |
220 | function Box() {
221 | const material1 = new CustomShaderMaterial({
222 | baseMaterial: THREE.MeshPhysicalMaterial,
223 | //...Any props
224 | });
225 | const material2 = new CustomShaderMaterial({
226 | baseMaterial: material1,
227 | //...Any props
228 | });
229 | }
230 | ```
231 |
232 |
233 |
234 |
235 | Show React example
236 |
237 | ```jsx
238 | import CustomShaderMaterial from "three-custom-shader-material";
239 | import CustomShaderMaterialImpl from "three-custom-shader-material/vanilla";
240 |
241 | function Cube() {
242 | const [materialRef, setMaterialRef] = useState();
243 |
244 | return (
245 | <>
246 |
251 |
252 | {materialRef && (
253 |
257 | )}
258 |
259 | );
260 | }
261 | ```
262 |
263 |
264 |
265 | ### Gotchas
266 |
267 | - `csm_Position` **MUST** be a non-projected vector. i.e., no need to multiply `projectionMatrix` or `modelViewPosition` with it. If you require projection, use `csm_PositionRaw`.
268 | - Instancing must be handled manually when using `csm_PositionRaw` by multiplying in `instanceMatrix` into your projection math.
269 | - When extending already extended material, variables, uniforms, attributes, varyings and functions are **NOT** scoped to the material they are defined in. Thus, you **WILL** get redefinition errors if you do not manually scope these identifiers.
270 | - Extending of other materials that use `onBeforeCompile` may or may not work depending on if the default `#includes` are mangled.
271 | - When using an instance of CSM as the baseMaterial, or chining multiple CSM instances, or when extending any material that uses `onBeforeCompile` the injection order is as follows:
272 |
273 | ```glsl
274 | void main() {
275 | // shader A
276 | // shader B
277 | // shader C
278 | // shader D
279 |
280 | // original shader
281 | }
282 | ```
283 |
284 | Where A was the first in the chain.
285 |
286 | - Cache key calculation takes into account base material's cache key. Useful for propagating changes across multiple chained CSM instances.
287 | - If you find yourself lost in a patchMap, it's often simpler to just make a `ShaderMaterial` with the necessary `#includes`.
288 |
289 | ## Performance
290 |
291 | With v6, CSM's initialization cost is now negligible 🥳 Still, a couple important notes about performance:
292 |
293 | - Changing these props will rebuild the material
294 | - `baseMaterial`
295 | - `fragmentShader`
296 | - `vertexShader`
297 | - `uniforms`
298 | - `cacheKey`
299 | - CSM uses ThreeJS's default shader program caching system. Materials with the same cache key, will use the the same shader program.
300 | - `` and `` are the same, and will use the same cached shader program. The default cache key is such:
301 |
302 | ```js
303 | (cacheKey?.() || hash((vertexShader || "") + (fragmentShader || ""))) +
304 | baseMaterialCacheKey?.();
305 | ```
306 |
307 | You can provide your own cache key function via the `cacheKey` prop.
308 |
309 | > Note: CSM will only rebuild if the **reference** to the above props change, for example, in React, doing `uniforms={{...}}` means that the uniforms object is unstable, i.e. it is re-created, with a **new** reference every render. Instead, condsider memoizing the uniforms prop `const uniforms = useMemo(() -> ({...}));`. The uniforms object will then have the same refrence on every render.
310 |
311 | > If the uniforms are memoized, changing their value by doing `uniforms.foo.value = ...` will not cause CSM to rebuild, as the refrence of `uniforms` does not change.
312 |
313 | ## License
314 |
315 | ```
316 | MIT License
317 |
318 | Copyright (c) 2024 Faraz Shaikh
319 |
320 | Permission is hereby granted, free of charge, to any person obtaining a copy
321 | of this software and associated documentation files (the "Software"), to deal
322 | in the Software without restriction, including without limitation the rights
323 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
324 | copies of the Software, and to permit persons to whom the Software is
325 | furnished to do so, subject to the following conditions:
326 |
327 | The above copyright notice and this permission notice shall be included in all
328 | copies or substantial portions of the Software.
329 |
330 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
331 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
332 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
333 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
334 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
335 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
336 | SOFTWARE.
337 | ```
338 |
--------------------------------------------------------------------------------
/examples/src/Examples/MetalBunny/MeshTransmissionMaterial.tsx:
--------------------------------------------------------------------------------
1 | /** Author: @N8Programs https://github.com/N8python
2 | * https://gist.github.com/N8python/eb42d25c7cd00d12e965ac9cba544317
3 | * Inspired by: @ore_ukonpower and http://next.junni.co.jp
4 | * https://github.com/junni-inc/next.junni.co.jp/blob/master/src/ts/MainScene/World/Sections/Section2/Transparents/Transparent/shaders/transparent.fs
5 | */
6 |
7 | import { useFBO } from "@react-three/drei";
8 | import { extend, useFrame } from "@react-three/fiber";
9 | import { ForwardRefComponent } from "framer-motion";
10 | import * as React from "react";
11 | import * as THREE from "three";
12 | import { DiscardMaterial } from "./DiscardMaterial";
13 |
14 | type MeshTransmissionMaterialType = Omit<
15 | JSX.IntrinsicElements["meshPhysicalMaterial"],
16 | "args" | "roughness" | "thickness" | "transmission"
17 | > & {
18 | /* Transmission, default: 1 */
19 | transmission?: number;
20 | /* Thickness (refraction), default: 0 */
21 | thickness?: number;
22 | /* Roughness (blur), default: 0 */
23 | roughness?: number;
24 | /* Chromatic aberration, default: 0.03 */
25 | chromaticAberration?: number;
26 | /* Anisotropy, default: 0.1 */
27 | anisotropy?: number;
28 | /* AnisotropicBlur, default: 0.1 */
29 | anisotropicBlur?: number;
30 | /* Distortion, default: 0 */
31 | distortion?: number;
32 | /* Distortion scale, default: 0.5 */
33 | distortionScale?: number;
34 | /* Temporal distortion (speed of movement), default: 0.0 */
35 | temporalDistortion?: number;
36 | /** The scene rendered into a texture (use it to share a texture between materials), default: null */
37 | buffer?: THREE.Texture;
38 | /** Internals */
39 | time?: number;
40 | /** Internals */
41 | args?: [samples: number, transmissionSampler: boolean];
42 | };
43 |
44 | type MeshTransmissionMaterialProps = Omit<
45 | MeshTransmissionMaterialType,
46 | "args"
47 | > & {
48 | /** transmissionSampler, you can use the threejs transmission sampler texture that is
49 | * generated once for all transmissive materials. The upside is that it can be faster if you
50 | * use multiple MeshPhysical and Transmission materials, the downside is that transmissive materials
51 | * using this can't see other transparent or transmissive objects, default: false */
52 | transmissionSampler?: boolean;
53 | /** Render the backside of the material (more cost, better results), default: false */
54 | backside?: boolean;
55 | /** Backside thickness (when backside is true), default: 0 */
56 | backsideThickness?: number;
57 | backsideEnvMapIntensity?: number;
58 | /** Resolution of the local buffer, default: undefined (fullscreen) */
59 | resolution?: number;
60 | /** Resolution of the local buffer for backfaces, default: undefined (fullscreen) */
61 | backsideResolution?: number;
62 | /** Refraction samples, default: 6 */
63 | samples?: number;
64 | /** Buffer scene background (can be a texture, a cubetexture or a color), default: null */
65 | background?: THREE.Texture | THREE.Color;
66 | };
67 |
68 | interface Uniform {
69 | value: T;
70 | }
71 |
72 | interface Shader {
73 | uniforms: { [uniform: string]: Uniform };
74 | vertexShader: string;
75 | fragmentShader: string;
76 | }
77 |
78 | declare global {
79 | namespace JSX {
80 | interface IntrinsicElements {
81 | meshTransmissionMaterial: MeshTransmissionMaterialType;
82 | }
83 | }
84 | }
85 |
86 | export class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
87 | uniforms: {
88 | chromaticAberration: Uniform;
89 | transmission: Uniform;
90 | transmissionMap: Uniform;
91 | _transmission: Uniform;
92 | thickness: Uniform;
93 | roughness: Uniform;
94 | thicknessMap: Uniform;
95 | attenuationDistance: Uniform;
96 | attenuationColor: Uniform;
97 | anisotropicBlur: Uniform;
98 | time: Uniform;
99 | distortion: Uniform;
100 | distortionScale: Uniform;
101 | temporalDistortion: Uniform;
102 | buffer: Uniform;
103 | };
104 |
105 | constructor(samples = 6, transmissionSampler = false) {
106 | super();
107 |
108 | this.uniforms = {
109 | chromaticAberration: { value: 0.05 },
110 | // Transmission must always be 0, unless transmissionSampler is being used
111 | transmission: { value: 0 },
112 | // Instead a workaround is used, see below for reasons why
113 | _transmission: { value: 1 },
114 | transmissionMap: { value: null },
115 | // Roughness is 1 in THREE.MeshPhysicalMaterial but it makes little sense in a transmission material
116 | roughness: { value: 0 },
117 | thickness: { value: 0 },
118 | thicknessMap: { value: null },
119 | attenuationDistance: { value: Infinity },
120 | attenuationColor: { value: new THREE.Color("white") },
121 | anisotropicBlur: { value: 0.1 },
122 | time: { value: 0 },
123 | distortion: { value: 0.0 },
124 | distortionScale: { value: 0.5 },
125 | temporalDistortion: { value: 0.0 },
126 | buffer: { value: null },
127 | };
128 |
129 | this.onBeforeCompile = (shader) => {
130 | shader.uniforms = {
131 | ...shader.uniforms,
132 | ...this.uniforms,
133 | };
134 |
135 | // Fix for r153-r156 anisotropy chunks
136 | // https://github.com/mrdoob/three.js/pull/26716
137 | if ((this as any).anisotropy > 0) shader.defines.USE_ANISOTROPY = "";
138 |
139 | // If the transmission sampler is active inject a flag
140 | if (transmissionSampler) shader.defines.USE_SAMPLER = "";
141 | // Otherwise we do use use .transmission and must therefore force USE_TRANSMISSION
142 | // because threejs won't inject it for us
143 | else shader.defines.USE_TRANSMISSION = "";
144 |
145 | // Head
146 | shader.fragmentShader =
147 | /*glsl*/ `
148 | uniform float chromaticAberration;
149 | uniform float anisotropicBlur;
150 | uniform float time;
151 | uniform float distortion;
152 | uniform float distortionScale;
153 | uniform float temporalDistortion;
154 | uniform sampler2D buffer;
155 |
156 | vec3 random3(vec3 c) {
157 | float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
158 | vec3 r;
159 | r.z = fract(512.0*j);
160 | j *= .125;
161 | r.x = fract(512.0*j);
162 | j *= .125;
163 | r.y = fract(512.0*j);
164 | return r-0.5;
165 | }
166 |
167 | uint hash( uint x ) {
168 | x += ( x << 10u );
169 | x ^= ( x >> 6u );
170 | x += ( x << 3u );
171 | x ^= ( x >> 11u );
172 | x += ( x << 15u );
173 | return x;
174 | }
175 |
176 | // Compound versions of the hashing algorithm I whipped together.
177 | uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y) ); }
178 | uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ); }
179 | uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }
180 |
181 | // Construct a float with half-open range [0:1] using low 23 bits.
182 | // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.
183 | float floatConstruct( uint m ) {
184 | const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask
185 | const uint ieeeOne = 0x3F800000u; // 1.0 in IEEE binary32
186 | m &= ieeeMantissa; // Keep only mantissa bits (fractional part)
187 | m |= ieeeOne; // Add fractional part to 1.0
188 | float f = uintBitsToFloat( m ); // Range [1:2]
189 | return f - 1.0; // Range [0:1]
190 | }
191 |
192 | // Pseudo-random value in half-open range [0:1].
193 | float randomBase( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }
194 | float randomBase( vec2 v ) { return floatConstruct(hash(floatBitsToUint(v))); }
195 | float randomBase( vec3 v ) { return floatConstruct(hash(floatBitsToUint(v))); }
196 | float randomBase( vec4 v ) { return floatConstruct(hash(floatBitsToUint(v))); }
197 | float rand(float seed) {
198 | float result = randomBase(vec3(gl_FragCoord.xy, seed));
199 | return result;
200 | }
201 |
202 | const float F3 = 0.3333333;
203 | const float G3 = 0.1666667;
204 |
205 | float snoise(vec3 p) {
206 | vec3 s = floor(p + dot(p, vec3(F3)));
207 | vec3 x = p - s + dot(s, vec3(G3));
208 | vec3 e = step(vec3(0.0), x - x.yzx);
209 | vec3 i1 = e*(1.0 - e.zxy);
210 | vec3 i2 = 1.0 - e.zxy*(1.0 - e);
211 | vec3 x1 = x - i1 + G3;
212 | vec3 x2 = x - i2 + 2.0*G3;
213 | vec3 x3 = x - 1.0 + 3.0*G3;
214 | vec4 w, d;
215 | w.x = dot(x, x);
216 | w.y = dot(x1, x1);
217 | w.z = dot(x2, x2);
218 | w.w = dot(x3, x3);
219 | w = max(0.6 - w, 0.0);
220 | d.x = dot(random3(s), x);
221 | d.y = dot(random3(s + i1), x1);
222 | d.z = dot(random3(s + i2), x2);
223 | d.w = dot(random3(s + 1.0), x3);
224 | w *= w;
225 | w *= w;
226 | d *= w;
227 | return dot(d, vec4(52.0));
228 | }
229 |
230 | float snoiseFractal(vec3 m) {
231 | return 0.5333333* snoise(m)
232 | +0.2666667* snoise(2.0*m)
233 | +0.1333333* snoise(4.0*m)
234 | +0.0666667* snoise(8.0*m);
235 | }\n` + shader.fragmentShader;
236 |
237 | // Remove transmission
238 | shader.fragmentShader = shader.fragmentShader.replace(
239 | "#include ",
240 | /*glsl*/ `
241 | #ifdef USE_TRANSMISSION
242 | // Transmission code is based on glTF-Sampler-Viewer
243 | // https://github.com/KhronosGroup/glTF-Sample-Viewer
244 | uniform float _transmission;
245 | float transmission = 0.0;
246 | uniform float thickness;
247 | uniform float attenuationDistance;
248 | uniform vec3 attenuationColor;
249 | #ifdef USE_TRANSMISSIONMAP
250 | uniform sampler2D transmissionMap;
251 | #endif
252 | #ifdef USE_THICKNESSMAP
253 | uniform sampler2D thicknessMap;
254 | #endif
255 | uniform vec2 transmissionSamplerSize;
256 | uniform sampler2D transmissionSamplerMap;
257 | uniform mat4 modelMatrix;
258 | uniform mat4 projectionMatrix;
259 | varying vec3 vWorldPosition;
260 | vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {
261 | // Direction of refracted light.
262 | vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );
263 | // Compute rotation-independant scaling of the model matrix.
264 | vec3 modelScale;
265 | modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );
266 | modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );
267 | modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );
268 | // The thickness is specified in local space.
269 | return normalize( refractionVector ) * thickness * modelScale;
270 | }
271 | float applyIorToRoughness( const in float roughness, const in float ior ) {
272 | // Scale roughness with IOR so that an IOR of 1.0 results in no microfacet refraction and
273 | // an IOR of 1.5 results in the default amount of microfacet refraction.
274 | return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );
275 | }
276 | vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {
277 | float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );
278 | #ifdef USE_SAMPLER
279 | #ifdef texture2DLodEXT
280 | return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);
281 | #else
282 | return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);
283 | #endif
284 | #else
285 | return texture2D(buffer, fragCoord.xy);
286 | #endif
287 | }
288 | vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {
289 | if ( isinf( attenuationDistance ) ) {
290 | // Attenuation distance is +∞, i.e. the transmitted color is not attenuated at all.
291 | return radiance;
292 | } else {
293 | // Compute light attenuation using Beer's law.
294 | vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;
295 | vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); // Beer's law
296 | return transmittance * radiance;
297 | }
298 | }
299 | vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,
300 | const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,
301 | const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,
302 | const in vec3 attenuationColor, const in float attenuationDistance ) {
303 | vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );
304 | vec3 refractedRayExit = position + transmissionRay;
305 | // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.
306 | vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );
307 | vec2 refractionCoords = ndcPos.xy / ndcPos.w;
308 | refractionCoords += 1.0;
309 | refractionCoords /= 2.0;
310 | // Sample framebuffer to get pixel the refracted ray hits.
311 | vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );
312 | vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );
313 | // Get the specular component.
314 | vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );
315 | return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );
316 | }
317 | #endif\n`
318 | );
319 |
320 | // Add refraction
321 | shader.fragmentShader = shader.fragmentShader.replace(
322 | "#include ",
323 | /*glsl*/ `
324 | // Improve the refraction to use the world pos
325 | material.transmission = _transmission;
326 | material.transmissionAlpha = 1.0;
327 | material.thickness = thickness;
328 | material.attenuationDistance = attenuationDistance;
329 | material.attenuationColor = attenuationColor;
330 | #ifdef USE_TRANSMISSIONMAP
331 | material.transmission *= texture2D( transmissionMap, vUv ).r;
332 | #endif
333 | #ifdef USE_THICKNESSMAP
334 | material.thickness *= texture2D( thicknessMap, vUv ).g;
335 | #endif
336 |
337 | vec3 pos = vWorldPosition;
338 | float runningSeed = 0.0;
339 | vec3 v = normalize( cameraPosition - pos );
340 | vec3 n = inverseTransformDirection( normal, viewMatrix );
341 | vec3 transmission = vec3(0.0);
342 | float transmissionR, transmissionB, transmissionG;
343 | float randomCoords = rand(runningSeed++);
344 | float thickness_smear = thickness * max(pow(roughnessFactor, 0.33), anisotropicBlur);
345 | vec3 distortionNormal = vec3(0.0);
346 | vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;
347 | if (distortion > 0.0) {
348 | distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));
349 | }
350 | for (float i = 0.0; i < ${samples}.0; i ++) {
351 | vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5)) * pow(rand(runningSeed++), 0.33) + distortionNormal);
352 | transmissionR = getIBLVolumeRefraction(
353 | sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
354 | pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness + thickness_smear * (i + randomCoords) / float(${samples}),
355 | material.attenuationColor, material.attenuationDistance
356 | ).r;
357 | transmissionG = getIBLVolumeRefraction(
358 | sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
359 | pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + chromaticAberration * (i + randomCoords) / float(${samples})) , material.thickness + thickness_smear * (i + randomCoords) / float(${samples}),
360 | material.attenuationColor, material.attenuationDistance
361 | ).g;
362 | transmissionB = getIBLVolumeRefraction(
363 | sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
364 | pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${samples})), material.thickness + thickness_smear * (i + randomCoords) / float(${samples}),
365 | material.attenuationColor, material.attenuationDistance
366 | ).b;
367 | transmission.r += transmissionR;
368 | transmission.g += transmissionG;
369 | transmission.b += transmissionB;
370 | }
371 | transmission /= ${samples}.0;
372 | totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`
373 | );
374 | };
375 |
376 | Object.keys(this.uniforms).forEach((name) =>
377 | Object.defineProperty(this, name, {
378 | get: () => {
379 | const uniform = this.uniforms[name];
380 | if (!uniform) return undefined;
381 | return uniform.value;
382 | },
383 | set: (v) => {
384 | const uniform = this.uniforms[name];
385 | if (!uniform) return;
386 | uniform.value = v;
387 | },
388 | })
389 | );
390 | }
391 | }
392 |
393 | // @ts-ignore
394 | export const MeshTransmissionMaterial: ForwardRefComponent<
395 | MeshTransmissionMaterialProps,
396 | JSX.IntrinsicElements["meshTransmissionMaterial"]
397 | > = /* @__PURE__ */ React.forwardRef(
398 | (
399 | {
400 | buffer,
401 | transmissionSampler = false,
402 | backside = false,
403 | side = THREE.FrontSide,
404 | transmission = 1,
405 | thickness = 2,
406 | backsideThickness = 0,
407 | backsideEnvMapIntensity = 1,
408 | samples = 10,
409 | resolution,
410 | backsideResolution,
411 | background,
412 | anisotropy,
413 | anisotropicBlur,
414 | ...props
415 | }: MeshTransmissionMaterialProps,
416 | fref
417 | ) => {
418 | extend({ MeshTransmissionMaterial: MeshTransmissionMaterialImpl });
419 |
420 | const ref = React.useRef(
421 | null!
422 | );
423 | const [discardMaterial] = React.useState(() => new DiscardMaterial());
424 | const fboBack = useFBO(backsideResolution || resolution);
425 | const fboMain = useFBO(resolution);
426 |
427 | let oldBg;
428 | let oldEnvMapIntensity;
429 | let oldTone;
430 | let parent;
431 | useFrame((state) => {
432 | ref.current.time = state.clock.getElapsedTime();
433 |
434 | // Render only if the buffer matches the built-in and no transmission sampler is set
435 | if (ref.current.buffer === fboMain.texture && !transmissionSampler) {
436 | parent = (ref.current as any).__r3f.parent as THREE.Object3D;
437 |
438 | if (parent) {
439 | // Save defaults
440 | oldTone = state.gl.toneMapping;
441 | oldBg = state.scene.background;
442 | oldEnvMapIntensity = ref.current.envMapIntensity;
443 |
444 | // Switch off tonemapping lest it double tone maps
445 | // Save the current background and set the HDR as the new BG
446 | // Use discardmaterial, the parent will be invisible, but it's shadows will still be cast
447 | state.gl.toneMapping = THREE.NoToneMapping;
448 | if (background) state.scene.background = background;
449 | parent.material = discardMaterial;
450 |
451 | if (backside) {
452 | // Render into the backside buffer
453 | state.gl.setRenderTarget(fboBack);
454 | state.gl.render(state.scene, state.camera);
455 | // And now prepare the material for the main render using the backside buffer
456 | parent.material = ref.current;
457 | parent.material.buffer = fboBack.texture;
458 | parent.material.thickness = backsideThickness;
459 | parent.material.side = THREE.BackSide;
460 | parent.material.envMapIntensity = backsideEnvMapIntensity;
461 | }
462 |
463 | // Render into the main buffer
464 | state.gl.setRenderTarget(fboMain);
465 | state.gl.render(state.scene, state.camera);
466 |
467 | parent.material = ref.current;
468 | parent.material.thickness = thickness;
469 | parent.material.side = side;
470 | parent.material.buffer = fboMain.texture;
471 | parent.material.envMapIntensity = oldEnvMapIntensity;
472 |
473 | // Set old state back
474 | state.scene.background = oldBg;
475 | state.gl.setRenderTarget(null);
476 | state.gl.toneMapping = oldTone;
477 | }
478 | }
479 | });
480 |
481 | // Forward ref
482 | React.useImperativeHandle(fref, () => ref.current, []);
483 |
484 | return (
485 | 0 and execute extra renders.
495 | // The exception is when transmissionSampler is set, in which case we are using three's built in sampler.
496 | anisotropicBlur={anisotropicBlur ?? anisotropy}
497 | transmission={transmissionSampler ? transmission : 0}
498 | thickness={thickness}
499 | side={side}
500 | />
501 | );
502 | }
503 | );
504 |
--------------------------------------------------------------------------------