Docs: Improve Material page (#1458)

* Docs: Improve Material page * Update three.js * Add examples * Update patch and delete examples * Add examples * Update patch and delete examples
three-types · Dec 20, 2024 · 95be5a8 · 95be5a8
1 parent 59051d8
commit 95be5a8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -8746,7 +8746,7 @@ index 90b9416d..e6034b82 100644
      if (texture.matrixAutoUpdate === true) {
          texture.offset.set(API.offsetX, API.offsetY);
 diff --git a/examples-testing/examples/webgl_materials_toon.ts b/examples-testing/examples/webgl_materials_toon.ts
-index 03db286a..883244f5 100644
+index 46c6a7e9..e89fc8cf 100644
 --- a/examples-testing/examples/webgl_materials_toon.ts
 +++ b/examples-testing/examples/webgl_materials_toon.ts
 @@ -4,20 +4,20 @@ import Stats from 'three/addons/libs/stats.module.js';
@@ -14331,7 +14331,7 @@ index 616645aa..288f6e84 100644
  init();
 
 diff --git a/examples-testing/examples/webgpu_materials_toon.ts b/examples-testing/examples/webgpu_materials_toon.ts
-index 07ea501c..a4e420da 100644
+index 1e9a2304..5f5dfef0 100644
 --- a/examples-testing/examples/webgpu_materials_toon.ts
 +++ b/examples-testing/examples/webgpu_materials_toon.ts
 @@ -1,4 +1,4 @@
@@ -15324,7 +15324,7 @@ index fc87be20..5f8ab8b3 100644
      compose = sceneMask2.mix(compose, texture(texture2));
 
 diff --git a/examples-testing/examples/webgpu_postprocessing_motion_blur.ts b/examples-testing/examples/webgpu_postprocessing_motion_blur.ts
-index 14e45012..b4bdcf2f 100644
+index 94099064..ed1a095d 100644
 --- a/examples-testing/examples/webgpu_postprocessing_motion_blur.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_motion_blur.ts
 @@ -1,4 +1,4 @@
@@ -15587,7 +15587,7 @@ index 4aeb6e43..738b6580 100644
      postProcessing.render();
 
 diff --git a/examples-testing/examples/webgpu_postprocessing_ssr.ts b/examples-testing/examples/webgpu_postprocessing_ssr.ts
-index 188581a5..ab9f2367 100644
+index 4b529442..b829e66b 100644
 --- a/examples-testing/examples/webgpu_postprocessing_ssr.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_ssr.ts
 @@ -1,6 +1,16 @@
@@ -15607,10 +15607,10 @@ index 188581a5..ab9f2367 100644
 +    ShaderNodeObject,
 +} from 'three/tsl';
 +import SSRNode, { ssr } from 'three/addons/tsl/display/SSRNode.js';
+ import { smaa } from 'three/addons/tsl/display/SMAANode.js';
 
  import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
- import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-@@ -16,8 +26,12 @@ const params = {
+@@ -17,8 +27,12 @@ const params = {
      enabled: true,
  };
 
@@ -15625,6 +15625,18 @@ index 188581a5..ab9f2367 100644
 
  init();
 
+@@ -37,9 +51,9 @@ async function init() {
+     loader.setDRACOLoader(dracoLoader);
+     loader.load('models/gltf/steampunk_camera.glb', function (gltf) {
+         gltf.scene.traverse(function (object) {
+-            if (object.material) {
++            if ((object as THREE.Mesh).material) {
+                 // Avoid overdrawing
+-                object.material.side = THREE.FrontSide;
++                (object as THREE.Mesh<THREE.BufferGeometry, THREE.Material>).material.side = THREE.FrontSide;
+             }
+         });
+
 diff --git a/examples-testing/examples/webgpu_postprocessing_traa.ts b/examples-testing/examples/webgpu_postprocessing_traa.ts
 index 9a5558e9..05dbf9db 100644
 --- a/examples-testing/examples/webgpu_postprocessing_traa.ts

diff --git a/three.js b/three.js
diff --git a/types/three/src/materials/Material.d.ts b/types/three/src/materials/Material.d.ts
@@ -573,7 +573,9 @@ export class Material extends EventDispatcher<{ dispose: {} }> {
     /**
      * An optional callback that is executed immediately before the shader program is compiled.
      * This function is called with the shader source code as a parameter.
-     * Useful for the modification of built-in materials.
+     * Useful for the modification of built-in materials, but the recommended approach moving forward is to use
+     * `WebGPURenderer` with the new Node Material system and
+     * [TSL]{@link https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language}.
      * Unlike properties, the callback is not supported by {@link .clone()}, {@link .copy()} and {@link .toJSON()}.
      * This callback is only supported in `WebGLRenderer` (not `WebGPURenderer`).
      * @param parameters WebGL program parameters
+19 −3		build/three.cjs
+19 −3		build/three.module.js
+1 −1		build/three.module.min.js
+5 −3		build/three.tsl.js
+1 −1		build/three.tsl.min.js
+2,162 −271		build/three.webgpu.js
+1 −1		build/three.webgpu.min.js
+2,162 −271		build/three.webgpu.nodes.js
+1 −1		build/three.webgpu.nodes.min.js
+3 −1		docs/api/en/materials/Material.html
+3 −1		docs/api/fr/materials/Material.html
+1 −1		examples/jsm/tsl/display/SSRNode.js
+ −		examples/screenshots/webgpu_postprocessing_ssr.jpg
+20 −6		examples/webgpu_postprocessing_ssr.html
+1 −1		src/materials/nodes/LineDashedNodeMaterial.js
+3 −0		src/nodes/fog/Fog.js