Textures and Assets

This guide assumes your scene already renders from First Scene. Here, we focus only on bringing external assets into that scene.

What You Will Add

Step 1: Import Loaders

import { TextureLoader, OBJLoader, GLTFLoader } from "webgl";

Create one loader instance per asset type and reuse it.

Step 2: Load a Texture

const textureLoader = new TextureLoader();

const texture = textureLoader.load({
  paths: ["/assets/images/uv.jpg"],
  textureSettings: { flipY: true }
});

Keep paths relative to your app’s static/public asset root.

Step 3: Apply the Texture to a Material

const material = new BasicMaterial({
  mainTexture: texture
});

const object = new MeshMaterial3D(mesh, material);

Once assigned, the texture updates automatically when loading completes. You can render immediately, no manual onready callback is required for basic flow.

Step 4: Load an OBJ Model

const objLoader = new OBJLoader();

const objRoot = objLoader.load({
  paths: ["/assets/models/model.obj"]
});

objRoot is available immediately and fills as data arrives. You can include it in your render list right away.

Step 5: Optionally Patch Imported OBJ Materials

If you want to force a change across imported meshes, use postprocessor. An example is to assign a texture to all objects in an obj file

const objRoot = objLoader.load({
  paths: ["/assets/models/obj/pirate_girl/pirate_girl.obj"],
  postprocessor: (asset) => {
    asset.traverseDFS((node) => {
      if (node instanceof MeshMaterial3D) {
        node.material.mainTexture = texture;
      }
      return true;
    });
  }
});

Step 6: Load a glTF Scene

const gltfLoader = new GLTFLoader();

const sceneRoot = gltfLoader.load({
  paths: ["/assets/models/pirate_girl.gltf"]
});

Use glTF when you want richer material data and better modern tooling support.

Step 7: Render Streaming Assets Safely

function frame() {
  renderer.render([object, objRoot, sceneRoot, camera], device);
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Does not block rendering while waiting for loaders; Render continuously with placeholders and loaded data will appear as they become ready.

Path Rules That Prevent Most Loading Errors

  1. Use forward slashes in URLs, even on Windows.
  2. Use absolute app-root paths like /assets/... when possible.
  3. Keep .gltf sidecar files (.bin, textures) in expected relative locations.
  4. Confirm your dev server actually serves the asset directory.

Reference Examples

After this works, continue with Scene Graph and Transforms