WebGL Animation With three.js

Tweening

• We have values for a property at two points in time.
• We can calculate any "in-between" values.

  for (let i = 0; i <= steps; i++) {
    box.position
      .copy(source)
      .lerp(dest, i / steps)
  }

Tweening allows us to define simple animations using interpolation to fill in the blanks.

Tweening: continued

So what else can we tween?

• Scale!

  for (let i = 0; i <= steps; i++) {
    box.scale
      .copy(source)
      .lerp(dest, i / steps)
  }

• Rotation, too!*

  for (let i = 0; i <= steps; i++) {
    box.rotation.x = (
      source.rotation.y +
      (i / steps) * (
        dest.rotation.y -
        source.rotation.y
      )
    )
  }

• Generally we can easily tween any two numeric, continuous values.
• Spatial properties work great for this.

More Tweening:

What about material properties?

• Opacity is pretty straightforward

  for (let i = 0; i <= steps; i++) {
    box.material.opacity = i / steps
  }

• Colour tweening, however...

  ?

  • Option 1, RGB: individually interpolate each of the colour's components.

    for (let i = 0; i <= steps; i++) {
      box.material.color
        .copy(source)
        .lerp(dest, i / steps)
    }

  • Option 2, HSL: same idea, different colour model!

    for (let i = 0; i <= steps; i++) {
      box.material.color
        .copy(source)
        .lerpHSL(dest, i / steps)
    }

Time

Thus far we've interpolated values linearly with a fixed number of steps.

Rendering

const start = performance.now()
const duration = 5000

function renderFrame(now) {
  const delta = now - start
  const t = delta / duration

  myAnimation(t)

  if (delta <= duration) {
    requestAnimationFrame(renderFrame)
  }
}

Timing functions

Now our animated properties are functions of time.

A timing function:

• takes a continuous value in the range [0,1]
• returns a scaled value we can apply to some property

That input represents time, or, completed percentage of an animation a known duration.

Scaling property changes with respect to elapsed time means they are animated independently of the framerate.

Timing functions: examples

• We've covered linear timing:

  const linear = t => t

• How about a quadratic scale?

  const easeInQuad = t => Math.pow(t, 2)

• Use whatever expressions you like

  const easeInOutSine = t => ( Math.sin(2*Math.PI*t) )

Timing functions: complified

As long as you take a number and return a number...

const bounce = t => {
  if (t < 1/2.75) {
    return 7.5625*t*t
  } else if (t < (2/2.75)) {
    return 7.5625*(t-=(1.5/2.75))*t + .75;
  } else if (t < (2.5/2.75)) {
    return 7.5625*(t-=(2.25/2.75))*t + .9375
  } else {
    return 7.5625*(t-=(2.625/2.75))*t + .984375
  }
}

Timing functions: simplified

npm install easing-utils

import { bounce } from 'easing-utils'

Part three dot js

What is it?

• javascript library wrapping WebGL APIs
• scenegraph-based rendering engine
• math math math math math math math math

Object3Ds all the way down

The scene graph is a hierarchy of objects

• its root is a Scene object
• an object has a spatial transformation
• an object may have renderable geometry

• an object may have zero or more child objects

  • object transformations are relative to the parent

Example: dodecahedron net

• the dodecahedron has dodeca faces, organized hierarchically
• each child face's origin lies on an edge of its parent face
• rotating child faces around this origin acts like a hinge

Example: keyboard layout morph

• I once demonstrated an ergonomic keyboard layout
• ... followed by an even cooler ergonomic keyboard layout
collections of physically distinct objects
logically related by shared naming
• individual, simultaneous tweens

Let's have some fun

• Original
• Use a repeating sine wave
• Throw in an extra angle
• And another
• Allow use of negative values
• Amplify the results

Q & A