Chapter 646: Custom HTML-in-canvas presentations

Core Idea

Build a presentation that runs the entering and exiting scenes through a shader using the HTML-in-canvas APIs.

Key Concepts

• When to use this
• Concept
• Boilerplate
• API reference
• Adapting GLSL transitions from gl-transitions.com
• Example implementations
• See also

Code Examples

export type MyShaderProps = {
  intensity?: number;
};

const VERTEX_SHADER = `#version 300 es
in vec2 a_pos;
out vec2 v_uv;
void main() {
  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
  gl_Position = vec4(a_pos, 0.0, 1.0);
}`;

const FRAGMENT_SHADER = `#version 300 es
precision highp float;
uniform sampler2D u_prev;
uniform sampler2D u_next;
uniform float u_time;
in vec2 v_uv;
out vec4 outColor;

void main() {
  // u_time = 1 → fully prev, u_time = 0 → fully next
  outColor = mix(
    texture(u_next, v_uv),
    texture(u_prev, v_uv),
    u_time
  );
}`;

export const myShader: HtmlInCanvasShader<MyShaderProps> = (canvas) => {
  const gl = canvas.getContext('webgl2', {premultipliedAlpha: true});
  if (!gl) {
    throw new Error(
      'WebGL2 unavailable. See https://remotion.dev/docs/troubleshooting/webgl2-context.',
    );
  }

  // Compile + link program, create textures, bind a fullscreen quad...
  // (see "Source references" below for a full implementation)

  return {
    clear: () => {
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    },
    cleanup: () => {
      // Release WebGL resources here
    },
    draw: ({prevImage, nextImage, width, height, time, passedProps}) => {
      // Upload prevImage / nextImage to textures via gl.texImage2D
      // Set uniforms, draw the quad
    },
  };
};

export const myPresentation = makeHtmlInCan
// ...(truncated)

• What it demonstrates: Usage pattern for Custom HTML-in-canvas presentations from the official docs.

Key Takeaways

1. Understand when to use this when working with Custom HTML-in-canvas presentations.
2. Understand concept when working with Custom HTML-in-canvas presentations.
3. Understand boilerplate when working with Custom HTML-in-canvas presentations.
4. Understand api reference when working with Custom HTML-in-canvas presentations.
5. Understand adapting glsl transitions from gl-transitions.com when working with Custom HTML-in-canvas presentations.

Connects To

• Audio Transitions: related page in the Transitions (@remotion/transitions) section.
• Make Html in Canvas Presentation: related page in the Transitions (@remotion/transitions) section.
• Presentations: related page in the Transitions (@remotion/transitions) section.