@ev-ry/fx 0.1.0-rc.1 → 0.1.0-rc.2

package/src/text-scene.js

@@ -1,5 +1,5 @@
-import { MOTION_SAMPLES, RadialMotion } from './motion.js';
-import {attachRasterTexture,applyRasterTextureShader} from './raster-texture-material.js';
+import { MOTION_SAMPLES, RadialMotion } from './motion.js';
+import {attachRasterTexture,applyRasterTextureShader} from './raster-texture-material.js';
 
 const vertexShader = `
   attribute vec3 color;
@@ -25,9 +25,10 @@ const vertexShader = `
     gl_Position = projectionMatrix * viewPosition;
   }
 `;
-const fragmentShader = `
-  uniform float brightness;
-  uniform vec3 tint;
+const fragmentShader = `
+  uniform float brightness;
+  uniform float presentationOpacity;
+  uniform vec3 tint;
   varying vec3 vColor;
   varying vec3 vViewPosition;
   void main() {
@@ -36,12 +37,13 @@ const fragmentShader = `
     float diffuse = mix(0.16, 1.0, pow(facing, 0.72));
     float sheen = 0.16 * pow(facing, 10.0);
     float coverage = clamp(max(max(vColor.r, vColor.g), vColor.b) * brightness, 0.0, 1.0);
