Skip to content

lucatronica/picocad-web-viewer

Repository files navigation

WebGL viewer for picoCAD files

Light-maps

Color palettes and shading can be customized using light-maps.

Enlarged default picoCAD light-map

A light-map must be 32 pixels wide, but can be any height.

Each 2-pixel-column specifies the shading for one color.

  • Each row is a shading level, going from light-to-dark from top-to-bottom.
  • The pair of pixels in each row are used to control dithering.
    • To have no dithering make both colors the same.
  • The order of the columns correspond to the PICO-8 color indices.

The default picoCAD light-map is a good starting point for customization: Default picoCAD light-map

See here for examples of custom light-maps.

Usage

The model viewer can be freely used in other contexts.

// Example usage //

import PicoCADViewer from "./pico-cad-viewer.esm.js";

const myCanvas = document.getElementByID("my-canvas");

const viewer = new PicoCadViewer({
	canvas: myCanvas,
});

// Load models from file, string or URL.
viewer.load("./my-model.txt");

// Draw the model manually or start a draw loop.
if (oneShot) {
	viewer.draw();
} else {
	let spin = 0;

	viewer.startDrawLoop((dt) => {
		// This callback is called before every frame is drawn.
		spin += dt;
		viewer.setTurntableCamera(8, spin, 0.1);
		viewer.setLightDirectionFromCamera();
	});
}

Releases

No releases published

Packages

No packages published