t3d

t3d.js

t3d.js is a web-first, light weight, extendable 3D rendering library.

Note: The current interface is not stable, especially the RenderPass related interface, which may change in subsequent versions.

Usage

Use t3d.js or t3d.min.js in your page:

<script src="t3d.min.js"></script>

or import as es6 module:

import * as t3d from 't3d.module.js';

draw a simple cube:

const width = window.innerWidth || 2;
const height = window.innerHeight || 2;

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const gl = canvas.getContext("webgl2", {
	antialias: true,
	alpha: false
});
const renderer = new t3d.Renderer(gl);
renderer.renderPass.setClearColor(0.1, 0.1, 0.1, 1);
const backRenderTarget = new t3d.RenderTargetBack(canvas);

const scene = new t3d.Scene();

const geometry = new t3d.BoxGeometry(8, 8, 8);
const material = new t3d.PBRMaterial();
const mesh = new t3d.Mesh(geometry, material);
scene.add(mesh);

const ambientLight = new t3d.AmbientLight(0xffffff);
scene.add(ambientLight);

const directionalLight = new t3d.DirectionalLight(0xffffff);
directionalLight.position.set(-5, 5, 5);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);

const camera = new t3d.Camera();
camera.position.set(0, 10, 30);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

function loop(count) {
	requestAnimationFrame(loop);
	
	mesh.euler.y = count / 1000 * .5; // rotate cube

	scene.updateMatrix();
	scene.updateRenderStates(camera);
	scene.updateRenderQueue(camera);

	renderer.renderPass.setRenderTarget(backRenderTarget);
	renderer.renderPass.clear(true, true, false);
	renderer.renderScene(scene, camera);
}
requestAnimationFrame(loop);

Build

Use npm to build:

npm install

npm run build

WebGL2 Support

• Multiple Render Targets. (WebGL 1.0 extension / WebGL 2.0)
• Instancing. (WebGL 1.0 extension / WebGL 2.0)
• Vertex Array Object. (WebGL 1.0 extension / WebGL 2.0)
• Shader Texture LOD. (WebGL 1.0 extension / WebGL 2.0)
• Shadow Sampler. (WebGL 2.0)
• Fragment Depth. (WebGL 1.0 extension / WebGL 2.0)
• Transform Feedback. (TODO)
• Sampler Objects. (TODO)
• 3D Texture. (WebGL 2.0)
• Multisampled Renderbuffers. (WebGL 2.0)