hand animation, text, camera paths

demo.js

@@ -3,6 +3,7 @@ import {
   sRGBEncoding,
   PerspectiveCamera,
   ACESFilmicToneMapping,
+  Vector3,
 } from "./third_party/three.module.js";
 import { OrbitControls } from "./third_party/OrbitControls.js";
 import { Effect as NekoEffect } from "./effects/neko.js";
@@ -11,40 +12,12 @@ import * as dat from "./third_party/dat.gui.module.js";
 import { settings } from "./js/settings.js";
 
 import { loadAudio, loaded as allLoaded, onProgress } from "./js/loader.js";
+import { moveToKeyframe } from "./js/paths.js";
 
 const camera = new PerspectiveCamera(50, 1, 0.1, 100);
 
-// async function loadPath(file, callback) {
-//   const res = await fetch(file);
-//   const xmlStr = await res.text();
-//   const parser = new DOMParser();
-//   const dom = parser.parseFromString(xmlStr, "application/xml");
-//   debugger;
-// }
-
-// loadPath("assets/camera_test.dae", (e) => {
-//   debugger;
-// });
 const gui = new dat.GUI();
 
-// function keyframe(t) {
-//   const step = Math.floor((t * 100) / animation.duration) % 100;
-//   const positions = animation.tracks[0].values;
-//   const x = positions[3 * step];
-//   const y = positions[3 * step + 1];
-//   const z = positions[3 * step + 2];
-//   const rotations = animation.tracks[1].values;
-//   const qx = rotations[4 * step];
-//   const qy = rotations[4 * step + 1];
-//   const qz = rotations[4 * step + 2];
-//   const qw = rotations[4 * step + 3];
-//   console.log(qx, qy, qz, qw);
-//   camera.quaternion.set(qx, qy, qz, qw);
-//   // const steps = animation.tracks[-]
-//   // const step = t * steps * animation.duration;
-//   // const keyframe = animation[step];
-// }
-
 const params = {
   blurExposure: 0.3,
   blurRadius: 1,
@@ -89,7 +62,10 @@ const neko = new NekoEffect(renderer, gui);
 
 effects.push(neko);
 
-const controls = new OrbitControls(neko.camera, renderer.domElement);
+camera.position.set(4, 4, 4);
+camera.lookAt(new Vector3(0, 0, 0));
+
+const controls = new OrbitControls(camera, renderer.domElement);
 controls.screenSpacePanning = true;
 
 const loading = document.querySelector("#loading");
@@ -100,6 +76,8 @@ start.addEventListener("click", () => {
 
 function render(t) {
   //keyframe(audio.currentTime);
+  //moveToKeyframe(null, camera, performance.now() / 1000);
+
   neko.final.shader.uniforms.radius.value = params.blurRadius;
   neko.blurStrength = params.blurStrength;
   neko.final.shader.uniforms.exposure.value =
@@ -110,7 +88,9 @@ function render(t) {
   neko.distortion = params.distortion;
   neko.explosion = params.explosion;
 
-  neko.render(audio.currentTime, camera);
+  //const t= audio.currentTime;
+  const et = performance.now() / 1000;
+  neko.render(et, camera);
   composer.render(neko.post.fbo);
   requestAnimationFrame(render);
 }
@@ -122,6 +102,8 @@ function resize() {
   renderer.domElement.style.width = "100%";
   renderer.domElement.style.height = "100%";
 
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
   const dPR = window.devicePixelRatio;
   w *= dPR;
   h *= dPR;
@@ -140,16 +122,19 @@ onProgress((progress) => {
 async function init() {
   console.log("Loading...");
   await allLoaded();
-  const preload = [];
-  for (const effect of effects) {
-    preload.push(effect.initialise());
-  }
-  await Promise.all(preload);
-  resize();
-  loading.style.display = "none";
-  start.style.display = "flex";
-  console.log("Ready...");
-  run();
+  console.log("All loaded");
+  setTimeout(async () => {
+    const preload = [];
+    for (const effect of effects) {
+      preload.push(effect.initialise());
+    }
+    await Promise.all(preload);
+    resize();
+    loading.style.display = "none";
+    start.style.display = "flex";
+    console.log("Ready...");
+    run();
+  }, 100);
 }
 
 function run() {

effects/dark-banner.js

@@ -0,0 +1,56 @@
+import {
+  Mesh,
+  PlaneBufferGeometry,
+  RawShaderMaterial,
+  DoubleSide,
+  CylinderBufferGeometry,
+} from "../third_party/three.module.js";
+import { shader as vertexShader } from "../shaders/ortho-vs.js";
+
+const fragmentShader = `#version 300 es
+precision highp float;
+
+uniform sampler2D text;
+
+in vec2 vUv;
+
+out vec4 color;
+
+vec4 grid( in sampler2D map, in vec2 uv ) {
+  vec2 res = vec2(1024.,256.);
+  float spacing = 3.;
+  vec2 nuv = floor(uv*res/spacing)*spacing/res;
+  float s = texture(map, nuv).r;
+  float w = 2.;
+  float size = (spacing-w) * s;
+  float blur = w * s;
+  vec2 pos = mod(uv*vec2(1024.,256.), vec2(spacing)) - vec2(spacing/2.0);
+  float dist_squared = dot(pos, pos);
+  return 1.-vec4(smoothstep(size, size + blur, dist_squared));
+}
+
+void main() {
+  vec4 grid = grid(text, vUv);
+  color = grid;
+}`;
+
+const material = new RawShaderMaterial({
+  uniforms: {
+    text: { value: null },
+  },
+  transparent: true,
+  depthWrite: false,
+  side: DoubleSide,
+  vertexShader,
+  fragmentShader,
+});
+
+const r = 2048 / (2 * Math.PI) / 100;
+const plane = new Mesh(
+  //new PlaneBufferGeometry(2048 / 100, 512 / 100),
+  new CylinderBufferGeometry(r, r, 512 / 100, 72, 1, true),
+  material
+);
+//plane.position.z = 2;
+
+export { plane };

effects/dark-scene.js

@@ -12,8 +12,6 @@ import {
   RectAreaLight,
   Mesh,
   IcosahedronBufferGeometry,
-  PlaneBufferGeometry,
-  MeshBasicMaterial,
   DoubleSide,
 } from "../third_party/three.module.js";
 import { CylinderMaterial } from "./cylinder-material.js";
@@ -22,25 +20,19 @@ import { RectAreaLightUniformsLib } from "../third_party/RectAreaLightUniformsLi
 RectAreaLightUniformsLib.init();
 import { loadTexture, loadObject, loadDAE } from "../js/loader.js";
 import Maf from "../third_party/Maf.js";
-import { renderText, renderTarget as textRenderTarget } from "./text.js";
+import { Text } from "./text.js";
+import { plane as banner } from "./dark-banner.js";
+import Easings from "../third_party/easings.js";
 
 const scene = new Scene();
+const textRender = new Text("ultra");
 
-const plane = new Mesh(
-  new PlaneBufferGeometry(2048 / 100, 512 / 100),
-  new MeshBasicMaterial({
-    color: 0xffffff,
-    alphaMap: textRenderTarget.texture,
-    transparent: true,
-    side: DoubleSide,
-  })
-);
-plane.position.z = 2;
-scene.add(plane);
+scene.add(banner);
+banner.material.uniforms.text.value = textRender.renderTarget.texture;
 
 const cylinder = new Group();
 const cylinderMat = new CylinderMaterial();
-cylinderMat.uniforms.text.value = textRenderTarget;
+cylinderMat.uniforms.text.value = textRender.renderTarget.texture;
 
 const cubeRenderTarget = new WebGLCubeRenderTarget(4096, {
   format: RGBAFormat,
@@ -109,8 +101,8 @@ loadDAE("assets/neko_fracture.dae", (e) => {
   scene.add(nekoFracture);
 });
 
+const pivot = new Group();
 loadObject("assets/neko.obj", (e) => {
-  const pivot = new Group();
   pivot.position.set(-0.54326, 1.6598, 0);
   const arm = e.children[0];
   arm.position.copy(pivot.position).multiplyScalar(-1);
@@ -189,9 +181,20 @@ function setExplosion(t) {
 let previousText = "";
 function setText(renderer, text) {
   if (text !== previousText) {
-    renderText(renderer, text);
+    textRender.render(renderer, text);
     previousText = text;
   }
 }
 
-export { scene, updateEnv, setDistortion, setExplosion, setText };
+function update(t) {
+  const d = 1.254;
+  const tt = (t % d) / d;
+  const v = Easings.InOutQuint(Maf.parabola(tt, 4));
+  pivot.rotation.x = Maf.mix(0, Math.PI / 2, v);
+}
+
+function init(renderer, camera) {
+  renderer.compile(scene, camera);
+}
+
+export { scene, init, updateEnv, setDistortion, setExplosion, setText, update };

effects/light-scene.js

@@ -17,8 +17,11 @@ import { sakura } from "./sakura.js";
 import { RectAreaLightUniformsLib } from "../third_party/RectAreaLightUniformsLib.js";
 RectAreaLightUniformsLib.init();
 import { addPromise, loadTexture, loadObject } from "../js/loader.js";
+import Maf from "../third_party/Maf.js";
+import Easings from "../third_party/easings.js";
 
 const scene = new Scene();
+//scene.rotation.x = Math.PI / 2;
 scene.add(sakura);
 
 const mapTexture = loadTexture("assets/props.png");
@@ -79,9 +82,9 @@ const nekoMat = new MeshStandardMaterial({
   normalScale: new Vector2(0.05, 0.05),
 });
 
+const pivot = new Group();
 loadObject("assets/neko.obj", (e) => {
   const neko = new Group();
-  const pivot = new Group();
   pivot.position.set(-0.54326, 1.6598, 0);
   const arm = e.children[0];
   arm.position.copy(pivot.position).multiplyScalar(-1);
@@ -144,7 +147,12 @@ function initHdrEnv(renderer) {
   pmremGenerator.compileEquirectangularShader();
 }
 
-function update() {
+function update(t) {
+  const d = 2 * 1.254;
+  const tt = (t % d) / d;
+  const v = Maf.smoothStep(0, 1, Maf.parabola(tt, 4)); //Math.sin(t * 2 * Math.PI + Math.PI / 2);
+  pivot.rotation.x = Maf.mix(0, Math.PI / 2, v);
+
   objectMap["strawberry"].rotation.x += 0.0005;
   objectMap["strawberry"].rotation.y += 0.01;
   objectMap["strawberry"].rotation.z += 0.00075;
@@ -156,4 +164,8 @@ function update() {
   sakura.update();
 }
 
-export { scene, initHdrEnv, update };
+function init(renderer, camera) {
+  renderer.compile(scene, camera);
+}
+
+export { scene, init, initHdrEnv, update };