canvas

materials / texture / canvas

What this shows

Click and draw in the white box to paint a 2D canvas that textures a rotating cube through a CanvasTexture.

Side by side with the three.js r186 original: webgl_materials_texture_canvas.html

Differences from three.js

EASEL textures are cached at no more than 128x128 texels and sampled nearest-neighbor; the 128x128 drawing canvas fits that limit exactly, but strokes look blocky and warp affinely on the cube instead of being filtered and perspective-correct.
EASEL copies the drawing canvas into its texture cache only when texture.update() runs, so the port calls update() once per frame after needsUpdate is set, where three.js re-uploads the canvas on its own.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const material = new EASEL.BasicMaterial();
const mesh = new EASEL.Mesh(new EASEL.BoxGeometry(200, 200, 200), material);
material.map = new EASEL.CanvasTexture(drawingCanvas);

drawingCanvas.addEventListener("pointermove", (e) => {
  drawingContext.lineTo(e.offsetX, e.offsetY);
  drawingContext.stroke();
  material.map.needsUpdate = true;
});

material.map.update();
renderer.prepare(scene, camera);
renderer.render(scene, camera);