react-ogl

What's Changed

• fix(core): fix race condition on subscribe by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/41

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.4.1...v0.4.2

What's Changed

• fix(core): prepare portal targets by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/40

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.4.0...v0.4.1

What's Changed

• feat: add size render prop by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/38
• feat(core): add xr manager, render mode switching by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/39
• chore: cleanup build config, drop expo peer dep by @CodyJasonBennett in 90974e9b75f25c01c4f0308535410d379ec10278
• chore: add ogl node/ssr solutions to readme by @CodyJasonBennett in afa201c21bd92ec1f63a9e75ee67c6d88fe50717

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: https://github.com/pmndrs/react-ogl/compare/v0.3.7...v0.4.0

What's Changed

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

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.6...v0.3.7

What's Changed

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

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.5...v0.3.6

What's Changed

• fix(native): prepare ogl context, don't overwrite renderer.render by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/36

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.4...v0.3.5

What's Changed

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

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.3...v0.3.4

What's Changed

• fix: pass react mode in canvas, renderprop types by @CodyJasonBennett in 9f7e821a22135dd67847849abbc7bcc0d18c6077
• refactor: cleanup, prefer iterating over cloning into memory by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/35
• fix(hooks): respect TextureLoader signature in custom classes by @CodyJasonBennett in 56783c543426a55cb3e89e98c340ac404ad548f9
• fix(native): flush frames in canvas by @CodyJasonBennett in c1521ab00c257476781e11837878df5835609c56

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.2...v0.3.3

What's Changed

• fix(core): fix typo in attach by @CodyJasonBennett in 1b93a089f986b2146291086cb4680e832a571a5d

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.1...v0.3.2

What's Changed

• fix(core): don't create RaF in render by @CodyJasonBennett in 5aeb6cdd0e44a7255911acc8c1962da6f28669c6

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.3.0...v0.3.1

What's Changed

• feat(core): customize gl behavior via extend by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/30
• feat(core): expanded attach by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/31
• feat: use zustand for granular context updates by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/32

This is a big update in terms of feature parity with https://github.com/pmndrs/react-three-fiber with some perf improvements. Among them:

useStore, zustand, and granular useOGL signature

We now use Zustand under the hood for granular context subscriptions, including a new hook useStore:

// Only update when gl updates
import { useOGL } from 'react-ogl'
const gl = useOGL(state => state.gl)

// Or, for custom zustand selectors:
import { useStore } from 'react-ogl'
const store = useStore()
React.useEffect(() => store.subscribe(state => ... ), [])

expanded attach API

Expands the attach prop by accepting an attach function in addition to a string. This is 1-1 with R3F v8's unified attach API.

// will attach to parent.target
<parent>
  <child attach="target" />
</parent>

// will attach to parent.target.subtarget
<parent>
  <child attach="target-subtarget" />
</parent>

// will attach to parent.target[0] and parent.target[1], creates an array if parent.target is undefined
// useful for attaching multiple elements to an array
<parent>
  <child attach="target-0" />
  <child attach="target-1" />
</parent>

// will call child.setParent on mount and child.removeChild unmount
<parent>
  <child
    attach={(parent, self) => {
      self.setParent(parent)
      // remove on unmount
      return () => parent.removeChild(self)
    }}
  />
</parent>

specify effectful classes via extend

extend now accepts a passGL argument inwhich passes the active gl context automatically to the element in construction. Importantly, this will affect all elements passed in the call to extend or any elements who extend them. Passing gl as an arg to these elements will still work as before, however, it is unneeded.

// Marks both classes as effectful and will receive an effect
extend({ CustomClass1, CustomClass2 }, true)

- const gl = useOGL()
- <customClass1 args={[gl]} prop={value} />
- <customClass2 args={[gl]} prop={value} />

+ <customClass1 prop={value} />
+ <customClass2 prop={value} />

This is enabled for core classes to let users use props instead of args for common classes like meshes, materials, geometry, and so on.

<program vertex="" fragment="" />

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.2.2...v0.3.0

What's Changed

• chore: swc => vite, add cjs target by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/29

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.2.1...v0.2.2

What's Changed

• chore: add examples by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/27
• fix(types): respect attribute signature by @CodyJasonBennett in bb1102b2f36b3b834f666e0885256606267d9da2

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.2.0...v0.2.1

What's Changed

• fix: use .mjs for node compat by @CodyJasonBennett in f8970be96843377f41a0ef087bae3a5742268916
• fix(TS): move type deps to dependencies by @CodyJasonBennett in c5e4bfe04965d48d624aff49ccd10897aa2dcd44
• refactor(core): attach on mount, correctly handle fiber handoff by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/24
• refactor: unify hooks, react-merge-refs => useImperativeHandle by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/25
• BREAKING: unify targets, flatten folder structure by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/26

This release does away with platform-specific imports (react-ogl/web or react-ogl/native) in favor of a unified target (react-ogl).

// web
- import ... from 'react-ogl/web'
+ import ... from 'react-ogl'

// native
- import ... from 'react-ogl/native'
+ import ... from 'react-ogl'

Additional fixes improve internal stability when using concurrent features, suspense, and devtools.

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.1.6...v0.2.0

What's Changed

• fix(reconciler): add scheduler fallbacks for SSR, add required hooks by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/16
• fix(core): only save internal handlers by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/22

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.1.5...v0.1.6

What's Changed

• fix: not change subscribed reference by @eXponenta in https://github.com/pmndrs/react-ogl/pull/21

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.1.4...v0.1.5

What's Changed

• React 18 fast fix by @eXponenta in https://github.com/pmndrs/react-ogl/pull/19

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.1.3...v0.1.4

What's Changed

• fix: parent reference missing, dispose by @eXponenta in https://github.com/pmndrs/react-ogl/pull/13

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.1.2...v0.1.3

What's Changed

• fix: allow pass custom renderer creating function by @eXponenta in https://github.com/pmndrs/react-ogl/pull/11

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.1.1...v0.1.2

What's Changed

• fix uniform update by @eXponenta in https://github.com/pmndrs/react-ogl/pull/9
• feat: Pass hit reslut to event by @eXponenta in https://github.com/pmndrs/react-ogl/pull/7
• chore(tests): complete applyProps coverage by @CodyJasonBennett in f4449680cde0b05ac0ac22b6173ac51083095ac5

New Contributors

• @eXponenta made their first contribution in https://github.com/pmndrs/react-ogl/pull/9

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.0.9...v0.1.1