-    // Coverage belongs in alpha only; multiplying RGB by it as well darkens thin strokes twice.
-    gl_FragColor = vec4(tint * min(1.0, diffuse + sheen), coverage);
-    // CSS tint and sampled image RGB are linear in Three's working space.
-    // Encode RGB once for the render target; coverage alpha stays unchanged.
-    #include <colorspace_fragment>
-  }
+    // Coverage belongs in alpha only; multiplying RGB by it as well darkens thin strokes twice.
+    gl_FragColor = vec4(tint * min(1.0, diffuse + sheen), coverage);
+    // CSS tint and sampled image RGB are linear in Three's working space.
+    // Encode RGB once for the render target; coverage alpha stays unchanged.
+    #include <colorspace_fragment>
+    gl_FragColor.a *= presentationOpacity;
+  }
 `;
 
 export class TextScene {
@@ -55,7 +57,7 @@ export class TextScene {
     this.glyphs = [];
     this.version = 0;
     this.effectStarted = null;
-    this.uniforms = { angles: { value: this.motion.angles }, radius: { value: 1 }, effectTime: { value: 2 }, brightness: { value: 1.25 }, tint: { value: new THREE.Color(1,1,1) } };
+    this.uniforms = { presentationOpacity:{value:1}, angles: { value: this.motion.angles }, radius: { value: 1 }, effectTime: { value: 2 }, brightness: { value: 1.25 }, tint: { value: new THREE.Color(1,1,1) } };
   }
 
   setText(text) {
@@ -182,7 +184,7 @@ export class TextScene {
   }
 }
 
-// Shared path: one draw per distinct glyph, with one XY offset per occurrence.
+// Shared path: one draw per distinct glyph, with one XY offset per occurrence.
 export class SharedTextScene extends TextScene {
   setText(text) {
     const THREE = this.THREE, scale = this.engine.scale;
@@ -205,7 +207,7 @@ export class SharedTextScene extends TextScene {
     }
     const previous = this.sharedGroups || new Map(), next = new Map();
     this.bounds = {minX:Infinity,maxX:-Infinity,minY:Infinity,maxY:-Infinity};
-    this.bufferBytes = 0;this.textureBytes=0;
+    this.bufferBytes = 0;this.textureBytes=0;
     for (const [glyph, offsets] of groups) {
       let resource = previous.get(glyph);
       if (resource && resource.scale !== scale) { this.releaseShared(resource); resource=null; }
@@ -219,35 +221,35 @@ export class SharedTextScene extends TextScene {
         const shader = vertexShader.replace('attribute float delay;', 'attribute float delay; attribute vec2 glyphOffset;')
           .replace('position + vec3(0.0, baseline, 0.0)', 'position + vec3(glyphOffset, 0.0)')
           .replace('(effectTime - delay)', '(effectTime - fract(delay + dot(glyphOffset, vec2(0.173, 0.317))))');
-        const material = new THREE.ShaderMaterial({uniforms:{...this.uniforms,baseline:{value:0}},
-          vertexShader:shader,fragmentShader,side:THREE.DoubleSide,transparent:true,depthWrite:false,extensions:{derivatives:true}});
-        let releaseTexture=null;
-        if(glyph.rasterSurface){
-          geometry.setAttribute('rasterUV',new THREE.BufferAttribute(glyph.meshData.uvs,2));
-          applyRasterTextureShader(material,{mask:glyph.rasterSurface.mask!==false});
-          releaseTexture=attachRasterTexture(THREE,material,glyph.rasterSurface);
-        }
+        const material = new THREE.ShaderMaterial({uniforms:{...this.uniforms,baseline:{value:0}},
+          vertexShader:shader,fragmentShader,side:THREE.DoubleSide,transparent:true,depthWrite:false,extensions:{derivatives:true}});
+        let releaseTexture=null;
+        if(glyph.rasterSurface){
+          geometry.setAttribute('rasterUV',new THREE.BufferAttribute(glyph.meshData.uvs,2));
+          applyRasterTextureShader(material,{mask:glyph.rasterSurface.mask!==false});
+          releaseTexture=attachRasterTexture(THREE,material,glyph.rasterSurface);
+        }
         const mesh = new THREE.Mesh(geometry,material);mesh.frustumCulled=false;this.scene.add(mesh);
-        resource={mesh,scale,releaseTexture};
+        resource={mesh,scale,releaseTexture};
       }
       const geometry=resource.mesh.geometry;
       let attribute=geometry.getAttribute('glyphOffset');
       // Keep the same GPU buffer while capacity suffices; edits upload only offsets.
-      if (!attribute || attribute.count < offsets.length/2 ||
-          (attribute.array.length > 32 && offsets.length < attribute.array.length / 4)) {
+      if (!attribute || attribute.count < offsets.length/2 ||
+          (attribute.array.length > 32 && offsets.length < attribute.array.length / 4)) {
         // Replacing a BufferAttribute does not release its old GPU buffer in Three.
         if (attribute) geometry.dispose();
-        const capacity = 2 ** Math.ceil(Math.log2(Math.max(8, offsets.length)));
-        attribute=new THREE.InstancedBufferAttribute(new Float32Array(capacity),2);
-        geometry.setAttribute('glyphOffset',attribute);
-      }
-      let changed = geometry.instanceCount !== offsets.length / 2 || attribute.version === 0;
-      for (let i=0; i<offsets.length && !changed; i++) changed = attribute.array[i] !== Math.fround(offsets[i]);
-      if (changed) {
-        attribute.array.set(offsets);
-        attribute.updateRange.offset=0; attribute.updateRange.count=offsets.length;
-        attribute.needsUpdate=true;
-      }
+        const capacity = 2 ** Math.ceil(Math.log2(Math.max(8, offsets.length)));
+        attribute=new THREE.InstancedBufferAttribute(new Float32Array(capacity),2);
+        geometry.setAttribute('glyphOffset',attribute);
+      }
+      let changed = geometry.instanceCount !== offsets.length / 2 || attribute.version === 0;
+      for (let i=0; i<offsets.length && !changed; i++) changed = attribute.array[i] !== Math.fround(offsets[i]);
+      if (changed) {
+        attribute.array.set(offsets);
+        attribute.updateRange.offset=0; attribute.updateRange.count=offsets.length;
+        attribute.needsUpdate=true;
+      }
       geometry.instanceCount=offsets.length/2;
       const box=geometry.boundingBox;
       for(let i=0;i<offsets.length;i+=2){
@@ -256,8 +258,8 @@ export class SharedTextScene extends TextScene {
         this.bounds.minY=Math.min(this.bounds.minY,box.min.y+offsets[i+1]);
         this.bounds.maxY=Math.max(this.bounds.maxY,box.max.y+offsets[i+1]);
       }
-      for(const attr of Object.values(geometry.attributes))this.bufferBytes+=attr.array.byteLength;
-      if(glyph.rasterSurface)this.textureBytes+=glyph.rasterSurface.rgba.byteLength;
+      for(const attr of Object.values(geometry.attributes))this.bufferBytes+=attr.array.byteLength;
+      if(glyph.rasterSurface)this.textureBytes+=glyph.rasterSurface.rgba.byteLength;
       next.set(glyph,resource);
     }
     for(const [glyph,resource] of previous)if(!next.has(glyph))this.releaseShared(resource);
@@ -267,6 +269,6 @@ export class SharedTextScene extends TextScene {
     this.motion.radius=Math.max(.001,Math.hypot(Math.max(Math.abs(b.minX),Math.abs(b.maxX)),Math.max(Math.abs(b.minY),Math.abs(b.maxY))));
     this.uniforms.radius.value=this.motion.radius;this.effectStarted=null;this.uniforms.effectTime.value=2;this.version++;
   }
-  releaseShared(resource){this.scene.remove(resource.mesh);resource.mesh.geometry.dispose();resource.mesh.material.dispose();resource.releaseTexture?.();}
+  releaseShared(resource){this.scene.remove(resource.mesh);resource.mesh.geometry.dispose();resource.mesh.material.dispose();resource.releaseTexture?.();}
   dispose(){for(const resource of this.sharedGroups?.values() || [])this.releaseShared(resource);this.sharedGroups?.clear();super.dispose();}
 }