svg-texture

Renders SVG content to a Babylon.js texture via an offscreen canvas.

Modes

• Static (url): fetches SVG from a URL and renders once.
• Dynamic (element): reads a live SVG element on an interval (default 30 ms), capturing changes from tosijs bindings or any other DOM mutations. Great for HUDs, radar displays, instrument panels.

Example — SVG on a cube

import { b3d, b3dLight, SvgTexture } from 'tosijs-3d'
import { orbitCam } from 'demo-utils'

const scene = b3d(
  {
    sceneCreated(el, BABYLON) {
      orbitCam(el, { alpha: -Math.PI / 2, beta: Math.PI / 3, radius: 5, target: [0, 0, 0] })

      const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1.5 }, el.scene)
      box.position.y = 0

      const tex = new SvgTexture({
        scene: el.scene,
        url: '/tosi-test-pattern.svg',
        resolution: 512,
      })

      const mat = new BABYLON.StandardMaterial('svg-mat', el.scene)
      mat.diffuseTexture = tex.texture
      box.material = mat

      el.scene.registerBeforeRender(() => {
        box.rotation.y += 0.005
      })
    },
  },
  b3dLight({ intensity: 1 }),
)

preview.append(scene)

Call tex.dispose() when done to stop the interval and release GPU memory.