added monkey head + normal map node (still WIP ) + canvas resize issue (still weird) + combo box set items + mask some elements to stay within render box + metallic & roughness in standard material

Author: bandinopla

public/monkey.glb

@@ -106,8 +106,8 @@ export class Editor {
         this.canvas.height = window.innerHeight * dpr;
 
         // Set CSS size (for display)
-        this.canvas.style.width = `${window.innerWidth}px`;
-        this.canvas.style.height = `${window.innerHeight}px`;
+        this.canvas.style.width = "100vw"; // `${window.innerWidth}px`;
+        this.canvas.style.height = "100vh"// `${window.innerHeight}px`;
 
         this.canvasAspect = this.canvas.height / this.canvas.width;
         this.reset();
@@ -496,6 +496,11 @@ export class Editor {
     } 
 
     protected onResize() { 
+        const dpr = window.devicePixelRatio || 1;
+
+        this.canvas.width = window.innerWidth * dpr;
+        this.canvas.height = window.innerHeight * dpr;
+        
         const newAspectCorrection = ( this.canvas.offsetWidth/this.canvas.offsetHeight )*this.canvasAspect;
 
         const xChange = this.aspectCorrection/newAspectCorrection;

src/Editor.ts

@@ -7,6 +7,7 @@ import { mathFunctions, mathOperations } from "./nodes/operators/list";
 import {  methodsDefinitions2NodeClassDefinitions } from "./nodes/operators/MethodCallNode";
 import { MeshStandardNode } from "./nodes/shader/MeshStandardNode";
 import { ImageTextureNode } from "./nodes/texture/ImageTextureNode";
+import { NormalMapNode } from "./nodes/vector/NormalMapNode";
 
 // Define the type for class constructors that extend BaseType
 type Constructor<T extends Node> = new (...args: any[]) => T;
@@ -57,5 +58,12 @@ export const NodeTypes : NodeGroupType[] = [
         nodes:[
             { TypeClass:ImageTextureNode, name:"Image Texture", id:"image-texture"}
         ]
+    },
+    {
+        group:"Vector",
+        color:Theme.config.groupVector as string,
+        nodes: [
+            { TypeClass:NormalMapNode, name: "Normal Map", id:"normal-map" }
+        ]
     }
 ]

src/EditorNodes.ts

@@ -1,8 +1,13 @@
 import { clamp } from 'three/src/math/MathUtils.js';
 import * as THREE from 'three/webgpu';
 import { WebGPURenderer } from 'three/webgpu';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-export class ThreeScene {
+type SceneEvents = {
+    modelLoaded: {}
+}
+
+export class ThreeScene extends THREE.EventDispatcher<SceneEvents>{
     readonly scene:THREE.Scene;
     readonly camera:THREE.PerspectiveCamera;
     readonly renderer:WebGPURenderer;
@@ -19,6 +24,8 @@ export class ThreeScene {
     private materialNotSet = new THREE.MeshStandardMaterial({ color: 0xcccccc });
 
     constructor() {
+        super();
+
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
@@ -69,6 +76,25 @@ export class ThreeScene {
               this.objs.push( sphere );
               this.objHolder.add( sphere );
 
+        const loader = new GLTFLoader();
+
+        loader.load( import.meta.env.BASE_URL+'monkey.glb', ( gltf ) => {
+        
+            const monkey = gltf.scene.getObjectByName("monkey") as THREE.Mesh;
+            monkey.name = "Monkey";
+            monkey.visible = false;
+
+            this.objs.push( monkey)
+            this.objHolder.add( monkey );
+
+            this.dispatchEvent({ type:"modelLoaded" })
+        
+        }, undefined, function ( error ) {
+        
+            console.error( error );
+        
+        } );
+
 
         this.scene.add( this.objHolder )
 
@@ -119,14 +145,15 @@ export class ThreeScene {
     set currentObjectIndex(index:number) {
         this._currentObjectIndex = clamp( index, 0, this.objs.length-1 );
         this.objs.forEach( (obj,i)=>obj.visible = i==index )
+        console.log(index, this.objs )
     }
 
     render() {
 
         const delta = this.clock.getDelta()
         this.updateLightPosition();
         this.objHolder.rotateY(delta*this.rotationSpeed)
-        this.objHolder.rotateX(-delta*this.rotationSpeed)
+        //this.objHolder.rotateX(-delta*this.rotationSpeed)
         this.renderer.render( this.scene, this.camera );
     }
 

src/ThreeScene.ts

@@ -47,11 +47,30 @@ export class ComboBox extends InteractiveLayoutElement implements IOverlayRender
         this.index = 0;
     }
 
+    protected setListItems( items:string[] ) {
+        const uiItems = items.map( (opt, i)=>new ListItem( opt, false, ()=>this.onOptionClicked(i), this.onScroll.bind(this)  ));
+
+        if( this.listItems )
+        {
+            this.listItems.length = 0;
+            this.listItems.push( ...uiItems );
+
+            uiItems.forEach( item=>item.parent=this.listLayout );
+        }
+
+        return uiItems;
+    }
+
+    updateOptions( newOptions:string[] ) 
+    {
+        this.setListItems( newOptions );
+    }
+
     get overlayBody(){ return this.comboList }
 
     get index() { return this._index; }
     set index( i:number ) {
-        const newIndex = clamp( i, 0, this.options.length-1 );
+        const newIndex = clamp( i, 0, this.listItems.length-1 );
         const changed = newIndex!=this._index;
         this._index = newIndex; 
 
@@ -112,6 +131,7 @@ export class ComboBox extends InteractiveLayoutElement implements IOverlayRender
     }
 
     protected onOptionClicked( i:number ) {
+        console.log("CLICKED", i)
         this.index = i; 
         (this.root as Node).editor.overlay = undefined; 
     }

src/components/ComboBox.ts

@@ -14,7 +14,9 @@ export class HeaderElement extends LayoutElement {
         ctx.fillStyle = this.bgColor;
         ctx.fill()
 
-
+        ctx.save();
+        ctx.clip();
         this.writeText(ctx, this.title, this.fontSize, 10, maxHeight, this.fontColor );
+        ctx.restore();
     }
 }

src/components/Header.ts

@@ -35,16 +35,25 @@ export class Script {
      * Defines a variable or function... if it is not already set. Else, it will not override.
      * @param varName 
      * @param varValue a valid js sintax string or an object that will be stringified to a JSON
+     * @param valueIsFunctionBody the contents of `varValue` will be put in the body of a self executing function.
      * @returns the name of the property passed.
      */
-    define( varName:string, varValue:string|Object ) {
+    define( varName:string, varValue:string|Object, valueIsFunctionBody = false ) {
         if( typeof varValue == "object" ) 
         {
             varValue = JSON.stringify(varValue);
-        } 
+            valueIsFunctionBody = false;
+        }  
+        else 
+        {
+            if( valueIsFunctionBody && !varValue.includes("return") )
+            {
+                throw new Error(`The value of script variable ${varName} MUST contain a return, since it is using valueIsFunctionBody=true`);
+            }
+        }
 
         if( !this.definitions.find(def=>def[0]==varName ))
-             this.definitions.push( [ varName, String( varValue ) ] );
+             this.definitions.push( [ varName, String( valueIsFunctionBody? `(()=>{${varValue}})()` : varValue ) ] );
         return varName;
     }
 

src/export/Script.ts

@@ -21,7 +21,7 @@ export class ScenePreviewNode extends WinNode {
 
         const ambientLightSlider = new DraggableValue("Ambient light", true, 0, 3, 0.1, value =>this.onAmbientLightSlider(value) );
         const rotationSpeedSlider = new DraggableValue("Rotation speed", true, 0, 2, 0.1, value =>scene.rotationSpeed=value);
-        const objType = new ComboBox("Wrapping mode", scene.meshes.map(m=>m.name), value=>scene.currentObjectIndex=value  );
+        const objType = new ComboBox("Object", scene.meshes.map(m=>m.name), value=>scene.currentObjectIndex=value  );
 
         const materialSlots = [
             new MaterialProperty(0),
@@ -50,6 +50,10 @@ export class ScenePreviewNode extends WinNode {
 
         this.errorMaterial = new MeshBasicMaterial({ color:0xff0000 });
 
+        scene.addEventListener("modelLoaded", ()=> {
+            objType.updateOptions( scene.meshes.map(m=>m.name) );
+        });
+
     }
 
     protected onAmbientLightSlider( intensity:number ) {
@@ -87,6 +91,7 @@ export class ScenePreviewNode extends WinNode {
         }
         catch( error )
         {
+            console.error( error )
             this.scene.setMaterial( materialIndex, this.errorMaterial );
         }
     }

src/nodes/preview/ScenePreview.ts

@@ -4,43 +4,78 @@ import { Script } from "../../export/Script";
 import { BaseColorProperty } from "../../properties/BaseColorProperty";
 import { MaterialOutput } from "../../properties/MaterialOutput";
 import { WinNode } from "../WinNode"; 
+import { InputOrValue } from "../../properties/InputOrValue";
+import { MeshStandardNodeMaterial, NormalMapNode } from "three/webgpu";
+import { BasicInputProperty } from "../../properties/BasicInputProperty";
 
 export class MeshStandardNode extends WinNode {
 
     protected colorProperty:BaseColorProperty;
+    protected metallic:InputOrValue;
+    protected roughness:InputOrValue;
+    protected normal:BasicInputProperty;
 
     constructor() {
 
         const colorNodeInput = new BaseColorProperty();
+        const metallic = new InputOrValue(1, { label:"Metallic", min:0, max:1, asBar:true });
+              metallic.multiplyInputWithValue = true;
 
-        super( "MeshStandardMaterial", Theme.config.groupShader, [
+        const roughness = new InputOrValue(1, { label:"Roughness", min:0, max:1, asBar:true });
+              roughness.multiplyInputWithValue = true;
+
+        const normal = new BasicInputProperty(2, "Normal");
+
+
+        super( "MeshStandardNodeMaterial", Theme.config.groupShader, [
             new MaterialOutput(),
-            colorNodeInput
+            colorNodeInput,
+            metallic,
+            roughness,
+            normal
         ] );
 
         this.colorProperty = colorNodeInput;
+        this.metallic = metallic;
+        this.roughness = roughness;
+        this.normal = normal;
     } 
 
     override writeScript( script: Script) { 
 
         const colorNode = this.colorProperty.writeScript( script );
-  
+        const metallicNode = this.metallic.writeScript( script );
+        const roughnessNode = this.roughness.writeScript( script ); 
+        const normalNode = this.normal.writeScript( script ); 
+
+        //const material = new MeshStandardNodeMaterial();  
+
         return script.define( this.nodeName, `()=>{
             const material = new THREE.MeshStandardNodeMaterial();
             material.colorNode = ${colorNode};
+
+            material.metalnessNode = ${metallicNode};
+            material.roughnessNode = ${roughnessNode}; 
+${ normalNode!=""? `material.normalNode = ${normalNode};`:"" }
+
             return material;
         }` );
     }
 
     override serialize(): Record<string, any> {
         return {
             ...super.serialize(),
-            baseColor: "#"+this.colorProperty.baseColor.getHexString()
+            baseColor: "#"+this.colorProperty.baseColor.getHexString(),
+            metallic: this.metallic.value,
+            roughness: this.roughness.value
         }
     }
 
     override unserialize(data: Record<string, any>): void {
         super.unserialize(data);
         if( data.baseColor ) this.colorProperty.baseColor = new Color( data.baseColor );
+
+        this.metallic.value = data.metallic;
+        this.roughness.value = data.roughness;
     }
 }

src/nodes/shader/MeshStandardNode.ts

@@ -40,6 +40,8 @@ export class ImageTextureNode extends TextureTypeNode {
             ${texture}.wrapS = ${ this.extensionPolicy.extensionMode };
             ${texture}.wrapT = ${ this.extensionPolicy.extensionMode };
             ${texture}.mapping = ${ this.mappingPolicy.mappingType };
+            ${texture}.flipY = false; 
+
             ` ) ;
 
         const uv = this.uv.writeScript(script);