fix(useRenderLoop): allow separate instances POC #646
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* feat: vue chrome devtools * feat: editable scenes from devtools * chore(lint): fix lint errors * feat: highlight material * chore(lint): fix
… event handling (#491)
* feat: conditional rendering * chore: remove subscribe system * feat: on-demand automatic invalidation with prop changes * feat: invalidate once first when is `renderMode !== 'always'` * docs: performance page, on-demand rendering * chore: fix windowsize issue * chore(lint): fix maximum line length issues * feat: invalidate on-demand on window resize * feat: add advance method for manual mode * feat: fix manual first render with advance * docs: performance manual mode * docs: add badge with version * chore: correct typos and PR suggestions * chore: tell dont ask fix * feat: render state instead of internal
* feat: remove annoying defautl camera warning * chore: remove logWarning
* feat: set ACESFilmicToneMapping as default toneMapping * chore: usage of nullish coealescing operator instead of ternaries
…erdata (#522) * feat: conditional rendering * chore: remove subscribe system * feat: on-demand automatic invalidation with prop changes * feat: invalidate once first when is `renderMode !== 'always'` * docs: performance page, on-demand rendering * chore: fix windowsize issue * chore(lint): fix maximum line length issues * feat: invalidate on-demand on window resize * feat: add advance method for manual mode * feat: fix manual first render with advance * docs: performance manual mode * docs: add badge with version * chore: correct typos and PR suggestions * chore: tell dont ask fix * feat: render state instead of internal * feat: add __tres local state to nodeOps instances * feat: add context to root on instances localstate * feat: camera registration ops from node local state ctx * feat: event handling registration from localState of nodes * feature: disposable flag on node localstate * feat: remove userData from types * chore: remove unused import * fix(test): fake localstate `.__tres` on tests * fix(types): fix nodeOps instances localstate type
* Update orthographic camera aspect when screen size updates * Give user a "manual" flag to keep Tres from updating camera
* feat(nodeOps): switch instance logic for reactive `object` prop * chore: playground primitives with models * chore: fix linter * chore: fix tests and linters, primitive object is now reactive * chore: refactor instance swaping logic to overwrite set and copy properties * chore: tests * chore: remove console.log * chore: remove unused import watch * feat: add primitive conditional to patch object prop
fix: camera aspect
* chore: new internal playground org and testing pages * chore: fix lint * chore: better styling of playground landing page * chore: lint
* feat: renderer programs when selecting scene on devtools * feat: renderer.info * chore: fix lint * docs: devtools update * chore: fix lint issues
* new file: playground/src/components/Box.vue
new file: playground/src/pages/raycaster/Propogation.vue
* Started work on interactive Event Propogation playground example
modified: src/components/TresCanvas.vue
* Import and use `useEventStore`
* defineEmits for all expected pointer events so we may emit propogated events off of the canvasa
modified: src/composables/index.ts
new file: src/composables/useEventStore/index.ts
* Started work on an event store. I'm not sure this counts as a store just yet
* Wired up majority of pointer events
* Added event propogation
* Does not require using userData scene props or nodeOps for registering objects to scene
modified: src/composables/useRaycaster/index.ts
* Added new event listeners to power newly supported pointer events. We now check whole scene/children when calling intersectObjects.
* Created new EventHooks for new events
* Added `forceUpdate` function that allows for pointer-move events to work without mouth movement (good for when camera is moving but mouse is not)
modified: src/core/nodeOps.ts
* Added supported events to array so they don't get received as props
* (temporarily) unhook current pointer event solution to iterate on useEventStore
modified: src/utils/index.ts
* Added Camel-to-kebab case util
* Support multiple event listeners, add support for .stop event modifier
* Set stopProgation variable to false by default, whoops
* fix typo
* fix: remove `createGlobalState` from `useEventStore`, allowing events to work while multiple TresCanvas' are being used
* fix(perf): remove extraneous intersectObjects/getIntersects calls by moving intersects into a ref that is updated on pointer-move
* chore(lint): fix lint issues
* feat: enhance events manager to include duplicates checking, pointer-missed support, and forced updating
Per file changelog:
modified: playground/src/components/Box.vue
* Added a pointer-missed handler for testing
modified: playground/src/pages/TheBasic.vue
* uses forceUpdate from EventManager to fire events even when the mouse hasn't moved
modified: playground/src/pages/raycaster/Propagation.vue
* Didn't mean to undo the lint changes, adds a pointer-missed event on the canvas for extra testing
modified: src/components/TresCanvas.vue
* Adds `pointer-missed` as possible event for canvas emits
modified: src/composables/index.ts
* Update export
deleted: src/composables/useEventStore/index.ts
* Rename `useEventStore` to `useTresEventManager`
modified: src/composables/useRaycaster/index.ts
* Check for empty intersects on hit test, wire up pointerMissed events eventHook
* Fix forceUpdate to call onPointerMove instead of triggering an EventHook
modified: src/composables/useTresContextProvider/index.ts
* Add TresEventManager type
new file: src/composables/useTresEventManager/index.ts
* add onPointerMissed
* create (de)registerPointerMissedObj methods so we can track objects in the scene listening to this event
* Note: These are passed to nodeOps via TresContext
* Implement duplicates checking for eventPropogation
modified: src/core/nodeOps.ts
* register/deregister pointerMissed objects
* chore: lint
* docs: new event docs
* chore: fix lint
* feat: enhance event object details and use in Box example to change material color. Add ability to force event system updates even when mouse hasn't moved. Enhance pointer-enter/leave events. Update types
Box.vue
* Added pointer-missed handler
* set the materials flash color using the object coming off of the event instead of a ref
UseRaycaster
* Flesh out event details to include
* all mouse event properties
* intersections
* tres camera
* camera raycaster
* source event
* mouse position delta
* stopPropagating stub
* and unprojectedPoint (this needs work, cant get the math to work)
UseTresContextProvider
* Add TresEventManager type to TresContext
useTresEventManager
* Add forceUpdate method to allow apps to force an event system update even when the mouse hasnt moved
* Add pointerMissed event
* Properly implement pointer-enter/pointer-leave events
* Before now, pointer-enter | leave were only called on first object in intersection, now we execute the events for all entered/left objects
* Use stopPropagating property included on event object
* chore: lint
* chore: fix lint issues
---------
Co-authored-by: alvarosabu <[email protected]>
* chore: memory management playground * feat: recursively free cpu and gpu memory allocation on remove * chore: clumsy attempt to dispose on unmount * chore: lint fix * feat: remove scene root on disposal * chore: fix lint * docs: added disposal guide on `performance` docs
* fix: fix some internal types * chore: fix linters * fix: typescript issues on event manager
andretchen0
changed the title
test(nodeOps): rename file, fix type errors, add tests
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
useRenderLoopcurrently spawns only a single loop used by all instances of<TresCanvas />. Among other things, this means an individual canvas can't be paused without pausing all canvases:useRenderLoopper page share state #252Solution
For a component subtree,
provide/injecta unique loop.Context
As discussed on the Discord, this is a POC preserving the current
useRenderLoopinterface, but with separate instances of the render loop per<TresCanvas />. As with the current code, the POC works in<script setup>above a<template><TresCanvas /></template>.Current shortcomings
provide/inject. So http://localhost:5173/basic/lights doesn't work out of the box.I have a transparent-to-the-user solution in mind for 1. There could be a transparent or explicit workaround for 2, but I'd like to discuss these with the team on the Discord.
Taking over the render loop isn't implemented; I'd like to diverge from R3F's API here. I'll bring it up on the Discord.
Playground
pnpm run playgroundSince this modifies
useRenderLoopall the playground demos are using it. Except for directives, they all work, at least at first glance.