canvas

loader / imagebitmap

What this shows

Six cubes appear one by one over a rotating grid, three textured through ImageLoader with a red tint and three through ImageBitmapLoader.

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

Differences from three.js

Both sides texture the cubes with the checked-in crate.gif instead of earth_atmos_2048.jpg, whose license is unknown, and load it from a data URL without the cache-busting query string.
EASEL's CanvasTexture accepts only a canvas, so the port wraps the HTMLImageElement and the ImageBitmap in a plain Texture and caches it explicitly with needsUpdate and update(), because the EASEL renderer does not refresh textures on its own.
EASEL applies flipY to ImageBitmap sources, unlike WebGL, so the bitmap textures set flipY to false to undo the imageOrientation 'flipY' decode and stay upright like the image textures.
EASEL calls Texture.onUpdate with no argument, so the ImageBitmap is closed through a closure instead of texture.source.data.
EASEL caches the 256x256 crate at 128x128 and samples it nearest-neighbor with affine warping, so the grain is blockier and bends across each face.
Cube positions and rotations are random, so the two sides place their cubes differently.
Edges are aliased because EASEL has no antialiasing.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


new EASEL.ImageBitmapLoader()
  .setOptions({ imageOrientation: "flipY" })
  .load(url, (imageBitmap) => {
    const texture = new EASEL.Texture(imageBitmap);
    texture.colorSpace = EASEL.SRGBColorSpace;
    texture.flipY = false;
    texture.onUpdate = () => imageBitmap.close();
    texture.needsUpdate = true;
    texture.update().buildBrightnessLevels();
    cubes.add(new EASEL.Mesh(geometry, new EASEL.BasicMaterial({ map: texture })));
  });

group.add(new EASEL.GridHelper(4, 12, 0x888888, 0x444444));
group.rotation.y = performance.now() / 3000;
renderer.prepare(scene, camera);
renderer.render(scene, camera);