@hozo/three•WebGL · WebGPU · Expo GL

Three.js & 3D Spatial Graphics

3D graphics on the web and on mobile usually live in two isolated ecosystems with diverging shader languages and asset pipelines. Hozo bridges them with a unified 3D pipeline that lowers to WebGL / WebGPU on the Web and native OpenGL ES / Metal on React Native.

Interactive Proof: Kumimono (組物)

Live WebGL rendering of a traditional Japanese timber joinery bracket system using portable bounded shaders.

Zero idle frame draw

@hozo/three · WebGL

Interactive 3D, from the same React

Kumimono — a Japanese roof-bracket set, 56 parts

A 3D study of Japanese timber roof brackets. Use the button or assembly slider to separate and rejoin its 56 parts.

Kumimono · 3D assembly study

100%

Architecture & Key Capabilities

01

Three-Tier Renderers

Switch seamlessly between three distinct targets:

  • Portable Shaders: Zero vendor GLSL extensions; identical output on Web and Hermes mobile.
  • Classic WebGL: Maximum browser reach and canvas compatibility.
  • Modern WebGPU: Compute-backed pipeline for next-generation devices.
02

R3F Native Host

Full authoring compatibility with declarative React Three Fiber syntax.

  • Declarative JSX: Use standard <mesh> and <group> tags.
  • Expo GL Integration: Direct native buffer submission without serializing vertices across the bridge.
  • Demand Rendering: Only redraws when the scene state moves, saving mobile battery.
03

Accessible 3D Controls

3D objects are accompanied by semantic accessibility controls out of the box.

  • ARIA Slider: Full keyboard stepping (Home, End, Arrows).
  • Screen Reader Feedback: Announces aria-valuetext states clearly.
  • Reduced Motion: Jumps directly to targets when the user prefers no animation.

Declarative Authoring

Author scenes with standard React patterns. Hozo compiles the scene to WebGL on the browser and maps directly to the Native GPU runtime on iOS/Android.

import { ThreeCanvas } from '@hozo/three'
import { useRef } from 'react'

export function ProductViewer() {
  return (
    <ThreeCanvas
      camera={{ position: [0, 2, 5], fov: 45 }}
      frameloop="demand"
      accessibilityLabel="Interactive 3D Kumimono Bracket"
    >
      <ambientLight intensity={0.6} />
      <directionalLight position={[10, 10, 5]} intensity={1.2} />
      <KumimonoMesh />
    </ThreeCanvas>
  )
}