Three 160, importmap only towards CDN, no more Sparc imports for Three components, kicke outdated outliner, replaced by custom simpler highliter

app/assets/sfx/intro.js

@@ -37,7 +37,7 @@ class Intro{
             new Promise((resolve, reject) => {
                 new THREE.TextureLoader()
                     .setPath('/app/assets/images/')
-                    .load('Logo-Emergence.png', resolve, undefined, reject)
+                    .load('Logo-Emergence-bck.png', resolve, undefined, reject)
             })
 
 
@@ -135,7 +135,7 @@ class Intro{
                 attenuationColor: new THREE.Color(0x88ffcc),
                 attenuationDistance: 2,   
                 color: 0x88ffcc, 
-                depthWrite: false,
+                depthWrite: true,
                 depthTest: true,
                 transparent: true,
             })
@@ -221,7 +221,7 @@ class Intro{
         }    
         if (!this.planeEE) {
             const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
-            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.001, depthWrite:true, depthTest:true })
+            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, depthWrite:true, depthTest:true })
             this.matEE.defines = this.matEE.defines || {}
             this.matEE.defines.USE_UV = ""
             this.matEE.onBeforeCompile = shader => {

app/controllers/editors/EditorsController.json

@@ -31,10 +31,7 @@
         "/helpers/validators",
         "/helpers/activeAttributes",
         "/helpers/helpers3D.module",
-        "/helpers/formBuilder",    
+        "/helpers/formBuilder"
-        "/thirdparty/Three/three.module",
-        "/thirdparty/Three/OrbitControls.module",
-        "/thirdparty/Three/tween.module"
     ],
     "assets": {
         "styles": [ 

app/controllers/live/DashboardsController.js

@@ -4,6 +4,7 @@ class DashboardsController extends WindozController {
         super(params)
         this.arenaConfig = app.Assets.Store.json.arenaConfig
         this.eventsMapping = app.Assets.Store.json.eventsMapping
+        console.log('=============>DashboardsController constructor')
     }
 
 
@@ -16,7 +17,7 @@ class DashboardsController extends WindozController {
         const models = {
             agents : new AgentsModel('/agents')
         }
-
+console.log('=============>spaceViewer 0')
         const ttb = new app.LoadedModules.Threetobus({
             eventsMapping: this.eventsMapping,
             sceneSize: this.arenaConfig.arenaSize,
@@ -34,7 +35,7 @@ class DashboardsController extends WindozController {
 
         //TODO: eventsMapping: address child by suffix in assignations
 
-
+console.log('=============>spaceViewer 1')
         this.loadWindow(
             'visualisers/SpaceView', 
             {

app/controllers/live/DashboardsController.json

@@ -22,10 +22,7 @@
         "/helpers/basicDialogs", 
         "/helpers/validators",
         "/helpers/activeAttributes",  
-        "/helpers/helpers3D.module",   
+        "/helpers/helpers3D.module",
-        "/thirdparty/Three/three.module",
-        "/thirdparty/Three/OrbitControls.module",
-        "/thirdparty/Three/tween.module",
         "/thirdparty/Threetobus/threetobus.module"
     ],
     "assets": {

app/controllers/system/systemController.json

@@ -45,9 +45,6 @@
         "json": [
             { "id": "user-roles", "name": "global/user-roles.json" },
             { "id": "user-messages", "name": "system/user-messages.json" }
-        ],
-        "html": [
-            { "id":"toto", "name": "toto.html"}
         ]
     }
 }

app/helpers/helpers3D.module.js

@@ -1,9 +1,10 @@
-import * as THREE from '/app/thirdparty/Three/three.module.js'
+import * as THREE from 'three'
-import { EffectComposer } from '/app/thirdparty/Three/postprocessing/EffectComposer.module.js'
+// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.module.js'
-import { RenderPass } from '/app/thirdparty/Three/postprocessing/RenderPass.module.js'
+// import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.module.js'
-import { OutlinePass } from '/app/thirdparty/Three/postprocessing/OutlinePass.module.js'
+// import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.module.js'
-import { ShaderPass } from '/app/thirdparty/Three/postprocessing/ShaderPass.module.js'
+// import { ShaderPass } from 'three/examples/jsm/shaders/GammaCorrectionShader.module.js'
-import { GammaCorrectionShader } from '/app/thirdparty/Three/shaders/GammaCorrectionShader.module.js'
+// import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.module.js'
+
 
 if(!app.helpers) app.helpers = {}
 /**
@@ -75,10 +76,6 @@ app.helpers.helpers3D = {
             // 2️. Update camera aspect ratio
             this.camera.aspect = width / height
             this.camera.updateProjectionMatrix()
-
-            // 3️. Update postprocessing chain
-            if (this.composer) this.composer.setSize(width, height)
-            if (this.outlinePass) this.outlinePass.setSize(width, height)
         }      
         return needResize
     },
@@ -122,32 +119,71 @@ app.helpers.helpers3D = {
         const top = center.clone().addScaledVector(up, height / 2 + offset)
         return top
     },    
+
     
-    init3DHighlighter(options){
+    outlineMaterial: new THREE.MeshBasicMaterial({
-        if (!this.composer) {
+        color: 0xffff00,
-            this.composer = new EffectComposer(this.renderer)
+        side: THREE.BackSide,
-            this.composer.addPass(new RenderPass(this.scene, this.camera))
+        transparent: true,   
-        }
+        opacity: 0.5, 
-        
+        depthTest: true,
-        if (!this.outlinePass) {
+        depthWrite: false,
-            this.outlinePass = new OutlinePass(
+        stencilWrite: true,
-                new THREE.Vector2(this.canvasEl.innerWidth, this.canvasEl.innerHeight),
+        stencilFunc: THREE.AlwaysStencilFunc,
-                this.scene, this.camera
+        stencilRef: 1,
-            )
+        stencilMask: 0xff,
+        stencilFail: THREE.KeepStencilOp,
+        stencilZFail: THREE.KeepStencilOp,
+        stencilZPass: THREE.ReplaceStencilOp
+    }),
 
-            this.outlinePass.edgeStrength = options.edgeStrength || 3
+    normalStencilMat: new THREE.MeshBasicMaterial({
-            this.outlinePass.visibleEdgeColor.set(options.visibleEdgeColor || 0xffffff)
+        color: 0xffffff,
-            this.outlinePass.edgeGlow = options.edgeGlow || 0
+        stencilWrite: true,
-            this.outlinePass.edgeThickness = options.edgeThickness || 1
+        stencilRef: 0,
-            this.outlinePass.pulsePeriod = options.pulsePeriod || 0
+        stencilFunc: THREE.NotEqualStencilFunc,
+        stencilFail: THREE.KeepStencilOp,
+        stencilZFail: THREE.KeepStencilOp,
+        stencilZPass: THREE.KeepStencilOp
+    }),
 
-            this.composer.addPass(this.outlinePass)
+    highlight3DObj(obj, scene) {
-            this.highlighted3DObjects = []
+        // Scaled up Mesh to stencil
-            this.outlinePass.selectedObjects = this.highlighted3DObjects            
+        obj.traverse(child => {
+            if (child.isMesh) {
+                const inflated = new THREE.Mesh(child.geometry, this.outlineMaterial)
+                inflated.position.copy(child.getWorldPosition(new THREE.Vector3()))
+                inflated.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion()))
+                inflated.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05)
 
-            this.composer.addPass(new ShaderPass(GammaCorrectionShader))
+                scene.add(inflated)
-        }
+                child._outlineMesh = inflated
-        
+            }
+        })
+
+        // Normal Mesh render only if stencil != 1
+        obj.traverse(child => {
+            if (child.isMesh) {
+                child._savedMaterial = child.material
+                child.material = this.normalStencilMat
+            }
+        })
+    },
+
+    clearHighlight3DObj(obj,scene) {
+        obj.traverse(child => {
+            if (child._outlineMesh) {
+                scene.remove(child._outlineMesh)
+                child._outlineMesh.geometry.dispose()
+                child._outlineMesh.material.dispose()
+                delete child._outlineMesh
+            }
+
+            if (child._savedMaterial) {
+                child.material = child._savedMaterial
+                delete child._savedMaterial
+            }
+        })
     },
 
     makePivotAtGeomCenter(object, scene) {

app/thirdparty/buildoz/buildoz.js

@@ -260,10 +260,8 @@ class BZslidePane extends Buildoz {
         }
         this.dragMove = this.dragMove.bind(this)
         this.dragEnd = this.dragEnd.bind(this)
-        this._observer = new MutationObserver(muts => { // Fill with innerHTML or other DOM manip should not allow coating to be removed
+        // Fill with innerHTML or other DOM manip should not allow coating to be removed
-            console.log('mutation...')
+        this._observer = new MutationObserver(muts => { this.coat() })
-            this.coat()
-        })
     }
 
     connectedCallback(){
@@ -277,7 +275,7 @@ class BZslidePane extends Buildoz {
         this._observer.disconnect()
     }
 
-    coat(){ console.log('coat')
+    coat(){ 
         if(this.handle && this.querySelector(this.dispatchEvent.handle)) return
         this._observer.disconnect()  
         if(this.querySelector(this.dispatchEvent.handle)) this.querySelector(this.dispatchEvent.handle).remove()

app/views/editors/KeyframeView.html

@@ -122,7 +122,17 @@
     <article eiccard class="kfArena">
         <section>
             <canvas data-output="kfArenaCanvas"></canvas> 
-            <bz-slidepane side="bottom" data-output="console"></bz-slidepane>
+            <bz-slidepane side="bottom" data-output="console">
+                <div class="inner-console">
+                    <div class="results">
+                        JS 3D Console. for help, type "help"
+                    </div>
+                    <div class="cols-2 commandline">
+                        <textarea type="text" data-output="commands"></textarea>   
+                        <button class="icon-play" data-trigger="execCommand"></button>
+                    </div>      
+                </div>                
+            </bz-slidepane>
         </section>
     </article>
     <article eiccard class="agent-properties">

app/views/editors/KeyframeView.js

@@ -63,17 +63,22 @@ class KeyframeView extends WindozDomContent {
         this.outputs.btnSaveKF.disabled = true  
         this.outputs.kfName.addEventListener('keyup', this.updateKfButtons.bind(this))
         this.currentlySelectedAid = null
-        this.output('console',`
+        // this.output('console',`
-            <div class="inner-console">
+        //     <div class="inner-console">
-                <div class="results">
+        //         <div class="results">
-                    JS 3D Console. for help, type "help"
+        //             JS 3D Console. for help, type "help"
-                </div>
+        //         </div>
-                <div class="cols-2 commandline">
+        //         <div class="cols-2 commandline">
-                    <textarea type="text" style=""></textarea>   
+        //             <textarea type="text" style="" data-output="commands"></textarea>   
-                    <button class="icon-play" data-trigger="execCommand"></button>
+        //             <button class="icon-play" data-trigger="execCommand"></button>
-                </div>      
+        //         </div>      
-            </div>
+        //     </div>
-        `)
+        // `)
+
+    }
+
+    async execCommand(event){
+        console.log('cmd:', this.ouputs.caommands)
     }
 
     async onChangeAgent(event){
@@ -86,7 +91,6 @@ class KeyframeView extends WindozDomContent {
             this.currentAgentType = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
             this.fillAgentProperties('', this.currentAgentType.atp_props)
             // Deselect any on-scene selection
-            this.kfArena.highlighted3DObjects.length = 0
             this.currentlySelectedAid = null
         }
     }
@@ -105,13 +109,13 @@ class KeyframeView extends WindozDomContent {
 
     onclickAgent(obj3D){
         const aid = obj3D.name
-        this.kfArena.highlighted3DObjects.length = 0 //truncate but keep the ref !
         if(this.currentlySelectedAid == aid){ // Deselect
+            this.kfArena.clearHighlight3DObj(obj3D, this.kfArena.scene)
             this.currentlySelectedAid = null
         } else { // Select
             this.currentlySelectedAid = aid
             if(this.kfArena.agents[aid]) {
-                this.kfArena.highlighted3DObjects.push(obj3D)
+                this.kfArena.highlight3DObj(obj3D, this.kfArena.scene)
                 this.fillAgentProperties(aid, this.kfArena.agents[aid].props, this.kfArena.agents[aid].values)
                 this.notUserChange = true
                 this.outputs.agentsSelector.value = this.kfArena.agents[aid].type

app/views/editors/modules/agentPreview.module.js

@@ -1,4 +1,4 @@
-import * as THREE from '/app/thirdparty/Three/three.module.js'
+import * as THREE from 'three' //'/app/thirdparty/Three/three.module.js'
 
 export class AgentPreview{
 

app/views/editors/modules/kfArena.module.js

@@ -1,6 +1,6 @@
-import * as THREE from '/app/thirdparty/Three/three.module.js'
+import * as THREE from 'three' // '/app/thirdparty/Three/three.module.js'
-import { OrbitControls } from '/app/thirdparty/Three/OrbitControls.module.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // '/app/thirdparty/Three/OrbitControls.module.js'
-import * as TWEEN from '/app/thirdparty/Three/tween.module.js'
+import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' //'/app/thirdparty/Three/tween.module.js'
 
 export class kfArena{
     
@@ -56,15 +56,13 @@ export class kfArena{
         this.axes.layers.set(2)
         this.scene.add(this.axes)        
         
-        this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl, stencil: true })
-        this.init3DHighlighter({
+        // this.renderer.physicallyCorrectLights = true
-                edgeStrength: 3,
+        // this.renderer.outputColorSpace = THREE.SRGBColorSpace
-                visibleEdgeColor: 0xffff00,
+        // this.renderer.toneMapping = THREE.ACESFilmicToneMapping
-                edgeGlow: 1,
+        // this.renderer.toneMappingExposure = 1
-                edgeThickness: 4,
+
-                pulsePeriod: 2,
+        this.canvasEl.addEventListener('click', this.onSceneClick.bind(this))      
-        })
-        this.canvasEl.addEventListener('click', this.onSceneClick.bind(this))
     }
     
     startRendering(){
@@ -74,9 +72,8 @@ export class kfArena{
     
     render() {
         TWEEN.update()
-        this.resizeRendererToDisplaySize()
+        const resized = this.resizeRendererToDisplaySize()
-        if(this.composer) this.composer.render()
+        this.renderer.render(this.scene, this.camera)
-        else this.renderer.render(this.scene, this.camera)
         requestAnimationFrame(this.render.bind(this))
     }
     

index.html

@@ -8,14 +8,25 @@
     <script type="importmap">
     { 
         "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+            "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
             "three/examples/jsm/loaders/FontLoader.js": "https://unpkg.com/three@0.160.0/examples/jsm/loaders/FontLoader.js",
             "three/examples/jsm/geometries/TextGeometry.js": "https://unpkg.com/three@0.160.0/examples/jsm/geometries/TextGeometry.js",
-            "three/examples/jsm/loaders/RGBELoader.js": "https://unpkg.com/three@0.160.0/examples/jsm/loaders/RGBELoader.js"
+            "three/examples/jsm/loaders/RGBELoader.js": "https://unpkg.com/three@0.160.0/examples/jsm/loaders/RGBELoader.js",
-            }
+            "three/examples/jsm/controls/OrbitControls.js": "https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js",
+            "three/examples/jsm/libs/tween.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/libs/tween.module.js"
+        }
     }
     </script>    
     <script type="module" src="/app/assets/sfx/intro.js"></script>
+<!--
+            "three/examples/jsm/postprocessing/EffectComposer.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js",
+            "three/examples/jsm/postprocessing/RenderPass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/RenderPass.js",
+            "three/examples/jsm/postprocessing/OutlinePass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/OutlinePass.js",
+            "three/examples/jsm/postprocessing/ShaderPass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/ShaderPass.js",
+            "three/examples/jsm/shaders/GammaCorrectionShader.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/shaders/GammaCorrectionShader.js"
+
+-->
+
 </head>
 
 <body>