Chapter 638: makeHtmlInCanvasPresentation()

Core Idea

Allows you to pass a shader to create a HTML-in-canvas-based @remotion/transitions presentation.

Key Concepts

• Arguments
• shader
• clear()
• cleanup()
• draw()
• Return value
• Types
• HtmlInCanvasShader

Code Examples

// @noErrors
import 'remotion';

const VERTEX = `#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 = `#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() {
  outColor = mix(texture(u_next, v_uv), texture(u_prev, v_uv), u_time);
}`;

const myShader: HtmlInCanvasShader<{}> = (canvas) => {
  const gl = canvas.getContext('webgl2', {premultipliedAlpha: true})!;

  const compile = (src: string, type: number) => {
    const sh = gl.createShader(type)!;
    gl.shaderSource(sh, src);
    gl.compileShader(sh);
    return sh;
  };

  const program = gl.createProgram()!;
  gl.attachShader(program, compile(VERTEX, gl.VERTEX_SHADER));
  gl.attachShader(program, compile(FRAGMENT, gl.FRAGMENT_SHADER));
  gl.linkProgram(program);

  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
    gl.STATIC_DRAW,
  );
  const aPos = gl.getAttribLocation(program, 'a_pos');
  gl.enableVertexAttribArray(aPos);
  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

  const prevTex = gl.createTexture();
  const nextTex = gl.createTexture();

  return {
    clear: ()
// ...(truncated)

• What it demonstrates: Usage pattern for makeHtmlInCanvasPresentation() from the official docs.

Key Takeaways

1. Understand arguments when working with makeHtmlInCanvasPresentation().
2. Understand shader when working with makeHtmlInCanvasPresentation().
3. Understand clear() when working with makeHtmlInCanvasPresentation().
4. Understand cleanup() when working with makeHtmlInCanvasPresentation().
5. Understand draw() when working with makeHtmlInCanvasPresentation().

Connects To

• Audio Transitions: related page in the Transitions (@remotion/transitions) section.
• Presentations: related page in the Transitions (@remotion/transitions) section.
• Book Flip: related page in the Transitions (@remotion/transitions) section.