diff --git a/app/assets/images/Logo-Emergence-bck.png b/app/assets/images/Logo-Emergence-bck.png new file mode 100644 index 0000000..6d777cf Binary files /dev/null and b/app/assets/images/Logo-Emergence-bck.png differ diff --git a/app/assets/sfx/intro.js b/app/assets/sfx/intro.js index bc3bbbf..de69014 100644 --- a/app/assets/sfx/intro.js +++ b/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 => { diff --git a/app/controllers/editors/EditorsController.json b/app/controllers/editors/EditorsController.json index 67ddfbb..a8fab88 100644 --- a/app/controllers/editors/EditorsController.json +++ b/app/controllers/editors/EditorsController.json @@ -31,10 +31,7 @@ "/helpers/validators", "/helpers/activeAttributes", "/helpers/helpers3D.module", - "/helpers/formBuilder", - "/thirdparty/Three/three.module", - "/thirdparty/Three/OrbitControls.module", - "/thirdparty/Three/tween.module" + "/helpers/formBuilder" ], "assets": { "styles": [ diff --git a/app/controllers/live/DashboardsController.js b/app/controllers/live/DashboardsController.js index ba19c32..b01d8d0 100644 --- a/app/controllers/live/DashboardsController.js +++ b/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', { diff --git a/app/controllers/live/DashboardsController.json b/app/controllers/live/DashboardsController.json index f4bf03c..16f9af9 100644 --- a/app/controllers/live/DashboardsController.json +++ b/app/controllers/live/DashboardsController.json @@ -22,10 +22,7 @@ "/helpers/basicDialogs", "/helpers/validators", "/helpers/activeAttributes", - "/helpers/helpers3D.module", - "/thirdparty/Three/three.module", - "/thirdparty/Three/OrbitControls.module", - "/thirdparty/Three/tween.module", + "/helpers/helpers3D.module", "/thirdparty/Threetobus/threetobus.module" ], "assets": { diff --git a/app/controllers/system/systemController.json b/app/controllers/system/systemController.json index 0dfb6bd..92f9085 100755 --- a/app/controllers/system/systemController.json +++ b/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"} ] } } \ No newline at end of file diff --git a/app/helpers/helpers3D.module.js b/app/helpers/helpers3D.module.js index 200f0f4..32570de 100644 --- a/app/helpers/helpers3D.module.js +++ b/app/helpers/helpers3D.module.js @@ -1,9 +1,10 @@ -import * as THREE from '/app/thirdparty/Three/three.module.js' -import { EffectComposer } from '/app/thirdparty/Three/postprocessing/EffectComposer.module.js' -import { RenderPass } from '/app/thirdparty/Three/postprocessing/RenderPass.module.js' -import { OutlinePass } from '/app/thirdparty/Three/postprocessing/OutlinePass.module.js' -import { ShaderPass } from '/app/thirdparty/Three/postprocessing/ShaderPass.module.js' -import { GammaCorrectionShader } from '/app/thirdparty/Three/shaders/GammaCorrectionShader.module.js' +import * as THREE from 'three' +// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.module.js' +// import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.module.js' +// import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.module.js' +// import { ShaderPass } from 'three/examples/jsm/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){ - if (!this.composer) { - this.composer = new EffectComposer(this.renderer) - this.composer.addPass(new RenderPass(this.scene, this.camera)) - } - - if (!this.outlinePass) { - this.outlinePass = new OutlinePass( - new THREE.Vector2(this.canvasEl.innerWidth, this.canvasEl.innerHeight), - this.scene, this.camera - ) + outlineMaterial: new THREE.MeshBasicMaterial({ + color: 0xffff00, + side: THREE.BackSide, + transparent: true, + opacity: 0.5, + depthTest: true, + depthWrite: false, + stencilWrite: true, + stencilFunc: THREE.AlwaysStencilFunc, + stencilRef: 1, + stencilMask: 0xff, + stencilFail: THREE.KeepStencilOp, + stencilZFail: THREE.KeepStencilOp, + stencilZPass: THREE.ReplaceStencilOp + }), - this.outlinePass.edgeStrength = options.edgeStrength || 3 - this.outlinePass.visibleEdgeColor.set(options.visibleEdgeColor || 0xffffff) - this.outlinePass.edgeGlow = options.edgeGlow || 0 - this.outlinePass.edgeThickness = options.edgeThickness || 1 - this.outlinePass.pulsePeriod = options.pulsePeriod || 0 + normalStencilMat: new THREE.MeshBasicMaterial({ + color: 0xffffff, + stencilWrite: true, + stencilRef: 0, + stencilFunc: THREE.NotEqualStencilFunc, + stencilFail: THREE.KeepStencilOp, + stencilZFail: THREE.KeepStencilOp, + stencilZPass: THREE.KeepStencilOp + }), - this.composer.addPass(this.outlinePass) - this.highlighted3DObjects = [] - this.outlinePass.selectedObjects = this.highlighted3DObjects + highlight3DObj(obj, scene) { + // Scaled up Mesh to stencil + 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) { diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js index 1539cf0..6107f78 100644 --- a/app/thirdparty/buildoz/buildoz.js +++ b/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 - console.log('mutation...') - this.coat() - }) + // Fill with innerHTML or other DOM manip should not allow coating to be removed + this._observer = new MutationObserver(muts => { 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() diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index 54f52a8..bb3e84f 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -122,7 +122,17 @@
- + +
+
+ JS 3D Console. for help, type "help" +
+
+ + +
+
+
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index d295aa8..6634c56 100644 --- a/app/views/editors/KeyframeView.js +++ b/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',` -
-
- JS 3D Console. for help, type "help" -
-
- - -
-
- `) + // this.output('console',` + //
+ //
+ // JS 3D Console. for help, type "help" + //
+ //
+ // + // + //
+ //
+ // `) + + } + + 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 diff --git a/app/views/editors/modules/agentPreview.module.js b/app/views/editors/modules/agentPreview.module.js index 02367da..233a41d 100644 --- a/app/views/editors/modules/agentPreview.module.js +++ b/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{ diff --git a/app/views/editors/modules/kfArena.module.js b/app/views/editors/modules/kfArena.module.js index 34faa54..53b2435 100644 --- a/app/views/editors/modules/kfArena.module.js +++ b/app/views/editors/modules/kfArena.module.js @@ -1,6 +1,6 @@ -import * as THREE from '/app/thirdparty/Three/three.module.js' -import { OrbitControls } from '/app/thirdparty/Three/OrbitControls.module.js' -import * as TWEEN from '/app/thirdparty/Three/tween.module.js' +import * as THREE from 'three' // '/app/thirdparty/Three/three.module.js' +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // '/app/thirdparty/Three/OrbitControls.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.init3DHighlighter({ - edgeStrength: 3, - visibleEdgeColor: 0xffff00, - edgeGlow: 1, - edgeThickness: 4, - pulsePeriod: 2, - }) - this.canvasEl.addEventListener('click', this.onSceneClick.bind(this)) + this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl, stencil: true }) + // this.renderer.physicallyCorrectLights = true + // this.renderer.outputColorSpace = THREE.SRGBColorSpace + // this.renderer.toneMapping = THREE.ACESFilmicToneMapping + // this.renderer.toneMappingExposure = 1 + + this.canvasEl.addEventListener('click', this.onSceneClick.bind(this)) } startRendering(){ @@ -74,9 +72,8 @@ export class kfArena{ render() { TWEEN.update() - this.resizeRendererToDisplaySize() - if(this.composer) this.composer.render() - else this.renderer.render(this.scene, this.camera) + const resized = this.resizeRendererToDisplaySize() + this.renderer.render(this.scene, this.camera) requestAnimationFrame(this.render.bind(this)) } diff --git a/index.html b/index.html index 91d3afa..7b3eea1 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,25 @@ + +