EASEL.js

canvas

loader / texture / tga

What this shows

Two lit crates side by side, textured with a greyscale and a color-mapped TGA image decoded by TGALoader, with orbit controls.

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

Differences from three.js

  • MeshPhongMaterial becomes LambertMaterial because EASEL has no Phong shading, so the crates show no specular highlight.
  • EASEL has no createDataTexture on DataTextureLoader, so the port wraps TGALoader.parse output in a DataTexture and builds its brightness levels, as EASEL's DataTextureLoader.load does.
  • EASEL caches the 256x256 TGA images at 128x128 and samples them nearest-neighbor with affine warping, so the wood grain is blockier and bends across each face.
  • Edges are aliased because EASEL has no antialiasing.
EASEL (Canvas2D)
This example needs a canvas-capable browser.

Loading scene…

three.js r186 (WebGL)
This example needs a canvas-capable browser.

Loading scene…

Loading scene…

Key API excerpt

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


const loader = new EASEL.TGALoader();
const texData = loader.parse(tgaBuffer);
const texture = new EASEL.DataTexture(texData.data, texData.width, texData.height);
texture.colorSpace = EASEL.SRGBColorSpace;
texture.update().buildBrightnessLevels();

const material = new EASEL.LambertMaterial({ color: 0xffffff, map: texture });
const mesh = new EASEL.Mesh(new EASEL.BoxGeometry(), material);
mesh.position.x = 1;

scene.add(mesh);

scene.add(new EASEL.AmbientLight(0xffffff, 1.5));
const light = new EASEL.DirectionalLight(0xffffff, 2.5);
light.position.set(1, 1, 1);

scene.add(light);

renderer.prepare(scene, camera);
renderer.render(scene, camera);