@needle-tools/materialx 1.1.1 → 1.2.0

package/src/{materialx.ts → materialx.js}

@@ -1,30 +1,27 @@
-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 { renderPMREMToEquirect } from "./utils.texture.js";
 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";
-
-export type MaterialXContext = {
-    getTime?(): number,
-    getFrame?(): number,
-}
-
+import { registerLights, getLightData } from "./materialx.helper.js";
 
 export const state = new class {
-    materialXModule: MX.MODULE | null = null;
-    materialXGenerator: any = null;
-    materialXGenContext: any = null;
-    materialXStdLib: any = null;
-    materialXInitPromise: Promise<void> | null = null;
+    /** @type {import("./materialx.types.js").MaterialX.MODULE | null} */
+    materialXModule = null;
+    /** @type {any} */
+    materialXGenerator = null;
+    /** @type {any} */
+    materialXGenContext = null;
+    /** @type {any} */
+    materialXStdLib = null;
+    /** @type {Promise<void> | null} */
+    materialXInitPromise = null;
 }
 
-
 /** 
  * Wait for the MaterialX WASM module to be ready.
+ * @returns {Promise<void>}
  */
-export async function ready(): Promise<void> {
+export async function ready() {
     if (state.materialXInitPromise) {
         return state.materialXInitPromise;
     }
@@ -33,18 +30,19 @@ export async function ready(): Promise<void> {
         if (debug) console.log("[MaterialX] Initializing WASM module...");
         try {
 
-            const urls: Array<string> = await Promise.all([
+            /** @type {Array<string>} */
+            const urls = await Promise.all([
                 /** @ts-ignore */
-                import(`../bin/JsMaterialXCore.wasm?url`).then(m => m.default || m),
+                import( /* @vite-ignore */ `../bin/JsMaterialXCore.wasm?url`).then(m => m.default || m),
                 /** @ts-ignore */
-                import(`../bin/JsMaterialXGenShader.wasm?url`).then(m => m.default || m),
+                import( /* @vite-ignore */ `../bin/JsMaterialXGenShader.wasm?url`).then(m => m.default || m),
                 /** @ts-ignore */
-                import(`../bin/JsMaterialXGenShader.data.txt?url`).then(m => m.default || m),
+                import( /* @vite-ignore */ `../bin/JsMaterialXGenShader.data.txt?url`).then(m => m.default || m),
             ]);
             const [JsMaterialXCore, JsMaterialXGenShader, JsMaterialXGenShader_data] = urls;
 
             const module = await MaterialX({
-                locateFile: (path: string, scriptDirectory: string) => {
+                locateFile: (/** @type {string} */ path, /** @type {string} */ scriptDirectory) => {
                     if (debug) console.debug("[MaterialX]  locateFile called:", { path, scriptDirectory });
 
                     if (path.includes("JsMaterialXCore.wasm")) {
@@ -61,7 +59,7 @@ export async function ready(): Promise<void> {
                 },
             });
             if (debug) console.log("[MaterialX] module loaded", module);
-            state.materialXModule = module as MX.MODULE
+            state.materialXModule = /** @type {import("./materialx.types.js").MaterialX.MODULE} */ (module);
 
             // Initialize shader generator and context
             state.materialXGenerator = module.EsslShaderGenerator.create();
@@ -95,6 +93,8 @@ export async function ready(): Promise<void> {
             // Set a reasonable default for max active lights
             state.materialXGenContext.getOptions().hwMaxActiveLightSources = 4;
 
+            // state.materialXGenContext.getOptions().hwShadowMap = true;
+
             // This prewarms the shader generation context to have all light types
             await registerLights(state.materialXModule, state.materialXGenContext);
 
@@ -106,45 +106,69 @@ export async function ready(): Promise<void> {
     })();
 }
 
-type EnvironmentTextureSet = {
-    radianceTexture: Texture | null;
-    irradianceTexture: Texture | null;
-}
-
+/**
+ * @typedef {Object} EnvironmentTextureSet
+ * @property {Texture | null} radianceTexture
+ * @property {Texture | null} irradianceTexture
+ */
 
 /**
  * MaterialXEnvironment manages the environment settings for MaterialX materials.
  */
 export class MaterialXEnvironment {
 
-    static get(scene: Scene): MaterialXEnvironment | null {
+    /**
+     * @param {Scene} scene
+     * @returns {MaterialXEnvironment | null}
+     */
+    static get(scene) {
         return this.getEnvironment(scene);
     }
-    private static _environments: WeakMap<Scene, MaterialXEnvironment> = new Map();
-    private static getEnvironment(scene: Scene): MaterialXEnvironment {
+
+    /** @type {WeakMap<Scene, MaterialXEnvironment>} */
+    static _environments = new Map();
+
+    /**
+     * @param {Scene} scene
+     * @returns {MaterialXEnvironment}
+     */
+    static getEnvironment(scene) {
         if (this._environments.has(scene)) {
-            return this._environments.get(scene)!;
+            return /** @type {MaterialXEnvironment} */ (this._environments.get(scene));
         }
         const env = new MaterialXEnvironment(scene);
         this._environments.set(scene, env);
         return env;
     }
 
-
-    private _lights: Array<Light> = [];
-    private _lightData: null | LightData[] = null;
-    private _lightCount: number = 0;
-
-    private _initializePromise: Promise<boolean> | null = null;
-    private _isInitialized: boolean = false;
-    private _lastUpdateFrame: number = -1;
-
-    constructor(private _scene: Scene) {
+    /** @type {Array<Light>} */
+    _lights = [];
+    /** @type {import("./materialx.helper.js").LightData[] | null} */
+    _lightData = null;
+    /** @type {number} */
+    _lightCount = 0;
+
+    /** @type {Promise<boolean> | null} */
+    _initializePromise = null;
+    /** @type {boolean} */
+    _isInitialized = false;
+    /** @type {number} */
+    _lastUpdateFrame = -1;
+
+    /**
+     * @param {Scene} _scene
+     */
+    constructor(_scene) {
+        this._scene = _scene;
         if (debug) console.log("[MaterialX] Environment created");
     }
 
-    // Initialize with Needle Engine context
-    async initialize(renderer: WebGLRenderer): Promise<boolean> {
+    /**
+     * Initialize with Needle Engine context
+     * @param {WebGLRenderer} renderer
+     * @returns {Promise<boolean>}
+     */
+    async initialize(renderer) {
         if (this._initializePromise) {
             return this._initializePromise;
         }
@@ -152,7 +176,12 @@ export class MaterialXEnvironment {
         return this._initializePromise;
     }
 
-    update(frame: number, scene: Scene, renderer: WebGLRenderer): void {
+    /**
+     * @param {number} frame
+     * @param {Scene} scene
+     * @param {WebGLRenderer} renderer
+     */
+    update(frame, scene, renderer) {
         if (!this._initializePromise) {
             this.initialize(renderer);
             return;
@@ -179,13 +208,15 @@ export class MaterialXEnvironment {
             const radianceCube = new Mesh(planeGeometry, radianceMat);
             const irradianceMat = unlitMat.clone();
             irradianceMat.map = textures.irradianceTexture;
-            const irradianceCube = new Mesh(planeGeometry, radianceMat);
+            const irradianceCube = new Mesh(planeGeometry, irradianceMat);
             scene.add(radianceCube);
             scene.add(irradianceCube);
             radianceCube.name = "MaterialXRadianceCube";
-            radianceCube.position.set(.6, 1, 0);
+            radianceCube.position.set(.8, 1, .01);
+            radianceCube.scale.set(1.5, 1, 1);
             irradianceCube.name = "MaterialXIrradianceCube";
-            irradianceCube.position.set(-.6, 1, 0);
+            irradianceCube.position.set(-.8, 1, -.01);
+            irradianceCube.scale.set(1.5, 0.98, 1);
             console.log("[MaterialX] environment initialized from Needle context", { textures, radianceCube, irradianceCube });
         }
     }
@@ -209,11 +240,18 @@ export class MaterialXEnvironment {
         this._texturesCache.clear();
     }
 
+    get lights() {
+        return this._lights;
+    }
     get lightData() {
         return this._lightData;
     }
     get lightCount() { return this._lightCount || 0; }
-    getTextures(material: MaterialXMaterial) {
+
+    /**
+     * @param {import("./materialx.material.js").MaterialXMaterial} material
+     */
+    getTextures(material) {
         if (material.envMap) {
             // If the material has its own envMap, we don't use the irradiance texture
             return this._getTextures(material.envMap);
@@ -221,11 +259,18 @@ export class MaterialXEnvironment {
         return this._getTextures(this._scene.environment);
     }
 
-    private _pmremGenerator: PMREMGenerator | null = null;
-    private _renderer: WebGLRenderer | null = null;
-    private readonly _texturesCache: Map<Texture | null, EnvironmentTextureSet> = new Map();
-
-    private async _initialize(renderer: WebGLRenderer): Promise<boolean> {
+    /** @type {PMREMGenerator | null} */
+    _pmremGenerator = null;
+    /** @type {WebGLRenderer | null} */
+    _renderer = null;
+    /** @type {Map<Texture | null, EnvironmentTextureSet>} */
+    _texturesCache = new Map();
+
+    /**
+     * @param {WebGLRenderer} renderer
+     * @returns {Promise<boolean>}
+     */
+    async _initialize(renderer) {
         this._isInitialized = false;
         this._pmremGenerator = new PMREMGenerator(renderer);
         this._renderer = renderer;
@@ -234,11 +279,13 @@ export class MaterialXEnvironment {
         return true;
     }
 
-    private _getTextures(texture: Texture | null | undefined): {
-        radianceTexture: Texture | null,
-        irradianceTexture: Texture | null
-    } {
-        let res: EnvironmentTextureSet | undefined = this._texturesCache.get(texture || null);
+    /**
+     * @param {Texture | null | undefined} texture
+     * @returns {{radianceTexture: Texture | null, irradianceTexture: Texture | null}}
+     */
+    _getTextures(texture) {
+        /** @type {EnvironmentTextureSet | undefined} */
+        let res = this._texturesCache.get(texture || null);
         if (res) {
             return res;
         }
@@ -264,14 +311,18 @@ export class MaterialXEnvironment {
         return res;
     }
 
-    private updateLighting = (collectLights: boolean = false) => {
+    /**
+     * @param {boolean} collectLights
+     */
+    updateLighting = (collectLights = false) => {
         if (!this._scene) return;
         // Find lights in scene
         if (collectLights) {
-            const lights = new Array<Light>();
-            this._scene.traverse((object: Object3D) => {
-                if ((object as Light).isLight && object.visible)
-                    lights.push(object as Light);
+            /** @type {Array<Light>} */
+            const lights = new Array();
+            this._scene.traverse((/** @type {Object3D} */ object) => {
+                if ((/** @type {Light} */ (object)).isLight && object.visible)
+                    lights.push(/** @type {Light} */ (object));
             });
             this._lights = lights;
         }

package/src/materialx.material.d.ts

@@ -0,0 +1,37 @@
+import { BufferGeometry, Camera, Group, IUniform, MaterialParameters, Object3D, Scene, ShaderMaterial, Texture, WebGLRenderer } from "three";
+import { MaterialXContext, MaterialXEnvironment } from "./materialx.js";
+import { Callbacks } from "./materialx.helper.js";
+
+declare type MaterialXMaterialInitParameters = {
+    name: string;
+    shaderName?: string | null;
+    shader: any;
+    loaders: Callbacks;
+    context: MaterialXContext;
+    parameters?: MaterialParameters;
+    debug?: boolean;
+}
+
+type Uniforms = Record<string, IUniform & { needsUpdate?: boolean }>;
+type Precision = "highp" | "mediump" | "lowp";
+
+export declare class MaterialXMaterial extends ShaderMaterial {
+    readonly shaderName: string | null;
+
+    copy(source: MaterialXMaterial): this;
+
+    private _context: MaterialXContext | null;
+    private _shader: any;
+    private _needsTangents: boolean;
+
+    constructor(init?: MaterialXMaterialInitParameters);
+
+    private _missingTangentsWarned: boolean;
+    onBeforeRender(renderer: WebGLRenderer, _scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D, _group: Group): void;
+
+    envMapIntensity: number;
+    envMap: Texture | null;
+    updateUniforms(environment: MaterialXEnvironment, _renderer: WebGLRenderer, object: Object3D, camera: Camera, time?: number, frame?: number): void;
+
+    private updateEnvironmentUniforms(environment: MaterialXEnvironment): void;
+}

package/src/{materialx.material.ts → materialx.material.js}

@@ -1,33 +1,43 @@
-import { BufferGeometry, Camera, FrontSide, GLSL3, Group, IUniform, MaterialParameters, Matrix3, Matrix4, Object3D, Scene, ShaderMaterial, Texture, Vector3, WebGLRenderer } from "three";
+import { BufferGeometry, Camera, FrontSide, GLSL3, Group, Matrix3, Matrix4, Object3D, Scene, ShaderMaterial, Texture, Vector3, WebGLRenderer } from "three";
 import { debug, getFrame, getTime } from "./utils.js";
-import { MaterialXContext, MaterialXEnvironment } from "./materialx.js";
-import { generateMaterialPropertiesForUniforms, getUniformValues, Loaders } from "./materialx.helper.js";
+import { MaterialXEnvironment } from "./materialx.js";
+import { generateMaterialPropertiesForUniforms, getUniformValues } from "./materialx.helper.js";
 import { cloneUniforms, cloneUniformsGroups } from "three/src/renderers/shaders/UniformsUtils.js";
 
-
 // Add helper matrices for uniform updates (similar to MaterialX example)
 const normalMat = new Matrix3();
 const worldViewPos = new Vector3();
 
-declare type MaterialXMaterialInitParameters = {
-    name: string,
-    shader: any,
-    loaders: Loaders,
-    context: MaterialXContext,
-    // Optional parameters
-    parameters?: MaterialParameters,
-}
-
-type Uniforms = Record<string, IUniform & { needsUpdate?: boolean }>;
-type Precision = "highp" | "mediump" | "lowp";
+/**
+ * @typedef {Object} MaterialXMaterialInitParameters
+ * @property {string} name
+ * @property {string | null} [shaderName] - Optional name of the shader
+ * @property {any} shader
+ * @property {import('./materialx.helper.js').Callbacks} loaders
+ * @property {import('./materialx.js').MaterialXContext} context
+ * @property {import('three').MaterialParameters} [parameters] - Optional parameters
+ * @property {boolean} [debug] - Debug flag
+ */
+
+/**
+ * @typedef {"highp" | "mediump" | "lowp"} Precision
+ */
 
 export class MaterialXMaterial extends ShaderMaterial {
 
-    copy(source: MaterialXMaterial): this {
+    /** The original name of the shader 
+     * @type {string | null} */
+    shaderName = null;
+
+    /**
+     * @param {MaterialXMaterial} source
+     * @returns {this}
+     */
+    copy(source) {
         super.copy(source);
         this._context = source._context;
         this._shader = source._shader;
-        this.uniforms = cloneUniforms(source.uniforms) as Uniforms;
+        this.uniforms = cloneUniforms(source.uniforms);
         this.uniformsGroups = cloneUniformsGroups(source.uniformsGroups);
         this.envMapIntensity = source.envMapIntensity;
         this.envMap = source.envMap;
@@ -37,10 +47,17 @@ export class MaterialXMaterial extends ShaderMaterial {
         return this;
     }
 
-    private _context: MaterialXContext | null = null;
-    private _shader: any;
+    /** @type {import('./materialx.js').MaterialXContext | null} */
+    _context = null;
+    /** @type {any} */
+    _shader = null;
+    /** @type {boolean} */
+    _needsTangents = false;
 
-    constructor(init?: MaterialXMaterialInitParameters) {
+    /**
+     * @param {MaterialXMaterialInitParameters} [init]
+     */
+    constructor(init) {
 
         // TODO: we need to properly copy the uniforms and other properties from the source material
         if (!init) {
@@ -71,7 +88,8 @@ export class MaterialXMaterial extends ShaderMaterial {
         vertexShader = vertexShader.replace(/\bi_color_0\b/g, 'color');
 
         // Patch fragmentShader
-        const precision = init.parameters?.precision || "highp" as Precision;
+        const precision = init.parameters?.precision || "highp";
+        vertexShader = vertexShader.replace(/precision mediump float;/g, `precision ${precision} float;`);
         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`);
 
@@ -84,9 +102,16 @@ export class MaterialXMaterial extends ShaderMaterial {
         fragmentShader = fragmentShader.replace(/\bi_tangent\b/g, 'tangent');
         fragmentShader = fragmentShader.replace(/\bi_color_0\b/g, 'color');
 
+        // Capture some vertex shader properties
+        const uv_is_vec2 = vertexShader.includes('in vec2 uv;'); // check if uv is vec2; e.g. https://matlib.gpuopen.com/main/materials/all?material=da6ec531-f5c1-4790-ac14-8a5c51d0314e
+        const uv1_is_vec2 = vertexShader.includes('in vec2 uv1;');
+        const uv2_is_vec2 = vertexShader.includes('in vec2 uv2;');
+        const uv3_is_vec2 = vertexShader.includes('in vec2 uv3;');
+
         // Remove `in vec3 position;` and so on since they're already declared by ShaderMaterial
         vertexShader = vertexShader.replace(/in\s+vec3\s+position;/g, '');
         vertexShader = vertexShader.replace(/in\s+vec3\s+normal;/g, '');
+        vertexShader = vertexShader.replace(/in\s+vec2\s+uv;/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, '');
@@ -101,10 +126,10 @@ export class MaterialXMaterial extends ShaderMaterial {
 
         // 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);');
+        if (!uv_is_vec2) vertexShader = vertexShader.replace(/texcoord_0 = uv;/g, 'texcoord_0 = vec3(uv, 0.0);');
+        if (!uv1_is_vec2) vertexShader = vertexShader.replace(/texcoord_1 = uv1;/g, 'texcoord_1 = vec3(uv1, 0.0);');
+        if (!uv2_is_vec2) vertexShader = vertexShader.replace(/texcoord_2 = uv2;/g, 'texcoord_2 = vec3(uv2, 0.0);');
+        if (!uv3_is_vec2) 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;
@@ -124,7 +149,7 @@ export class MaterialXMaterial extends ShaderMaterial {
     #include <tonemapping_fragment>
     #include <colorspace_fragment>`);
 
-        const defines: Record<string, string> = {};
+        const defines = {};
         if (hasUv1) defines['USE_UV1'] = '';
         if (hasUv2) defines['USE_UV2'] = '';
         if (hasUv3) defines['USE_UV3'] = '';
@@ -144,8 +169,10 @@ export class MaterialXMaterial extends ShaderMaterial {
             defines: defines,
             ...init.parameters, // Spread any additional parameters passed to the material
         });
+        this.shaderName = init.shaderName || null;
         this._context = init.context;
         this._shader = init.shader;
+        this._needsTangents = vertexShader.includes('in vec4 tangent;') || vertexShader.includes('in vec3 tangent;');
 
         Object.assign(this.uniforms, {
             ...getUniformValues(init.shader.getStage('vertex'), init.loaders, searchPath),
@@ -156,6 +183,9 @@ export class MaterialXMaterial extends ShaderMaterial {
             u_viewPosition: { value: new Vector3() },
             u_worldInverseTransposeMatrix: { value: new Matrix4() },
 
+            // u_shadowMatrix: { value: new Matrix4() },
+            // u_shadowMap: { value: null, type: 't' }, // Shadow map
+
             u_envMatrix: { value: new Matrix4() },
             u_envRadiance: { value: null, type: 't' },
             u_envRadianceMips: { value: 8, type: 'i' },
@@ -171,7 +201,7 @@ export class MaterialXMaterial extends ShaderMaterial {
         generateMaterialPropertiesForUniforms(this, init.shader.getStage('vertex'));
 
 
-        if (debug) {
+        if (debug || init.debug) {
             // Get lighting and environment data from MaterialX environment
             console.group("[MaterialX]: ", this.name);
             console.log(`Vertex shader length: ${vertexShader.length}\n`, vertexShader);
@@ -180,22 +210,50 @@ export class MaterialXMaterial extends ShaderMaterial {
         }
     }
 
-    onBeforeRender(_renderer: WebGLRenderer, _scene: Scene, camera: Camera, _geometry: BufferGeometry, object: Object3D, _group: Group): void {
+    /** @type {boolean} */
+    _missingTangentsWarned = false;
+
+    /**
+     * @param {WebGLRenderer} renderer
+     * @param {Scene} _scene
+     * @param {Camera} camera
+     * @param {BufferGeometry} geometry
+     * @param {Object3D} object
+     * @param {Group} _group
+     */
+    onBeforeRender(renderer, _scene, camera, geometry, object, _group) {
+        if (this._needsTangents && !geometry.attributes.tangent) {
+            if (!this._missingTangentsWarned) {
+                this._missingTangentsWarned = true;
+                console.warn(`[MaterialX] Tangents are required for this material (${this.name}) but not present in the geometry.`);
+                // TODO: can we compute tangents here?
+            }
+        }
         const time = this._context?.getTime?.() || getTime();
         const frame = this._context?.getFrame?.() || getFrame();
         const env = MaterialXEnvironment.get(_scene);
         if (env) {
-            env.update(frame, _scene, _renderer);
-            this.updateUniforms(env, object, camera, time, frame);
+            env.update(frame, _scene, renderer);
+            this.updateUniforms(env, renderer, object, camera, time, frame);
         }
     }
 
+    /** @type {number} */
+    envMapIntensity = 1.0; // Default intensity for environment map
+    /** @type {Texture | null} */
+    envMap = null; // Environment map texture, can be set externally
 
-    envMapIntensity: number = 1.0; // Default intensity for environment map
-    envMap: Texture | null = null; // Environment map texture, can be set externally
-    updateUniforms = (environment: MaterialXEnvironment, object: Object3D, camera: Camera, time?: number, frame?: number) => {
+    /**
+     * @param {MaterialXEnvironment} environment
+     * @param {WebGLRenderer} _renderer
+     * @param {Object3D} object
+     * @param {Camera} camera
+     * @param {number} [time]
+     * @param {number} [frame]
+     */
+    updateUniforms = (environment, _renderer, object, camera, time, frame) => {
 
-        const uniforms = this.uniforms as Uniforms;
+        const uniforms = this.uniforms;
 
         // Update standard transformation matrices
         if (uniforms.u_worldMatrix) {
@@ -208,15 +266,23 @@ export class MaterialXMaterial extends ShaderMaterial {
             uniforms.u_viewProjectionMatrix.needsUpdate = true;
         }
 
+        if (uniforms.u_worldInverseTransposeMatrix) {
+            uniforms.u_worldInverseTransposeMatrix.value.setFromMatrix3(normalMat.getNormalMatrix(object.matrixWorld));
+            uniforms.u_worldInverseTransposeMatrix.needsUpdate = true;
+        }
+
         if (uniforms.u_viewPosition) {
             uniforms.u_viewPosition.value.copy(camera.getWorldPosition(worldViewPos));
             uniforms.u_viewPosition.needsUpdate = true;
         }
 
-        if (uniforms.u_worldInverseTransposeMatrix) {
-            uniforms.u_worldInverseTransposeMatrix.value.setFromMatrix3(normalMat.getNormalMatrix(object.matrixWorld));
-            uniforms.u_worldInverseTransposeMatrix.needsUpdate = true;
-        }
+        // if (uniforms.u_shadowMap) {
+        //     const light = environment.lights?.[2] || null;
+        //     uniforms.u_shadowMatrix.value = light?.shadow?.matrix.clone().premultiply(object.matrixWorld.clone()).invert();
+        //     uniforms.u_shadowMap.value = light.shadow?.map || null;
+        //     uniforms.u_shadowMap.needsUpdate = true;
+        //     console.log("[MaterialX] Renderer shadow map updated", light);
+        // }
 
         // Update time uniforms
         if (uniforms.u_time) {
@@ -234,9 +300,13 @@ export class MaterialXMaterial extends ShaderMaterial {
         this.uniformsNeedUpdate = true;
     }
 
-    private updateEnvironmentUniforms = (environment: MaterialXEnvironment) => {
+    /**
+     * @private
+     * @param {MaterialXEnvironment} environment
+     */
+    updateEnvironmentUniforms = (environment) => {
 
-        const uniforms = this.uniforms as Uniforms;
+        const uniforms = this.uniforms;
 
         // Get lighting data from environment
         const lightData = environment.lightData || null;

package/src/utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Get URL parameter value
+ */
+export function getParam(name: string): boolean | string;
+
+export const debug: boolean | string;
+export const debugUpdate: boolean;
+
+/**
+ * Get current time in seconds
+ */
+export function getTime(): number;
+
+/**
+ * Get current frame number
+ */
+export function getFrame(): number;

package/src/{utils.ts → utils.js}

@@ -1,4 +1,12 @@
-export function getParam(name: string) {
+// import { BufferGeometry } from 'three';
+// import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+/**
+ * Get URL parameter value
+ * @param {string} name - Parameter name
+ * @returns {boolean|string} Parameter value or false if not found
+ */
+export function getParam(name) {
     const urlParams = new URLSearchParams(window.location.search);
     const param = urlParams.get(name);
     if (param == null || param === "0" || param === "false") return false;
@@ -9,21 +17,30 @@ export function getParam(name: string) {
 export const debug = getParam("debugmaterialx");
 export const debugUpdate = debug === "update";
 
-
 let time = 0;
+/**
+ * Get current time in seconds
+ * @returns {number} Current time
+ */
 export function getTime() {
     return time;
 }
+
 let frame = 0;
+/**
+ * Get current frame number
+ * @returns {number} Current frame
+ */
 export function getFrame() {
     return frame;
 }
 
-const performance = window.performance || (window as any).webkitPerformance || (window as any).mozPerformance;
+const performance = window.performance || /** @type {any} */ (window).webkitPerformance || /** @type {any} */ (window).mozPerformance;
+
 function updateTime() {
     time = performance.now() / 1000; // Convert to seconds
     frame++;
     window.requestAnimationFrame(updateTime);
 }
-window.requestAnimationFrame(updateTime);
 
+window.requestAnimationFrame(updateTime);