phoria2 1.3.0

phoria2 1.3.0

New features for diagrams, data and effects, all additive: upgrading is just a version bump.

npm install phoria2@1.3.0

Lines: dashes and arrowheads

Flow and direction for network and topology diagrams. Dashes are material options in the model's units, and moving dashOffset sends them along the line, as traffic. Arrowheads go at the ends of each chain of joined segments.

const flow = view.scene.add(new Lines({ geometry: links, arrows: 'end', material: { width: 2, dash: 0.3, gap: 0.15 } }))
view.start((dt) => { flow.material.dashOffset += dt * 0.8 })

• Material dash, gap, dashOffset
• Lines arrows ('start' | 'end' | 'both') and arrowSize (pixels; sized from the width by default)

Area selection: view.pickArea()

Select many things at once with a box or a lasso. You get a hit for each point, instance and line segment inside the area, and each mesh whose middle is inside, nearest first. It tests positions rather than surfaces, so a box over a scatter takes the whole region.

const chosen = view.pickArea({ x: 40, y: 30, width: 200, height: 120 }).map((h) => h.datum)
const lassoed = view.pickArea([[10, 10], [200, 40], [120, 180]])

Particles: sizes, opacities, angles and sorting

• Geometry sizes, opacities and angles: one per point. Points that use them are drawn as camera-facing squares, any size, and stay whole at the edge of the view.
• Points sort: true draws them furthest first each frame, for soft particles like smoke.
• Emitter size, sizeSpread, opacity and spin set how particles grow, fade and turn over their lives.

const smoke = view.scene.add(new Emitter({
  rate: 40, velocity: [0, 1.5, 0], lifetime: [3, 5], color: ['#777', '#333'],
  size: [0.6, 4], sizeSpread: 0.3, opacity: [0, 0.6, 0], spin: 0.5, sort: true,
  material: { map: puff, size: 1, blending: 'normal' },
}))

Textures: update just the part that changed

texture.needsUpdate({ x, y, width, height }) uploads only that rectangle. Any update to a texture of the same size now refills the texture already on the GPU rather than creating a new one, which helps video textures too. The paint demo went from 8.5 ms a frame to under 1 ms.

Fixes

• Keyboard support is its own chunk again. 1.2.0 bundled it into core by mistake.
• Round points no longer have a dark ring: their soft edge now blends over what's behind.
• Chart scatter dots are drawn furthest first, with a slightly darker rim, so crowded points stay readable.

Demos

• Explosion (new): a fuel tank blown up - exercise new particle effects.
• Paint: new mobile mode, colour palettes and much faster thanks to partial texture uploads.
• Topology: failed links are dashed, and a hovered node's links flow out as arrows.
• Scatter: box and lasso selection added.

Docs (llms-full.txt), the scene schema and the Claude Code plugin reference cover all of the above.

phoria2 1.2.0

phoria2 1.2.0

Highlights

• Accessibility. keyboard: true on a View lets people Tab to the canvas and step through what
  can be hovered or clicked with the arrow keys: bars, points, surface grid points, network nodes
  and links, or furniture. Each item shows its highlight and tooltip as hover would, and Enter
  clicks it. A screen reader hears each one ("North, Sales: 26. 1 of 48") and a description of the
  view, which charts write for themselves.
• Reduced motion. Views follow the system's prefers-reduced-motion setting: frame() glides
  jump, auto-rotation holds, and chart transitions and flowing links settle at once.
• Works with physics, CSG and path-finding libraries. Four new integration demos draw
  Rapier (rigid bodies and soft-body cloth),
  Manifold and
  recast-navigation, and the API gained
  a number of nice additions to support this (below).

Added

