improve lookbook

Author: spearwolf

apps/lookbook/public/images/demo-preview/clouds.png

@@ -63,7 +63,7 @@ export class CloudSprites {
     }
   }
 
-  frame(state, delta) {
+  frame(_state, delta) {
     this.#animateClouds(delta);
   }
 
@@ -106,17 +106,28 @@ export class CloudSprites {
   #createClouds() {
     let z = this.zRangeMin;
 
+    let cloudIndex;
+    let frame;
+    let x;
+    let y;
+
+    const framesPerCloud = 5;
+
     for (let i = 0; i < this.capacity; i++) {
-      const frame = this.atlas.randomFrame();
+      cloudIndex = i % framesPerCloud;
+
+      if (cloudIndex === 0) {
+        frame = this.atlas.randomFrame();
+        x = this.width * 2 * Math.random() - this.width + this.xOffset;
+        y = this.height * 2 * Math.random() - this.height + this.yOffset;
+      }
 
       const sprite = this.spritePool.createVO();
-      sprite.setSize(frame.coords.width, frame.coords.height);
+      const scale = cloudIndex * (this.gap / framesPerCloud);
+      sprite.setSize(frame.coords.width * scale, frame.coords.height * scale);
       sprite.setFrame(frame);
-      sprite.setPosition(
-        this.width * 2 * Math.random() - this.width + this.xOffset,
-        this.height * 2 * Math.random() - this.height + this.yOffset,
-        z,
-      );
+
+      sprite.setPosition(x, y, z + scale);
 
       sprite.setColor([1, 1, 1, 1]);
 

apps/lookbook/public/images/demo-preview/crosses-r3f.png

@@ -10,7 +10,7 @@ import {
   useTextureAtlas,
 } from '@spearwolf/twopoint5d-r3f';
 import {useEffect, useRef} from 'react';
-import {AdditiveBlending, FrontSide} from 'three';
+import {FrontSide} from 'three';
 import assetsUrl from '../../../demos/utils/assetsUrl.ts';
 import {createFrameLoopComponent} from '../../../demos/utils/createFrameLoopComponent.js';
 import {CloudSprites} from './CloudSprites.js';
@@ -99,18 +99,17 @@ export const Clouds = ({
 
   return (
     <>
-      <TextureAtlas name="clouds" url={assetsUrl('clouds-2.json')} overrideImageUrl={assetsUrl('clouds-2.png')} anisotrophy />
+      <TextureAtlas
+        name="clouds"
+        url={assetsUrl('clouds-2.json')}
+        overrideImageUrl={assetsUrl('clouds-2.png')}
+        anisotrophy
+        linear
+      />
 
       <TexturedSprites>
         <TexturedSpritesGeometry capacity={capacity} ref={geometry}></TexturedSpritesGeometry>
-        <TexturedSpritesMaterial
-          ref={material}
-          depthTest={false}
-          depthWrite={false}
-          blending={AdditiveBlending}
-          side={FrontSide}
-          logShadersToConsole={true}
-        >
+        <TexturedSpritesMaterial ref={material} depthTest={false} depthWrite={false} side={FrontSide} logShadersToConsole={true}>
           <TextureRef name="clouds" attach="colorMap" />
           <ShaderChunks chunks={ShaderLib} />
         </TexturedSpritesMaterial>
@@ -127,8 +126,8 @@ Clouds.defaultProps = {
   xOffset: 0,
   yOffset: 0,
   zOffset: 0,
-  speed: 5,
+  speed: 50,
   fadeInRange: 0.1,
-  fadeOutRange: 0.2,
+  fadeOutRange: 0.1,
   postAlphaMultiplier: 1.0,
 };

apps/lookbook/public/images/demo-preview/crosses.png

@@ -7,25 +7,32 @@ import {Clouds} from './Clouds.jsx';
 
 export default function DemoOrDie() {
   const {speed, alpha} = useControls({
-    speed: {value: 90, min: 0, max: 250, step: 1},
-    alpha: {value: 0.3, min: 0.01, max: 0.99, step: 0.01},
+    speed: {value: 100, min: 0, max: 250, step: 1},
+    alpha: {value: 0.9, min: 0.01, max: 0.99, step: 0.01},
   });
 
   return (
     <Canvas dpr={[1, 2]} camera={{position: [0, 0, 50]}}>
       <Stage2D name="stage1" defaultCamera renderPriority={1}>
-        <ParallaxProjection plane="xy" origin="bottom left" width={1024} height={768} fit="contain" />
+        <ParallaxProjection
+          plane="xy"
+          origin="bottom left"
+          width={1024}
+          height={768}
+          distanceToProjectionPlane={250}
+          fit="contain"
+        />
 
         <Clouds
-          capacity={800}
-          gap={2}
+          capacity={400}
+          gap={5}
           speed={speed}
           width={2500}
           height={600}
-          yOffset={-600}
+          yOffset={-400}
           zOffset={-660}
           fadeInRange={0.1}
-          fadeOutRange={0.1}
+          fadeOutRange={0.2}
           postAlphaMultiplier={alpha}
         />
       </Stage2D>

apps/lookbook/src/components/demos/clouds/CloudSprites.js

@@ -13,14 +13,7 @@ import {title} from './_clouds.json';
     margin: 0;
     height: 100vh;
     overflow-y: hidden;
-    background-color: rgb(100, 118, 136);
-    background: linear-gradient(
-      rgb(0, 28, 48) 0%,
-      rgb(0, 28, 48) 30%,
-      rgb(1, 60, 103) 60%,
-      rgb(68, 29, 100) 70%,
-      rgb(143, 7, 98) 100%
-    );
+    background-color: rgb(155 178 189);
     color: #eee;
   }
 </style>