react-ogl

What's Changed

• feat: update Zustand to use latest API by @matiasngf in https://github.com/pmndrs/react-ogl/pull/79

New Contributors

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

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.13.0...v0.14.0

What's Changed

• refactor(types)!: support for OGL v1 by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/78

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.12.0...v0.13.0

What's Changed

• refactor(types)!: upgrade Zustand to v4 by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/75

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.11.0...v0.12.0

What's Changed

• feat(Canvas): bridge cross-container context by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/74

This release implements a context bridge within Canvas, enabling react-ogl children to consume context between renderers (e.g. react-dom or react-native), and removing the need for manually bridging context.

import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import { Canvas } from 'react-ogl'

const DOMContext = React.createContext()

function Component() {
  // "Hello from react-dom"
  console.log(React.useContext(DOMContext))
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <DOMContext.Provider value="Hello from react-dom">
    <Canvas>
      <Component />
    </Canvas>
  </DOMContext.Provider>,
)

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.10.1...v0.11.0

What's Changed

• experiment: add module field for bundlephobia by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/73

No changes in this release. Working around a Bundlephobia issue to get bundle size metrics working again.

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.10.0...v0.10.1

What's Changed

• feat: container effects, recursive dispose, portal state by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/72

This release includes some upstream fixes for suspense and concurrency.

Additionally, portals can now create state enclaves to isolate scenes, cameras, etc. from the root store. This is particularly useful for postprocessing and complex effects.

function Component {
  // scene & camera are inherited from portal parameters
  const { scene, camera, ... } = useOGL()
}

const scene = new OGL.Transform()
const camera = new OGL.Camera()

<transform>
  {createPortal(<Component />, scene, { camera })
</transform>

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.9.2...v0.10.0

What's Changed

• chore: upgrade OGL types by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/71

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.9.1...v0.9.2

What's Changed

• fix(useLoader): pass src to textureloader by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/70

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.9.0...v0.9.1

What's Changed

• feat(hooks): useInstanceHandle by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/67
• refactor(types): dynamically map OGLElements by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/68

This release significantly improves type safety and maintainability and offers escape hatches for advanced use cases, originating from R3F in https://github.com/pmndrs/react-three-fiber/pull/2465.

Dynamically mapped OGLElements

Additionally, OGL types for JSX.IntrinsicElements are no longer hard-coded and dynamically mapped to OGLElements. This lets us properly follow semver once @types/ogl is upstreamed.

Node => OGLElement

The Node interface has been simplified and renamed to OGLElement to prevent clashing with DOM types:

declare module 'react-ogl' {
  interface OGLElements {
    customElement: OGLElement<typeof CustomElement>
  }
}

extend({ CustomElement })

Access internals via useInstanceHandle

Exposes an object's react-internal Instance state from a ref.

Note: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.

const ref = React.useRef<OGL.Transform>()
const instance = useInstanceHandle(ref)

React.useLayoutEffect(() => {
  instance.parent.object.foo()
}, [])

<transform ref={ref} />

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.8.1...v0.9.0

What's Changed

• fix: explicitly import entrypoints by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/66

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.8.0...v0.8.1

What's Changed

• fix!: remove native polyfill by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/65

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.7.0...v0.8.0

What's Changed

• feat!: upgrade reconciler, react 18 concurrency by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/64

This patch moves to better support react 18 features by upgrading the internal reconciler, making react 18 the minimum supported version. Consequently, react-dom 18 and react-native 0.69 are also the minimum supported peer versions.

The mode render prop is removed with roots being concurrent by default and reconciler.act is moved to a top-level export as act.

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.4...v0.7.0

What's Changed

• fix: regenerate types on build by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/62

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.3...v0.6.4

What's Changed

• fix: optimize distribution size by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/61

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.2...v0.6.3

What's Changed

• fix: enable tree-shaking in webpack, sourcemaps by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/60

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.1...v0.6.2

What's Changed

• fix(useFrame): use isomorphic effects for SSR by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/59

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.0...v0.6.1

What's Changed

• BREAKING: expose JSX OGLElements, improve reconciler type-safety by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/54
• fix(types): mark OGL helpers as effectful, correctly infer hook types by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/56
• fix: create separate native entrypoint by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/57
• fix: use useLayoutEffect in native by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/55
• chore: add docs, rework information architecture by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/58

Changes

This release improves typesafety and react-native resolution issues. We also now have documentation (see readme).

OGL & Node/SSR

OGL's module resolution works as of 0.97 and is the minimum required version for react-ogl 0.6. Previous workarounds for Node/SSR are no longer needed.

OGLElements

JSX elements defined by react-ogl are now exposed as OGLElements. These can now be accessed deterministically from the OGLElements export, and modified with the following:

import { Node, extend } from 'react-ogl'

class CustomElement {}

declare module 'react-ogl' {
  interface OGLElements {
    customElement: Node<CustomElement, typeof CustomElement>
  }
}

extend({ CustomElement })

See Creating custom elements via extend.

useLoader

useLoader will now properly infer types from loaders, and accepts a LoaderRepresentation signature for custom loaders.

class CustomLoader {
  async load(gl: OGLRenderingContext, url: string): Promise<void> {}
}

const result = useLoader(CustomLoader, '/path/to/resource')

See Loading assets via useLoader.

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.5.1...v0.6.0

What's Changed

• Fix: stupid mistake in unsubscribe by @eXponenta in https://github.com/pmndrs/react-ogl/pull/53

Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.5.0...v0.5.1

What's Changed

• refactor(core): create instances' objects on commit by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/44
• refactor(core): use resolve in applyprops by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/45
• refactor(types): extend native types for JSX elements by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/46
• fix(core): handle container append on mount by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/47
• fix(core): decouple previous attach on reconstruct by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/48
• fix(core): don't diff reserved props, skip instance props in applyProps by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/49
• fix(core): update attach reactively on commit update by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/50
• feat: use @types/ogl drop-in by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/51
• fix(core): don't set non-attributes as attributes by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/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 https://github.com/oframe/ogl/issues/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: https://github.com/pmndrs/react-ogl/compare/v0.4.3...v0.5.0

What's Changed

• fix(core): don't use arraybuffer methods by @CodyJasonBennett in https://github.com/pmndrs/react-ogl/pull/43

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