BlendModes: Added blend* prefix (#1408)

* BlendModes: Added blend* prefix

* Update three.js

* Add examples

* Update patch and delete examples

* Add src

* Update patch and delete src

Author: Methuselah96

examples-testing/changes.patch

@@ -763,7 +763,7 @@ index e7079c40..89676cd4 100644
      }
  });
 diff --git a/examples-testing/examples/misc_controls_arcball.ts b/examples-testing/examples/misc_controls_arcball.ts
-index fbef3318..be69ca7b 100644
+index 97653ede..c1d5378a 100644
 --- a/examples-testing/examples/misc_controls_arcball.ts
 +++ b/examples-testing/examples/misc_controls_arcball.ts
 @@ -12,8 +12,12 @@ const cameraType = { type: 'Perspective' };
@@ -781,7 +781,7 @@ index fbef3318..be69ca7b 100644
 
  const arcballGui = {
      gizmoVisible: true,
-@@ -97,8 +101,8 @@ function init() {
+@@ -98,8 +102,8 @@ function init() {
          material.normalMap.wrapS = THREE.RepeatWrapping;
 
          group.traverse(function (child) {
@@ -792,7 +792,7 @@ index fbef3318..be69ca7b 100644
              }
          });
 
-@@ -164,12 +168,12 @@ function onWindowResize() {
+@@ -165,12 +169,12 @@ function onWindowResize() {
 
          const halfW = perspectiveDistance * Math.tan(halfFovH);
          const halfH = perspectiveDistance * Math.tan(halfFovV);
@@ -810,7 +810,7 @@ index fbef3318..be69ca7b 100644
      }
 
      camera.updateProjectionMatrix();
-@@ -183,7 +187,7 @@ function render() {
+@@ -184,7 +188,7 @@ function render() {
      renderer.render(scene, camera);
  }
 
@@ -819,7 +819,7 @@ index fbef3318..be69ca7b 100644
      if (event.key === 'c') {
          if (event.ctrlKey || event.metaKey) {
              controls.copyState();
-@@ -195,7 +199,7 @@ function onKeyDown(event) {
+@@ -196,7 +200,7 @@ function onKeyDown(event) {
      }
  }
 
@@ -14650,13 +14650,13 @@ index 9eb9922d..b75024ec 100644
      function updateSun() {
          const phi = THREE.MathUtils.degToRad(90 - parameters.elevation);
 diff --git a/examples-testing/examples/webgpu_parallax_uv.ts b/examples-testing/examples/webgpu_parallax_uv.ts
-index 775399bf..1deb0cb1 100644
+index 927a4661..9296a108 100644
 --- a/examples-testing/examples/webgpu_parallax_uv.ts
 +++ b/examples-testing/examples/webgpu_parallax_uv.ts
 @@ -1,11 +1,11 @@
 -import * as THREE from 'three';
 +import * as THREE from 'three/webgpu';
- import { texture, parallaxUV, overlay, uv } from 'three/tsl';
+ import { texture, parallaxUV, blendOverlay, uv } from 'three/tsl';
 
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -15355,12 +15355,12 @@ 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 26ac69d9..6a1cd1e8 100644
+index 188581a5..ab9f2367 100644
 --- a/examples-testing/examples/webgpu_postprocessing_ssr.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_ssr.ts
 @@ -1,6 +1,16 @@
 -import * as THREE from 'three';
--import { pass, mrt, output, transformedNormalView, metalness, blendNormal, screenUV, color } from 'three/tsl';
+-import { pass, mrt, output, transformedNormalView, metalness, blendColor, screenUV, color } from 'three/tsl';
 -import { ssr } from 'three/addons/tsl/display/SSRNode.js';
 +import * as THREE from 'three/webgpu';
 +import {
@@ -15369,7 +15369,7 @@ index 26ac69d9..6a1cd1e8 100644
 +    output,
 +    transformedNormalView,
 +    metalness,
-+    blendNormal,
++    blendColor,
 +    screenUV,
 +    color,
 +    ShaderNodeObject,

src-testing/changes.patch

@@ -1103,7 +1103,7 @@ index 190fe8c5..d873bb24 100644
 
          this.name = name;
 diff --git a/src-testing/src/nodes/core/NodeBuilder.ts b/src-testing/src/nodes/core/NodeBuilder.ts
-index 3003d168..b8f0f8ee 100644
+index 3003d168..11c07746 100644
 --- a/src-testing/src/nodes/core/NodeBuilder.ts
 +++ b/src-testing/src/nodes/core/NodeBuilder.ts
 @@ -7,7 +7,7 @@ import NodeCache from './NodeCache.js';
@@ -1515,8 +1515,8 @@ index 3003d168..b8f0f8ee 100644
 +        texture: Texture,
 +        textureProperty: string,
 +        uvSnippet: string | null,
-+        levelSnippet: string | null,
 +        depthSnippet: string | null,
++        levelSnippet: string | null,
 +    ): string;
 +
 +    abstract generateTextureGrad(
@@ -7492,7 +7492,7 @@ index 3b16e861..99874f36 100644
          const monitor = renderObject.getMonitor();
 
 diff --git a/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts b/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts
-index 7db9864a..bb852529 100644
+index 07bcda18..6ebfd686 100644
 --- a/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts
 +++ b/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts
 @@ -13,6 +13,7 @@ import { WebGLBufferRenderer } from './WebGLBufferRenderer.js';
@@ -7503,7 +7503,7 @@ index 7db9864a..bb852529 100644
 
  //
 
-@@ -687,7 +688,7 @@ class WebGLBackend extends Backend {
+@@ -692,7 +693,7 @@ class WebGLBackend extends Backend {
          this.textureUtils.destroyTexture(texture);
      }
 
@@ -7924,7 +7924,7 @@ index 2cb79b70..6b5b60e0 100644
      }
 
 diff --git a/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts b/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts
-index 088d0565..02da8cea 100644
+index ed81924a..57d481ec 100644
 --- a/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts
 +++ b/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts
 @@ -10,7 +10,7 @@ import {
@@ -7936,16 +7936,16 @@ index 088d0565..02da8cea 100644
 
  import { getFormat } from '../utils/WebGPUTextureUtils.js';
 
-@@ -24,6 +24,8 @@ import {
-     ClampToEdgeWrapping,
+@@ -28,6 +28,8 @@ import {
      MirroredRepeatWrapping,
+     NearestFilter,
  } from '../../../constants.js';
 +import { Texture } from '../../../textures/Texture.js';
 +import UniformNode from '../../../nodes/core/UniformNode.js';
 
  // GPUShaderStage is not defined in browsers not supporting WebGPU
  const GPUShaderStage = self.GPUShaderStage;
-@@ -203,7 +205,13 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -198,7 +200,13 @@ class WGSLNodeBuilder extends NodeBuilder {
          return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
      }
 
@@ -7960,22 +7960,23 @@ index 088d0565..02da8cea 100644
          if (shaderStage === 'fragment') {
              if (depthSnippet) {
                  return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet}, ${depthSnippet} )`;
-@@ -317,7 +325,12 @@ class WGSLNodeBuilder extends NodeBuilder {
-         return `tsl_biquadraticTexture( ${textureProperty}, ${wrapFunction}( ${uvSnippet} ), ${textureDimension}, i32( ${levelSnippet} ) )`;
+@@ -318,7 +326,13 @@ class WGSLNodeBuilder extends NodeBuilder {
+         return `tsl_biquadraticTexture( ${textureProperty}, ${wrapFunction}( ${uvSnippet} ), ${textureDimension}, u32( ${levelSnippet} ) )`;
      }
 
--    generateTextureLod(texture, textureProperty, uvSnippet, levelSnippet = '0') {
+-    generateTextureLod(texture, textureProperty, uvSnippet, depthSnippet, levelSnippet = '0u') {
 +    generateTextureLod(
 +        texture: Texture,
 +        textureProperty: string,
 +        uvSnippet: string | null,
-+        levelSnippet: string | null = '0',
++        depthSnippet: string | null,
++        levelSnippet: string | null = '0u',
 +    ) {
-         this._include('repeatWrapping');
+         const wrapFunction = this.generateWrapFunction(texture);
+         const textureDimension = this.generateTextureDimension(texture, textureProperty, levelSnippet);
 
-         const dimension =
-@@ -328,7 +341,13 @@ class WGSLNodeBuilder extends NodeBuilder {
-         return `textureLoad( ${textureProperty}, tsl_repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${levelSnippet} ) )`;
+@@ -327,7 +341,13 @@ class WGSLNodeBuilder extends NodeBuilder {
+         return this.generateTextureLoad(texture, textureProperty, coordSnippet, depthSnippet, levelSnippet);
      }
 
 -    generateTextureLoad(texture, textureProperty, uvIndexSnippet, depthSnippet, levelSnippet = '0u') {
@@ -7987,9 +7988,9 @@ index 088d0565..02da8cea 100644
 +        levelSnippet = '0u',
 +    ) {
          if (depthSnippet) {
-             return `textureLoad( ${textureProperty}, ${uvIndexSnippet}, ${depthSnippet}, ${levelSnippet} )`;
+             return `textureLoad( ${textureProperty}, ${uvIndexSnippet}, ${depthSnippet}, u32( ${levelSnippet} ) )`;
          } else {
-@@ -363,11 +382,11 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -369,11 +389,11 @@ class WGSLNodeBuilder extends NodeBuilder {
      }
 
      generateTextureGrad(
@@ -8006,7 +8007,7 @@ index 088d0565..02da8cea 100644
          shaderStage = this.shaderStage,
      ) {
          if (shaderStage === 'fragment') {
-@@ -379,11 +398,11 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -385,11 +405,11 @@ class WGSLNodeBuilder extends NodeBuilder {
      }
 
      generateTextureCompare(
@@ -8023,7 +8024,7 @@ index 088d0565..02da8cea 100644
          shaderStage = this.shaderStage,
      ) {
          if (shaderStage === 'fragment') {
-@@ -396,11 +415,11 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -402,11 +422,11 @@ class WGSLNodeBuilder extends NodeBuilder {
      }
 
      generateTextureLevel(
@@ -8040,7 +8041,7 @@ index 088d0565..02da8cea 100644
          shaderStage = this.shaderStage,
      ) {
          let snippet = null;
-@@ -422,11 +441,11 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -428,11 +448,11 @@ class WGSLNodeBuilder extends NodeBuilder {
      }
 
      generateTextureBias(
@@ -8057,7 +8058,7 @@ index 088d0565..02da8cea 100644
          shaderStage = this.shaderStage,
      ) {
          if (shaderStage === 'fragment') {
-@@ -436,7 +455,7 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -442,7 +462,7 @@ class WGSLNodeBuilder extends NodeBuilder {
          }
      }
 
@@ -8066,7 +8067,7 @@ index 088d0565..02da8cea 100644
          if (node.isNodeVarying === true && node.needsInterpolation === true) {
              if (shaderStage === 'vertex') {
                  return `varyings.${node.name}`;
-@@ -503,7 +522,12 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -509,7 +529,12 @@ class WGSLNodeBuilder extends NodeBuilder {
          }
      }
 
@@ -8080,7 +8081,7 @@ index 088d0565..02da8cea 100644
          const uniformNode = super.getUniformFromNode(node, type, shaderStage, name);
          const nodeData = this.getDataFromNode(node, shaderStage, this.globalCache);
 
-@@ -620,7 +644,7 @@ class WGSLNodeBuilder extends NodeBuilder {
+@@ -626,7 +651,7 @@ class WGSLNodeBuilder extends NodeBuilder {
          return 'vertexIndex';
      }
 
@@ -8089,7 +8090,7 @@ index 088d0565..02da8cea 100644
          const layout = shaderNode.layout;
          const flowData = this.flowShaderNode(shaderNode);
 
-@@ -787,8 +811,8 @@ ${flowData.code}
+@@ -793,8 +818,8 @@ ${flowData.code}
          return snippets.join('\n');
      }
 
@@ -8100,7 +8101,7 @@ index 088d0565..02da8cea 100644
 
          if (shaderStage === 'compute') {
              this.getBuiltin('global_invocation_id', 'id', 'vec3<u32>', 'attribute');
-@@ -874,8 +898,8 @@ ${flowData.code}
+@@ -880,8 +905,8 @@ ${flowData.code}
          return `\n${snippets.join('\n')}\n`;
      }
 
@@ -8111,7 +8112,7 @@ index 088d0565..02da8cea 100644
 
          if (shaderStage === 'vertex') {
              this.getBuiltin('position', 'Vertex', 'vec4<f32>', 'vertex');
-@@ -911,7 +935,7 @@ ${flowData.code}
+@@ -917,7 +942,7 @@ ${flowData.code}
          return shaderStage === 'vertex' ? this._getWGSLStruct('VaryingsStruct', '\t' + code) : code;
      }
 

three.js

@@ -84,7 +84,7 @@ export * from "./accessors/VelocityNode.js";
 export * from "./accessors/VertexColorNode.js";
 
 // display
-export * from "./display/BlendMode.js";
+export * from "./display/BlendModes.js";
 export * from "./display/BumpMapNode.js";
 export * from "./display/ColorAdjustment.js";
 export * from "./display/ColorSpaceNode.js";

types/three/src/nodes/TSL.d.ts

@@ -0,0 +1,32 @@
+import Node from "../core/Node.js";
+import { NodeRepresentation, ShaderNodeObject } from "../tsl/TSLCore.js";
+
+export const blendBurn: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+export const blendDodge: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+export const blendScreen: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+export const blendOverlay: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+export const blendColor: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+/**
+ * @deprecated
+ */
+export const burn: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+/**
+ * @deprecated
+ */
+export const dodge: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+/**
+ * @deprecated
+ */
+export const screen: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;
+
+/**
+ * @deprecated
+ */
+export const overlay: (base: NodeRepresentation, blend: NodeRepresentation) => ShaderNodeObject<Node>;