@needle-tools/materialx 1.0.4-next.90b66fb → 1.0.5-next.6aa8722

package/codegen/register_types.ts

@@ -3,8 +3,6 @@ import { TypeStore } from "@needle-tools/engine"
 
 // Import types
 import { MaterialXMaterial } from "../src/materialx.material.js";
-import { MaterialXUniformUpdate } from "../src/loader/loader.needle.js";
 
 // Register types
 TypeStore.add("MaterialXMaterial", MaterialXMaterial);
-TypeStore.add("MaterialXUniformUpdate", MaterialXUniformUpdate);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/materialx",
-  "version": "1.0.4-next.90b66fb",
+  "version": "1.0.5-next.6aa8722",
   "type": "module",
   "main": "index.ts",
   "exports": {
@@ -14,6 +14,10 @@
       "require": "./codegen/register_types.js"
     }
   },
+  "peerDependencies": {
+    "@needle-tools/engine": "4.x || ^4.6.0-0",
+    "three": "npm:@needle-tools/three@^0.169.5"
+  },
   "devDependencies": {
     "@needle-tools/engine": "4.x",
     "@types/three": "0.169.0",

package/src/materialx.material.ts

@@ -20,6 +20,7 @@ declare type MaterialXMaterialInitParameters = {
 }
 
 type Uniforms = Record<string, IUniform & { needsUpdate?: boolean }>;
+type Precision = "highp" | "mediump" | "lowp";
 
 export class MaterialXMaterial extends ShaderMaterial {
 
@@ -56,14 +57,22 @@ export class MaterialXMaterial extends ShaderMaterial {
         vertexShader = vertexShader.replace(/\bi_normal\b/g, 'normal');
         vertexShader = vertexShader.replace(/\bi_texcoord_0\b/g, 'uv');
         vertexShader = vertexShader.replace(/\bi_texcoord_1\b/g, 'uv1');
+        vertexShader = vertexShader.replace(/\bi_texcoord_2\b/g, 'uv2');
+        vertexShader = vertexShader.replace(/\bi_texcoord_3\b/g, 'uv3');
         vertexShader = vertexShader.replace(/\bi_tangent\b/g, 'tangent');
         vertexShader = vertexShader.replace(/\bi_color_0\b/g, 'color');
 
         // Patch fragmentShader
+        const precision = init.context.getRenderer().capabilities.getMaxPrecision("highp") as Precision;
+        fragmentShader = fragmentShader.replace(/precision mediump float;/g, `precision ${precision} float;`);
+        fragmentShader = fragmentShader.replace(/#define M_FLOAT_EPS 1e-8/g, precision === "highp" ? `#define M_FLOAT_EPS 1e-8` : `#define M_FLOAT_EPS 1e-3`);
+
         fragmentShader = fragmentShader.replace(/\bi_position\b/g, 'position');
         fragmentShader = fragmentShader.replace(/\bi_normal\b/g, 'normal');
         fragmentShader = fragmentShader.replace(/\bi_texcoord_0\b/g, 'uv');
         fragmentShader = fragmentShader.replace(/\bi_texcoord_1\b/g, 'uv1');
+        fragmentShader = fragmentShader.replace(/\bi_texcoord_2\b/g, 'uv2');
+        fragmentShader = fragmentShader.replace(/\bi_texcoord_3\b/g, 'uv3');
         fragmentShader = fragmentShader.replace(/\bi_tangent\b/g, 'tangent');
         fragmentShader = fragmentShader.replace(/\bi_color_0\b/g, 'color');
 
@@ -71,13 +80,23 @@ export class MaterialXMaterial extends ShaderMaterial {
         vertexShader = vertexShader.replace(/in\s+vec3\s+position;/g, '');
         vertexShader = vertexShader.replace(/in\s+vec3\s+normal;/g, '');
         vertexShader = vertexShader.replace(/in\s+vec3\s+uv;/g, '');
+        var hasUv1 = vertexShader.includes('in vec3 uv1;');
         vertexShader = vertexShader.replace(/in\s+vec3\s+uv1;/g, '');
+        var hasUv2 = vertexShader.includes('in vec3 uv2;');
+        vertexShader = vertexShader.replace(/in\s+vec3\s+uv2;/g, '');
+        var hasUv3 = vertexShader.includes('in vec3 uv3;');
+        vertexShader = vertexShader.replace(/in\s+vec3\s+uv3;/g, '');
+        var hasTangent = vertexShader.includes('in vec4 tangent;');
         vertexShader = vertexShader.replace(/in\s+vec4\s+tangent;/g, '');
+        var hasColor = vertexShader.includes('in vec4 color;');
         vertexShader = vertexShader.replace(/in\s+vec4\s+color;/g, '');
 
         // Patch uv 2-component to 3-component (`texcoord_0 = uv;` needs to be replaced with `texcoord_0 = vec3(uv, 0.0);`)
         // TODO what if we actually have a 3-component UV? Not sure what three.js does then
         vertexShader = vertexShader.replace(/texcoord_0 = uv;/g, 'texcoord_0 = vec3(uv, 0.0);');
+        vertexShader = vertexShader.replace(/texcoord_1 = uv1;/g, 'texcoord_1 = vec3(uv1, 0.0);');
+        vertexShader = vertexShader.replace(/texcoord_2 = uv2;/g, 'texcoord_2 = vec3(uv2, 0.0);');
+        vertexShader = vertexShader.replace(/texcoord_3 = uv3;/g, 'texcoord_3 = vec3(uv3, 0.0);');
 
         // Patch units – seems MaterialX uses different units and we end up with wrong light values?
         // result.direction = light.position - position;
@@ -97,6 +116,13 @@ export class MaterialXMaterial extends ShaderMaterial {
     #include <tonemapping_fragment>
     #include <colorspace_fragment>`);
 
+        const defines: Record<string, string> = {};
+        if (hasUv1) defines['USE_UV1'] = '';
+        if (hasUv2) defines['USE_UV2'] = '';
+        if (hasUv3) defines['USE_UV3'] = '';
+        if (hasTangent) defines['USE_TANGENT'] = '';
+        if (hasColor) defines['USE_COLOR'] = '';
+
         const searchPath = ""; // Could be derived from the asset path if needed
         const isTransparent = init.transparent ?? false;
         super({
@@ -109,6 +135,7 @@ export class MaterialXMaterial extends ShaderMaterial {
             side: init.side ? init.side : FrontSide,
             depthTest: true,
             depthWrite: !isTransparent,
+            defines: defines,
         });
 
         Object.assign(this.uniforms, {
@@ -133,11 +160,12 @@ export class MaterialXMaterial extends ShaderMaterial {
 
         this._context = init.context;
 
-        if (debug) {
+        // if (debug) 
+        {
             // Get lighting and environment data from MaterialX environment
-            console.group("[MaterialX]: ", name);
-            console.log("Vertex shader length:", vertexShader.length, vertexShader);
-            console.log("Fragment shader length:", fragmentShader.length, fragmentShader);
+            console.group("[MaterialX]: ", this.name);
+            console.log(`Vertex shader length: ${vertexShader.length}\n`, vertexShader);
+            console.log(`Fragment shader length: ${fragmentShader.length}\n`, fragmentShader);
             console.groupEnd();
         }
     }
@@ -159,10 +187,6 @@ export class MaterialXMaterial extends ShaderMaterial {
 
         const uniforms = this.uniforms as Uniforms;
 
-        // TODO remove. Not sure why this is needed, but without it
-        // we currently get some "swimming" where matrices are not up to date.
-        camera.updateMatrixWorld(true);
-
         // Update standard transformation matrices
         if (uniforms.u_worldMatrix) {
             uniforms.u_worldMatrix.value = object.matrixWorld;

package/src/materialx.ts

@@ -2,7 +2,7 @@ import type { MaterialX as MX } from "./materialx.types.js";
 import MaterialX from "../bin/JsMaterialXGenShader.js";
 import { debug } from "./utils.js";
 import { renderPMREMToEquirect } from "./textureHelper.js";
-import { Light, Object3D, PMREMGenerator, Scene, Texture, WebGLRenderer } from "three";
+import { Light, Mesh, MeshBasicMaterial, Object3D, PlaneGeometry, PMREMGenerator, Scene, Texture, WebGLRenderer } from "three";
 import { registerLights, getLightData, LightData } from "./materialx.helper.js";
 import type { MaterialXMaterial } from "./materialx.material.js";
 
@@ -170,7 +170,28 @@ export class MaterialXEnvironment {
         }
         this._lastUpdateFrame = frame;
         this.updateLighting(false);
-        this._getTextures(scene.environment);
+        const textures = this._getTextures(scene.environment);
+
+        if (debug && !this["_debug"]) {
+            this["_debug"] = true;
+            // Show both of them on cubes in the scene
+            const unlitMat = new MeshBasicMaterial();
+            unlitMat.side = 2;
+            const radianceMat = unlitMat.clone();
+            radianceMat.map = textures.radianceTexture;
+            const planeGeometry = new PlaneGeometry(1, 1, 1, 1)
+            const radianceCube = new Mesh(planeGeometry, radianceMat);
+            const irradianceMat = unlitMat.clone();
+            irradianceMat.map = textures.irradianceTexture;
+            const irradianceCube = new Mesh(planeGeometry, radianceMat);
+            scene.add(radianceCube);
+            scene.add(irradianceCube);
+            radianceCube.name = "MaterialXRadianceCube";
+            radianceCube.position.set(.6, 1, 0);
+            irradianceCube.name = "MaterialXIrradianceCube";
+            irradianceCube.position.set(-.6, 1, 0);
+            console.log("[MaterialX] environment initialized from Needle context", { textures, radianceCube, irradianceCube });
+        }
     }
 
     // Reset the environment to allow re-initialization

package/src/materialx.types.d.ts

@@ -11,7 +11,7 @@ export namespace MaterialX {
             unbindLightShaders(context: any): void;
         };
         createDocument(): Document;
-        readFromXmlString(doc: Document, xml: string, unknown: string): void;
+        readFromXmlString(doc: Document, xml: string, searchPath?: string): void;
         loadStandardLibraries(genContext: GenContext): StandardLibrary;
         isTransparentSurface(renderableElement: any, target: string): boolean;
     }

package/src/utils.ts

@@ -2,7 +2,8 @@ import { Context, getParam } from "@needle-tools/engine";
 import { Mesh } from "three";
 
 export const debug = getParam("debugmaterialx");
-export const debugUpdate = getParam("debugmaterialxupdate");
+export const debugUpdate = debug === "update";
+
 
 /**
  * =====================================