There Is No Spoon

// This uses glsl-autodiff to deform a mesh and keep

// the normals working properly so the reflections still

// look good. See a too-in-depth blog post on why this ends

// up being necessary:

// https://www.davepagurek.com/blog/realtime-deformation/

//

// - Vertex shader: does the bending

// - Fragment shader: does the reflections

// - setup(): creates sphere map inputs for the fragment shader

// - draw(): composites 3D p5.Graphics onto a 2D canvas to add text on top

​

const vert = `

attribute vec3 aPosition;

attribute vec3 aNormal;

attribute vec2 aTexCoord;

​

uniform mat4 uModelViewMatrix;

uniform mat4 uProjectionMatrix;

uniform mat3 uNormalMatrix;

​

uniform float time;

​

varying vec2 vTexCoord;

varying vec3 vNormal;

varying vec3 vPosition;

​

mat4 axisAngleRotation(vec3 axis, float angle) {

    axis = normalize(axis);

    float s = sin(angle);

    float c = cos(angle);

    float oc = 1.0 - c;

    return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,

                oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,

                oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,

                0.0,                                0.0,                                0.0,                                1.0);

}

​

vec3 adjustNormal(

  vec3 origNormal,

  vec3 displacementNormal,

  vec3 noDisplacementNormal

) {

  // Find the rotation induced by the displacement

  float angle = acos(dot(displacementNormal, noDisplacementNormal));

  vec3 axis = normalize(cross(displacementNormal, noDisplacementNormal));

  mat4 rotation = axisAngleRotation(axis, angle);

​

  // Apply the rotation to the original normal

  vec3 normal = (rotation * vec4(origNormal, 0.)).xyz;

  return normal;

}

​

void main(void) {

  vec4 objSpacePosition = vec4(aPosition, 1.0);

  ${AutoDiff.gen((ad) => {

    const position = ad.vec3Param('objSpacePosition.xyz')

    const x = position.x()

    const y = position.y()

    const z = position.z()

    const position3 = ad.vec3(x, y, z)

    const time = ad.param('time')

    const speedX = 1.5

    const speedY = 2.8

    const smoothstep = (edge0, edge1, x) => {

      const t = x.sub(edge0).div(edge1.sub(edge0)).clamp(0, 1)

      return t.mult(t).mult(t.mult(-2).add(3))

    }

    const rotateX = (pos, angle) => {

      const sa = ad.sin(angle)

      const ca = ad.cos(angle)

      return ad.vec3(

        pos.x(),

        pos.y().mult(ca).sub(pos.z().mult(sa)),

        pos.y().mult(sa).add(pos.z().mult(ca)),

      )

    }

    const twistMix = y.add(100).div(300).clamp(0, 1)

    const twistProgress = smoothstep(

      ad.val(0),

      ad.val(1),

      ad

        .sin(

          time.mult(0.001).sub(y.mult(0.01))

            .add(Math.PI * 1.2)

        )

        .add(

          ad.sin(time.mult(0.00025).add(Math.PI * 1.2))

        )

        .add(1.5)

        .div(3)

    )

    // Add a twist to the spoon

    const offsettedPosition = position.add(

      ad.vec3(0, 0, 20)

    )

    const twistOffset = rotateX(

      offsettedPosition,

      twistMix.mult(twistProgress).mult(Math.PI)

    ).sub(offsettedPosition)

    // Make the whole thing subtly wiggle so the animation

    // is a tad more interesting

    const timeJitter = ad.sin(time.mult(0.0001))

      .add(1)

      .mult(0.5)

    const wiggleOffset = ad.vec3(

      ad.sin(

        y

          .mult(0.05)

          .add(

            time.add(timeJitter).mult(0.002)

          )

          .add(100)

      ).mult(5).mult(timeJitter.sub(1).div(10).clamp(0, 0.5).add(0.5)),

      ad.sin(x.mult(0.1).add(time.mult(0.001))).mult(5),

      ad.sin(

        x.mult(0.005).add(time.mult(0.0006)).add(10)

      ).mult(2)

    )

    // Output the combined offset for the current vertex, plus its derivatives

    // with respect to its original position, which lets us fix its normal

    // after we displace it

    const offset = twistOffset.add(wiggleOffset)

    offset.output('offset')

    offset.outputDeriv('dodx', x)

    offset.outputDeriv('dody', y)

    offset.outputDeriv('dodz', z)

  })}

  objSpacePosition.xyz += offset;

  vec3 slopeX = dodx + vec3(1.0, 0.0, 0.0);

  vec3 slopeYZ = dody + dodz + vec3(0.0, 1.0, 1.0);

  vec3 displacementNormal = normalize(cross(slopeX, slopeYZ));

  vec3 noDisplacementNormal = normalize(vec3(0.,-1.,1.));

  vec3 normal = adjustNormal(

    aNormal,

    displacementNormal,

    noDisplacementNormal

  );

​

  vec4 worldSpacePosition = uModelViewMatrix * objSpacePosition;

  gl_Position = uProjectionMatrix * worldSpacePosition;

  vTexCoord = aTexCoord;

  vPosition = worldSpacePosition.xyz;

  vNormal = uNormalMatrix * normal;

}

`

​

