front/src/assets/main.scss

@@ -29,6 +29,8 @@ a[href] {
     &-title,
     &-desc {
         max-width: 40vw;
+        position: relative;
+        z-index: 2;
     }
 
     &-title {
@@ -55,7 +57,6 @@ a[href] {
     &-canvas {
         flex-grow: 1;
         height: 100vh;
-        z-index: -1;
     }
 }
 

front/src/components/Promo/env.vue

@@ -24,6 +24,9 @@ renderer.value.toneMapping = ACESFilmicToneMapping;
 renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio((window.devicePixelRatio || 1) * 2)
 
+const pmremGenerator = new PMREMGenerator(renderer.value);
+pmremGenerator.compileEquirectangularShader();
+
 const loadEnv = async () => {
     try {
         const loader = new GainMapLoader(renderer.value)
@@ -32,15 +35,12 @@ const loadEnv = async () => {
             props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
             props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
         ])
-        const pmremGenerator = new PMREMGenerator(renderer.value);
-        pmremGenerator.compileEquirectangularShader();
 
         const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
         const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
-        // scene.value.background = exrCubeRenderTarget.texture 
-        scene.value.environment = newEnvMap
-        scene.value.environmentIntensity = 1
+        // scene.value.environment = newEnvMap
+        // scene.value.environmentIntensity = 1
 
         result.renderTarget.texture.dispose();
     } catch (error) {
@@ -49,8 +49,8 @@ const loadEnv = async () => {
 
     const c = new Color()
     c.set(props.clear_color || PROMOBG)
-    renderer.value.setClearColor(c)
-    scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
+    // renderer.value.setClearColor(c)
+    // scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
 
     document.documentElement.style.setProperty('--primary-color', props.clear_color)
 
@@ -71,9 +71,11 @@ const loadEnv = async () => {
             ctx.fillStyle = grad;
             ctx.fillRect(0, 0, s, s);
         }
-        const texture = new CanvasTexture(canvas)
+        const texture = new CanvasTexture(canvas);
+        texture.colorSpace = SRGBColorSpace
         texture.needsUpdate = true
         scene.value.background = texture
+        texture.dispose()
         console.log(canvas.toDataURL())
     }
 }