v0.5.0

What's Changed

• refactor(core): create instances' objects on commit by @CodyJasonBennett in #44
• refactor(core): use resolve in applyprops by @CodyJasonBennett in #45
• refactor(types): extend native types for JSX elements by @CodyJasonBennett in #46
• fix(core): handle container append on mount by @CodyJasonBennett in #47
• fix(core): decouple previous attach on reconstruct by @CodyJasonBennett in #48
• fix(core): don't diff reserved props, skip instance props in applyProps by @CodyJasonBennett in #49
• fix(core): update attach reactively on commit update by @CodyJasonBennett in #50
• feat: use @types/ogl drop-in by @CodyJasonBennett in #51
• fix(core): don't set non-attributes as attributes by @CodyJasonBennett in #52

New Architecture

This release sports a new reconciliation architecture and a bunch of fixes for substantial improvements in performance and stability, particularly when using react features like suspense and concurrency.

Handling OGL side-effects

Instances' respective OGL elements are no longer created alongside the instance, but on commit mount once the tree is finalized. Instead, instances are created as descriptors that will create and link up with an OGL element once managed in the tree.

This prevents GPU memory leaks that would arise when using suspense or concurrent features whenever instances are discarded and later recreated as renders are rolled back to fallback content. OGL's use of effectful constructors is not a good design, but this way, we work around them.

Reactive attach

Attach is now gracefully handled reactively instead of at instance creation. Multiple elements can alternate between attach targets and will clean up after themselves in isolation.

<mesh>
  <box />
  <customProgram>
    <texture attach={foo ? 'texture1' : 'texture2'} />
    <texture attach={foo ? 'texture2' : 'texture1'} />
  </customProgram>
</mesh>

OGL Types

Additionally, OGL type information is now inherited from https://github.com/CodyJasonBennett/ogl-types aliased to @types/ogl (see oframe/ogl#24 as for getting this in DefinitelyTyped). These are 1-1 with the current version of OGL and will be maintained in lockstep by the community.

Event types changes

With this change, event types are now streamlined to extend Raycast hit interfaces, with a reference to the original DOM event:

export interface OGLEvent<TEvent extends Event> extends Partial<OGL.RaycastHit> {
  nativeEvent: TEvent
  // OGL.RaycastHit
  // localPoint?: OGL.Vec3
  // distance?: number
  // point?: OGL.Vec3
  // faceNormal?: OGL.Vec3
  // localFaceNormal?: OGL.Vec3
  // uv?: OGL.Vec2
  // localNormal?: OGL.Vec3
  // normal?: OGL.Vec3
}

export interface EventHandlers {
  onClick?: (event: OGLEvent<MouseEvent>) => void
  onPointerUp?: (event: OGLEvent<PointerEvent>) => void
  onPointerDown?: (event: OGLEvent<PointerEvent>) => void
  onPointerMove?: (event: OGLEvent<PointerEvent>) => void
  onPointerOver?: (event: OGLEvent<PointerEvent>) => void
  onPointerOut?: (event: OGLEvent<PointerEvent>) => void
}

Node types changes

Furthermore, extended JSX nodes have a streamlined interface rather than function-specific node interfaces, and a props helper type for element-specific prop values:

import type { WithOGLProps, Node } from 'react-ogl'

class CustomElement {}

interface CustomElementProps extends WithOGLProps<CustomElement> {}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      customElement: Node<CustomElement, typeof CustomElement>
    }
  }
}

Full Changelog: v0.4.3...v0.5.0

v0.4.3

What's Changed

• fix(core): don't use arraybuffer methods by @CodyJasonBennett in #43

Full Changelog: v0.4.2...v0.4.3

v0.4.2

What's Changed

• fix(core): fix race condition on subscribe by @CodyJasonBennett in #41

Full Changelog: v0.4.1...v0.4.2

v0.4.1

What's Changed

• fix(core): prepare portal targets by @CodyJasonBennett in #40

Full Changelog: v0.4.0...v0.4.1

v0.4.0

What's Changed

• feat: add size render prop by @CodyJasonBennett in #38
• feat(core): add xr manager, render mode switching by @CodyJasonBennett in #39
• chore: cleanup build config, drop expo peer dep by @CodyJasonBennett in 90974e9
• chore: add ogl node/ssr solutions to readme by @CodyJasonBennett in afa201c

Size prop

Adds a size render prop to mirror R3F's API for sizing, this is handled by the <Canvas /> component. This can be subscribed to via useOGL:

const size = useOGL(state => state.size)
console.log(size.width, size.height)

WebXR support

Adds support for WebXR rendering via an XRManager:

XRManager {
  session: XRSession | null
  setSession(session: XRSession | null): void
  connect(session: XRSession): void
  disconnect(): void
}

//

const renderer = useOGL(state => state.renderer)
const xr = useOGL(state => state.xr)

useEffect(() => {
  let mounted = true

  (async () => {
    const session = await navigator.xr.requestSession('immersive-vr', {
      optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking'],
    })
    session.updateRenderState({ baseLayer: new XRWebGLLayer(session, renderer.gl) })

    if (!mounted) return session.end()
    else xr.connect(session)
  })()

  return () => {
    mounted = false
    xr.disconnect()
  }
}, [renderer, xr])

This will augment useFrame subscriptions to access an XRFrame while in a session:

useFrame((state: RootState, time: number, frame?: XRFrame) => {
  // ...
})

Full Changelog: v0.3.7...v0.4.0

v0.3.7

What's Changed

• fix(core): add isomorphic env check for devtools by @CodyJasonBennett in c2d9814
• chore: bump deps, enable lib treeshake by @CodyJasonBennett in 0cfc0bc

Full Changelog: v0.3.6...v0.3.7

v0.3.6

What's Changed

• fix(native): rebind events on context restore by @CodyJasonBennett in cdccaed
• refactor(types): improve uniform & color types by @CodyJasonBennett in 1c9874e
• refactor(core): don't check react internals by @CodyJasonBennett in 3f3c271
• refactor(core): transform shorthand uniforms for uniform-value syntax by @CodyJasonBennett in 44ad4a9
• fix(core): don't overwrite sampler arrays by @CodyJasonBennett in 48c3afc

Full Changelog: v0.3.5...v0.3.6

v0.3.5

What's Changed

• fix(native): prepare ogl context, don't overwrite renderer.render by @CodyJasonBennett in #36

Full Changelog: v0.3.4...v0.3.5

v0.3.4

What's Changed

• fix(native): properly bind events, move dpr to render by @CodyJasonBennett in 53af88c

Full Changelog: v0.3.3...v0.3.4

v0.3.3

What's Changed

• fix: pass react mode in canvas, renderprop types by @CodyJasonBennett in 9f7e821
• refactor: cleanup, prefer iterating over cloning into memory by @CodyJasonBennett in #35
• fix(hooks): respect TextureLoader signature in custom classes by @CodyJasonBennett in 56783c5
• fix(native): flush frames in canvas by @CodyJasonBennett in c1521ab

Full Changelog: v0.3.2...v0.3.3