• View
  • keyboard: true | { label: (hit) => text }: keyboard and screen-reader use. Off by default.
    Its code loads on first use.
  • description: what the view shows, for screen readers (the canvas's label).
  • reducedMotion: 'auto' | true | false: defaults to 'auto', which follows the system setting.
    view.reducedMotion says whether motion is reduced, for checking in animation of your own.
  • view.framing(target, { padding, direction }): where frame() would put the camera, without
    moving it, for a camera that eases after something moving.
• Charts: chart.summary(), one sentence describing the chart for screen readers. A spec's
  description overrides it.
• Nodes: highlight: false keeps a node and its children untinted under a View that tints
  everything (null still means "use the View's").
• Instances
  • An instance scaled to 0 is hidden: it's left out of bounds, framing, culling, shadows and labels.
  • Rotations can be given as { x, y, z, w } objects (QuatInput), as physics engines return
    them.
• Lights: DirectionalLight.shadowBounds fixes the area a directional light's shadow map
  covers.
• Labels
  • minScale: a label appears only once you've zoomed in that far.
  • Instance labels can be given as lists.
  • LabelStats.zoomedOut counts the labels hidden by zoom.
  • New Raycaster.solids() and raycaster.blocked() make hiding labels behind geometry much
    cheaper: 17.4 ms down to 0.78 ms a frame in the periodic table demo.
• Geometry: normals that phoria2 works out itself are worked out again after needsUpdate(),
  so geometry edited in place (cloth, waves) shades correctly as it moves. Normals you supply are
  kept.
• view.explain() reports accessibility settings.

Fixed

• Directional shadows no longer flicker or shimmer as things or the camera move: the shadow map now
  snaps to whole texels.
• Orbiting to look straight down no longer turns the picture 90° in the last degree.

Performance

• Colour strings are parsed once and remembered, and setInstance / setColor no longer create a
  new colour object each call.

Demos and docs

• New demos
  • Periodic table.
  • An Integrations section: physics (a brick tower and bombs, with Rapier), cloth (Rapier soft
    bodies), CSG (Manifold) and path finding (recast-navigation).
• Keyboard on in the existing demos: the chart demos and the office planner.
• Docs
  • Getting started tutorial: a first scene, then a
    live dashboard of 3D charts.
  • The README covers interaction, working with other libraries and accessibility.
  • llms-full.txt and the Claude Code plugin's reference cover the new API.

Upgrading

npm install phoria2@1.2.0, or pin phoria2@1.2.0 in a CDN import map.

phoria2 1.1.0

phoria2 1.1.0

A materials and texturing release: glass, car paint, cloth, brushed metal, translucent paper, cartoon and clay looks, baked lighting from real-world glTF models and video textures.

npm install phoria2@1.1.0

New materials

Option	What it's for
transmission	Glass that keeps its reflections at full strength and turns more solid at its edges (Fresnel), unlike opacity, which fades everything. Tinted and frosted glass with color and roughness.
clearcoat, clearcoatRoughness	A glossy coat over the surface: car paint, lacquered wood, varnish.
sheen, sheenColor, sheenRoughness	The soft bright rim of cloth: velvet, felt, upholstery.
ior, specularIntensity, specularColor	How strongly a non-metal reflects: water 1.33, glass 1.5, diamond 2.4, or none at all for chalk and clay.
anisotropy, anisotropyRotation	Brushed metal: highlights drawn out along the brushing.
translucency, translucencyColor	Light through thin surfaces: leaves against the sun, paper lanterns, lampshades.
matcap	The clay look of sculpting and CAD viewers, with no lights needed.
toon	Cartoon shading classic flat tones with a hard highlight; pairs with outline for inked edges.
environmentIntensity	One material's share of the environment's light and reflections e.g. a matte floor in a shiny showroom.

Textures

• Video textures: a <video> as a texture's image. new Texture({ url: 'promo.mp4' }) makes the video element for you, muted and looping, with texture.image to pause, seek.
• A second UV set: Geometry.uvs2 and Texture.uvSet: 1, so baked ambient occlusion shows where it was baked instead of smearing across tiled textures. A new lightMap / lightMapIntensity adds baked lighting.
• Texture rotation: Texture.rotation and center, beside repeat and offset. Each map maintains its own transform, so for example fabric colour and normal maps can repeat at different rates.

glTF

The loader now reads KHR_materials_transmission, KHR_materials_clearcoat, KHR_materials_sheen, KHR_materials_ior, KHR_materials_specular, KHR_materials_anisotropy and KHR_materials_diffuse_transmission (by their factors), TEXCOORD_1 and each texture's texCoord, and the rotation in KHR_texture_transform. Models exported from Blender, Unreal and Wayfair's pipeline now look as intended. Texture transforms are checked against Khronos's TextureTransformTest model.

Rendering

• Antialiased outlines: outline edges are smooth instead of jagged. outlineAntialias on View turns it off, and it mirrors scene antialias setting by default.

Demos

• Advanced materials: glass, clearcoat, sheen, reflectance, brushed metal and paper lanterns.
• Stylised materials: matcaps and toon with outlines.
• Schematic: exploded-view parts poster in line art and a linked parts legend.
• Product viewer: adds the Sheen Chair (Khronos sample, © Wayfair, CC0), with velvet sheen, baked occlusion on its second UV set.
• Textures: a second screen playing a video beside the live canvas.
• Guided tour: reflection fixes.

For agents

The scene schema, llms-full.txt and the Claude plugin cover every new option. Hints point three.js names (envMapIntensity, channel, gradientMap, anisotropyStrength, diffuseTransmission and more) to their phoria2 equivalents.

Full changelog: v1.0.0...v1.1.0

phoria2 1.0.0

Small, friendly 3D for the web, now stable. phoria2 is a WebGL 2 renderer with PBR materials, instancing,
points, lines, labels, picking and particles, behind an API small enough to learn in an afternoon.

It's aimed at business apps: charts, labelled scenes, diagrams, dashboards and product viewers.

npm install phoria2

Demo gallery · Full reference · README

What's in it

• Core (phoria2): View, scene graph, PBR materials, shadows, HDR environments, fog, bloom,
  instancing, labels, picking with tooltips, highlights and outlines, dragging, section-plane
  cutaways, curves, and scenes as plain data with create() / toJSON()
• phoria2/charts: 3D charts from a spec of mark, data and channels: bars, points, lines,
  areas, surfaces and networks, with axes, legends and animated updates
• phoria2/gltf: glTF 2.0 models with their materials and animations
• phoria2/motion: timelines of named steps, follow() along a curve, reveal() a path, for
  explainers and guided tours
• phoria2/particles: emitters and simple physics
• phoria2/edit: a move/turn handle with snapping, and undo history
• JSON Schemas for scene descriptions (phoria2/schema.json) and chart specs
  (phoria2/charts/schema.json)

Why phoria2

• Small: about <60 KB gzipped for a lit, interactive scene. Other parts load only when used.
• Idle when no scene changes: a view draws only when something in it changed.
• Any number of views on a page: each view is an ordinary canvas in your layout, past the
  browser's WebGL context limit. The chartlab demo runs over 100 real-time chart views.
• Tells you what to write: every option is checked, and mistakes throw an error that names the fix.
• Built for coding agents: a one-page reference ships in the package, and there's a Claude Code
  plugin (/plugin marketplace add kevinroast/phoria2).
• No runtime dependencies. ES modules, with TypeScript types.

What 1.0 means

phoria2 follows semver from here: no 1.x release breaks code written against what is documented.
That covers the exports, options, defaults, the description and chart spec formats, and colour and
light levels. Nothing is removed in 1.x. Anything 2.0 will drop is deprecated first, with a console
warning that names the replacement. The README's
Versioning section has the details.