canvas

test / memory

What this shows

Create, render, and dispose a new random wireframe sphere, material, and solid-color texture every frame to exercise resource cleanup.

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

Differences from three.js

EASEL wireframe lines ignore material.map and draw in material.color, so the port also sets the material color to the random texture color; otherwise the white lines would vanish on the white background.
Each frame's texture is a 128 x 128 DataTexture filled with the random color instead of a 256 x 256 CanvasTexture, because EASEL clamps textures to 128 texels and the example must run without a DOM document.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const geometry = new EASEL.SphereGeometry(50, Math.random() * 64, Math.random() * 32);
const texture = new EASEL.DataTexture(pixels, 128, 128);
const material = new EASEL.BasicMaterial({ map: texture, color, wireframe: true });
const mesh = new EASEL.Mesh(geometry, material);

scene.add(mesh);
renderer.prepare(scene, camera);
renderer.render(scene, camera);
scene.remove(mesh);

geometry.dispose();
material.dispose();
texture.dispose();