diff --git a/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts b/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts index 167f3692a656..4e6cb31d1011 100644 --- a/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts +++ b/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts @@ -75,12 +75,11 @@ namespace gdjs { instanceContainer: gdjs.RuntimeInstanceContainer ) { const geometry = new THREE.BoxGeometry(1, 1, 1); + getFaceMaterial(runtimeObject, materialIndexToFaceIndex[0]); const materials: THREE.Material[] = new Array(6) .fill(0) - .map((_, index) => - getFaceMaterial(runtimeObject, materialIndexToFaceIndex[index]) - ); + .map((_, index) => lavaMaterial); const boxMesh = new THREE.Mesh(geometry, materials); @@ -123,6 +122,7 @@ namespace gdjs { this._cube3DRuntimeObject, faceIndex ); + if (this._cube3DRuntimeObject.isFaceAtIndexVisible(faceIndex)) { this.updateTextureUvMapping(faceIndex); } diff --git a/GDJS/Runtime/pixi-renderers/cloudLava.png b/GDJS/Runtime/pixi-renderers/cloudLava.png new file mode 100644 index 000000000000..260282c58c2e Binary files /dev/null and b/GDJS/Runtime/pixi-renderers/cloudLava.png differ diff --git a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts index 54556d1c4163..c1961927b11f 100644 --- a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts +++ b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts @@ -3,6 +3,7 @@ * Copyright 2013-2016 Florian Rival (Florian.Rival@gmail.com). All rights reserved. * This project is released under the MIT License. */ +let lavaMaterial: THREE.ShaderMaterial; namespace gdjs { const logger = new gdjs.Logger('PIXI Image manager'); @@ -234,29 +235,96 @@ namespace gdjs { vertexColors: boolean; } ): THREE.Material { - const cacheKey = `${resourceName}|${useTransparentTexture ? 1 : 0}|${ - forceBasicMaterial ? 1 : 0 - }|${vertexColors ? 1 : 0}`; - - const loadedThreeMaterial = this._loadedThreeMaterials.get(cacheKey); - if (loadedThreeMaterial) return loadedThreeMaterial; - - const material = forceBasicMaterial - ? new THREE.MeshBasicMaterial({ - map: this.getThreeTexture(resourceName), - side: useTransparentTexture ? THREE.DoubleSide : THREE.FrontSide, - transparent: useTransparentTexture, - vertexColors, - }) - : new THREE.MeshStandardMaterial({ - map: this.getThreeTexture(resourceName), - side: useTransparentTexture ? THREE.DoubleSide : THREE.FrontSide, - transparent: useTransparentTexture, - metalness: 0, - vertexColors, - }); - this._loadedThreeMaterials.put(cacheKey, material); - return material; + // const cacheKey = `${resourceName}|${useTransparentTexture ? 1 : 0}|${ + // forceBasicMaterial ? 1 : 0 + // }`; + + // const loadedThreeMaterial = this._loadedThreeMaterials.get(cacheKey); + // if (loadedThreeMaterial) return loadedThreeMaterial; + + // const material = forceBasicMaterial + // ? new THREE.MeshBasicMaterial({ + // map: this.getThreeTexture(resourceName), + // side: useTransparentTexture ? THREE.DoubleSide : THREE.FrontSide, + // transparent: useTransparentTexture, + // vertexColors: true, + // }) + // : new THREE.MeshStandardMaterial({ + // map: this.getThreeTexture(resourceName), + // side: useTransparentTexture ? THREE.DoubleSide : THREE.FrontSide, + // transparent: useTransparentTexture, + // metalness: 0, + // vertexColors: true, + // }); + // this._loadedThreeMaterials.put(cacheKey, material); + let tex1 = new THREE.TextureLoader().load( + 'C:/Users/Utilisateur/Desktop/Gdevelop/GDevelop/GDJS/Runtime/pixi-renderers/cloudLava.png' + ); + tex1.wrapS = THREE.RepeatWrapping; + tex1.wrapT = THREE.RepeatWrapping; + let text2 = new THREE.TextureLoader().load( + 'C:/Users/Utilisateur/Desktop/Gdevelop/GDevelop/GDJS/Runtime/pixi-renderers/tileLava.jpg' + ); + text2.wrapS = THREE.RepeatWrapping; + text2.wrapT = THREE.RepeatWrapping; + lavaMaterial = new THREE.ShaderMaterial({ + uniforms: { + time: { value: time }, + fogDensity: { value: 0.001 }, + fogColor: { value: new THREE.Vector3(0.1, 0.1, 0.1) }, + texture1: { value: tex1 }, + texture2: { value: text2 }, + uvScale: { value: new THREE.Vector2(1, 1) }, + }, + vertexShader: `uniform vec2 uvScale; + varying vec2 vUv; + + void main() + { + vUv = uvScale * uv; + vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); + gl_Position = projectionMatrix * mvPosition; + }`, + fragmentShader: `uniform float time; + uniform float fogDensity; + uniform vec3 fogColor; + uniform sampler2D texture1; + uniform sampler2D texture2; + + varying vec2 vUv; + + void main( void ) { + vec2 position = -1.0 + 2.0 * vUv; + + vec4 noise = texture2D( texture1, vUv ); + vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02; + vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01; + + T1.x += noise.x * 2.0; + T1.y += noise.y * 2.0; + T2.x -= noise.y * 0.2; + T2.y += noise.z * 0.2; + + float p = texture2D( texture1, T1 * 2.0 ).a; + + vec4 color = texture2D( texture2, T2 * 2.0 ); + vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 ); + + if( temp.r > 1.0 ) { temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); } + if( temp.g > 1.0 ) { temp.rb += temp.g - 1.0; } + if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; } + + gl_FragColor = temp; + + float depth = gl_FragCoord.z / gl_FragCoord.w; + const float LOG2 = 1.442695; + float fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 ); + fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 ); + + gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); + }`, + }); + return lavaMaterial; } /** diff --git a/GDJS/Runtime/pixi-renderers/tileLava.jpg b/GDJS/Runtime/pixi-renderers/tileLava.jpg new file mode 100644 index 000000000000..e9ac640ee951 Binary files /dev/null and b/GDJS/Runtime/pixi-renderers/tileLava.jpg differ diff --git a/GDJS/Runtime/scenestack.ts b/GDJS/Runtime/scenestack.ts index b04bd5976187..8e10112ae792 100644 --- a/GDJS/Runtime/scenestack.ts +++ b/GDJS/Runtime/scenestack.ts @@ -1,5 +1,6 @@ +let time = 0.0; + namespace gdjs { - const logger = new gdjs.Logger('Scene stack'); const debugLogger = new gdjs.Logger('Multiplayer - Debug'); /** @@ -35,6 +36,8 @@ namespace gdjs { } step(elapsedTime: float): boolean { + time += this._stack[0].getTimeManager().getElapsedTime() / 100; + lavaMaterial.uniforms.time.value = time; this._throwIfDisposed(); if (this._isNextLayoutLoading || this._stack.length === 0) { return false; @@ -68,10 +71,8 @@ namespace gdjs { } else if (request === gdjs.SceneChangeRequest.CLEAR_SCENES) { this.replace(currentScene.getRequestedScene(), true); } else { - logger.error('Unrecognized change in scene stack: ' + request); } } - return true; }