t3d.js (ThingJS 3D Engine)

The NormalTangentTest model is a diagnostic tool used to verify if a rendering engine correctly calculates and handles tangent vectors at runtime. Unlike models that provide pre-computed tangent vectors, this model relies on the engine to generate them.

How to use this test

1. Environment Setup: Use an environment map with a clear horizon line. This makes it easy to detect if reflections are level or distorted.
2. Successful Result: In a correct implementation, reflections of the horizon line should appear level across both real geometry and normal-mapped surfaces.
3. Failure Detection (Top-down view): When viewing off-axis (e.g., top-down), the illusion of normal-mapping breaks. You should be able to clearly distinguish between real geometry and normal-mapped quads.
4. Failure Detection (Back-side view): For concave geometry (like mirror-bowls), the sky should be visible below the ground in reflections.

If you need to test the rendering of supplied tangent vectors instead of runtime generation, use the NormalTangentMirrorTest model.

The GlamVelvetSofa model is a high-fidelity glTF asset designed to demonstrate advanced material rendering for e-commerce. It utilizes several glTF extensions to achieve realistic velvet textures:

• KHR_materials_variants: Enables switching between five fabric color options (Black, Champagne, Gray, Navy, Pale Pink).
• KHR_materials_sheen: Simulates how velvet microfibers interact with light at glancing angles.
• KHR_materials_specular: Used to colorize reflections on dielectric surfaces (like velvet or silk), which traditional PBR metal-roughness models struggle to replicate.
• KHR_lights_punctual: Provides a directional key light (Intensity: 3) to enhance the sheen response, as sheen effects are more visible under punctual lights than image-based lighting (IBL) alone.
• KHR_texture_transform: Allows for independent scaling of textures, such as repeating the normal map for fabric detail while keeping the ambient occlusion map at a different scale.

This example demonstrates the basic lifecycle of a t3d application: initializing a WebGL2 renderer, creating a scene with a PBR mesh, adding lights and a camera, and running an animation loop.

Key steps in the loop:

1. Update mesh rotation.
2. Call scene.updateMatrix().
3. Call scene.updateRenderStates(camera).
4. Call scene.updateRenderQueue(camera).
5. Call renderer.renderScene(scene, camera, screenRenderTarget).

// Initialize renderer with WebGL2
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);

// Create WebGL2 context and renderer
const gl = canvas.getContext('webgl2', {
  antialias: true,
  alpha: false
});
const renderer = new t3d.WebGLRenderer(gl);
const screenRenderTarget = new t3d.ScreenRenderTarget(canvas);
screenRenderTarget.setColorClearValue(0.1, 0.1, 0.1, 1);

// Create scene
const scene = new t3d.Scene();

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

// Add lighting
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);

// Set up camera
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);

// Animation loop
function loop(count) {
  requestAnimationFrame(loop);

  // Rotate cube
  mesh.euler.y = count / 1000 * .5;

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

  renderer.renderScene(scene, camera, screenRenderTarget);
}
requestAnimationFrame(loop);

To load .basis or .ktx2 textures using KTX2Loader, you must provide the path to the Basis Universal transcoder files. The transcoder requires two specific files to be present in the directory: basis_transcoder.js (the JavaScript wrapper) and basis_transcoder.wasm (the WebAssembly binary).

Use setTranscoderPath() to point the loader to the folder containing these files before calling detectSupport() and load().

const ktx2Loader = new KTX2Loader();
// Point to the directory containing basis_transcoder.js and basis_transcoder.wasm
ktx2Loader.setTranscoderPath( 'examples/jsm/libs/basis/' );

// Detect GPU support for compressed formats
ktx2Loader.detectSupport( renderer );

// Load the texture
ktx2Loader.load( 'diffuse.ktx2', function ( texture ) {
	const material = new THREE.MeshStandardMaterial( { map: texture } );
}, function () {
	console.log( 'onProgress' );
}, function ( e ) {
	console.error( e );
} );

The Query API allows you to perform GPU-side queries (like occlusion or timer queries).

Query Types

Use the QUERY_TYPE constant to specify the type of query:

• ANY_SAMPLES_PASSED: 7000
• ANY_SAMPLES_PASSED_CONSERVATIVE: 7001
• TIME_ELAPSED: 7002

Workflow

1. Create a new Query instance.
2. Use WebGLRenderer.beginQuery(query, target) to start the query.
3. Perform your rendering commands.
4. Use WebGLRenderer.endQuery(query) to finish the query.
5. Check WebGLRenderer.isQueryResultAvailable(query) before calling WebGLRenderer.getQueryResult(query) to avoid blocking the CPU.

Note: The Query class is an EventDispatcher and can be disposed of via .dispose().

import { Query, QUERY_TYPE } |
  from 't3d';

const query = new Query();
renderer.beginQuery(query, QUERY_TYPE.TIME_ELAPSED);
// ... rendering commands ...
renderer.endQuery(query);

// Later in the loop...
if (renderer.isQueryResultAvailable(query)) {
  const result = renderer.getQueryResult(query);
  console.log('Elapsed time:', result);
}
query.dispose();