// A run-of-the-mill shader that does sphere mapped reflections

const frag = `

precision mediump float;

varying vec2 vTexCoord;

varying vec3 vNormal;

varying vec3 vPosition;

uniform sampler2D sphereMap;

uniform sampler2D roughSphereMap;

uniform sampler2D texture;

​

const float PI = ${Math.PI.toFixed(10)};

​

float map(float val, float inA, float inB, float outA, float outB) {

  return (val - inA) / (inB - inA) * (outB - outA) + outA;

}

​

vec4 sampleBackground(vec3 normal, sampler2D bg) {

  // x = rho sin(phi) cos(theta)

  // y = rho cos(phi)

  // z = rho sin(phi) sin(theta)

  // rho = 1 after normalization

  float phi = acos(normal.y);

  float sinPhi = sin(phi);

  float theta =

    abs(sinPhi) > 0.0001

      ? acos(normal.x / sinPhi)

      : 0.;

  vec2 coord = vec2(

    map(theta, 0., PI, 0., 1.),

    map(phi, 0., PI, 1., 0.)

  );

  return texture2D(bg, coord);

}

​

vec4 remapShadows(vec4 color) {

  float factor = 2.;

  return vec4(

    pow(color.x, factor),

    pow(color.y, factor),

    pow(color.z, factor),

    color.w

  );

}

​

float fresnel(vec3 direction, vec3 normal, bool invert) {

    vec3 halfDirection = normalize( normal + direction );

    float cosine = dot( halfDirection, direction );

    float product = max( cosine, 0.0 );

    float factor = invert ? 1.0 - pow( product, 5.0 ) : pow( product, 5.0 );

    return factor;

}

​

void main() {

  vec3 normal = normalize(vNormal);

​

  vec3 toSurface = normalize(vPosition);

  vec3 reflectedDir = normalize(reflect(toSurface, normal));

​

  vec4 baseColor = vec4(0.8, 0.88, 0.95, 1.);

  vec4 diffuseColor = sampleBackground(normal, roughSphereMap);

  vec4 reflectionColor = remapShadows(sampleBackground(reflectedDir, sphereMap));

​

  float fresnelStrength = 0.5;

  float reflectionStrength = 0.2;

  float reflectionAmount = reflectionStrength + fresnelStrength * fresnel(toSurface, normal, false);

  vec4 mixedColor = baseColor * diffuseColor + reflectionAmount * reflectionColor;

  gl_FragColor = vec4(mixedColor.rgb, 1.);

}

`

​

let reflection

let sphereMap

let irradianceMap

let irradiance

let texture

let spoon

let webglCanvas

let gradient

function preload() {

  sphereMap = loadImage('office_spheremap.jpg')

  spoon = loadModel('spoon.obj', true)

}

​

function setup() {

  // Keep the main canvas 2D so our text doesn't look too garbage

  createCanvas(600, 600)

  // We'll do the 3D stuff on this and then put it onto the main canvas later

  webglCanvas = createGraphics(width, height, WEBGL);

  webglCanvas.setAttributes({ antialias: true })

  // Calculate the direct light coming from each direction of the sphere map

  const smallWidth = 200

  irradianceMap = createGraphics(smallWidth, Math.floor(smallWidth * (sphereMap.height / sphereMap.width)), WEBGL)

  irradiance = irradianceMap.createShader(irradianceVert, irradianceFrag)

  irradianceMap.shader(irradiance)

  irradiance.setUniform('environmentMap', sphereMap)

  irradianceMap.noStroke()

  irradianceMap.rectMode(irradianceMap.CENTER)

  irradianceMap.rect(0, 0, irradianceMap.width, irradianceMap.height)

  // Set up the main shader that does the twisting + reflection

  reflection = webglCanvas.createShader(vert, frag)

  // Create a radial gradient that we'll use as a fill style for the bg

  gradient = drawingContext.createRadialGradient(

    width / 2, // inner circle x

    height / 2, // inner circle y

    0, // inner circle r

    width / 2, // outer circle x

    height / 2, // outer circle y

    Math.hypot(width/2, height / 2) // outer circle r

  )

  gradient.addColorStop(0, '#e8e3c1')

  gradient.addColorStop(1, '#d4c69f')

}

​

function draw() {

  webglCanvas.clear()

  webglCanvas.reset()

  webglCanvas.shader(reflection)

  reflection.setUniform('sphereMap', sphereMap)

  reflection.setUniform('roughSphereMap', irradianceMap)

  reflection.setUniform('time', millis())

  webglCanvas.noStroke()

  webglCanvas.scale(2)

  webglCanvas.translate(0, -20, 0)

  webglCanvas.scale(1, -1, 1)

  webglCanvas.rotateY(millis() / 3000)

  webglCanvas.model(spoon)

  noStroke()

  // bg gradient

  push()

  drawingContext.fillStyle = gradient

  rect(0, 0, width, height)

  pop()

  // spoon

  image(webglCanvas, 0, 0)

  // Text

  textAlign(CENTER, CENTER)

  fill(0)

  textSize(50)

  textFont('Sacramento')

  text(

    "Ceci n'est pas une cuillère",

    width / 2,

    height * 0.85

  )

}

​

function keyPressed() {

  save()

}