Bot releases are visible (Hide)
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.13.0...v0.14.0
Published by CodyJasonBennett 12 months ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.12.0...v0.13.0
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.11.0...v0.12.0
Published by CodyJasonBennett about 2 years ago
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
Published by CodyJasonBennett about 2 years ago
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
Published by CodyJasonBennett about 2 years ago
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
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.9.1...v0.9.2
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.9.0...v0.9.1
Published by CodyJasonBennett about 2 years ago
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.
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.
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 })
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
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.8.0...v0.8.1
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.7.0...v0.8.0
Published by CodyJasonBennett about 2 years ago
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
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.3...v0.6.4
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.2...v0.6.3
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.1...v0.6.2
Published by CodyJasonBennett about 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.6.0...v0.6.1
Published by CodyJasonBennett about 2 years ago
This release improves typesafety and react-native resolution issues. We also now have documentation (see readme).
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.
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
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
Published by CodyJasonBennett over 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.5.0...v0.5.1
Published by CodyJasonBennett over 2 years ago
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.
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.
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>
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.
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
}
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
Published by CodyJasonBennett over 2 years ago
Full Changelog: https://github.com/pmndrs/react-ogl/compare/v0.4.2...v0.4.3