feat: Add hidden raycasting check to <Html /> #341
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/pmndrs/drei/B7Jt1hycZMcTvtqVtKvwZy369QDw |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit df905ea:
|
|
Hey 👋 did you see #337 ? I did the same thing but using an explicit occluder object to save on raycaster checks. What do you think? |
|
Hi @gsimone, no unfortunately I didn't. The check I wrote tests if the position is visible in front of any geomtry hit in the scene. Attached to the same object it has to be positioned manually to ensure it is "outside" of the geometry. |
|
The "all scene" check could be implemented via the occluder API, like this The fading didn't really work so I'd probably just drop it, but I'd prefer defaulting to explicitely passing the object to , to avoid performance footguns. I'll close #337 in favor of this, anyway ✅ |
gsimone
changed the title
|
Ok fine :) I'll update the implementation. |
|
just like @gsimone's pr, having this in would be wonderful. most requested feature for html. occluder sounds pretty clever, but in whichever way - it could be finetuned little by little. |
|
btw @gsimone @joshuaellis it would be pretty crazy if drei had a quick but not so precise bounds only raycaster. or something configurable. import { Raycaster, aabb } from 'three-stdlib'
const ray = new RayCaster({ check: aabb }) // convex, vertex, etc ...
ray.intersect(...)if we had this, r3f could use that by default. it could switch to low-res piercing on regress (movement) and things like The idea is that it could be modular (saving bundle size again). it wouldn't call mesh.raycast in that case but temporarily inject its own just like meshbounds does. |
|
@gsimone i'm gonna leave this to you 👌🏼 |
# Conflicts: # src/web/Html.tsx
|
I'll review as soon as possible 🙏 |
|
@j-era how can I test this? |
|
sry @joshuaellis, no time for nothing ;) i've added a storybook example you can test with -> https://drei-git-fork-j-era-feat-340-add-hidden-check-to-html-pmndrs.vercel.app/?path=/story/misc-html--html-raycast-occluder-st |
|
nice! let's get it in if it works :-) |
|
🎉 This PR is included in version 5.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
@j-era @joshuaellis Could we amend the docs a little? I think it's a little confusing, the story book mentions a occluder, and docs don't but do mention checkDepth instead. I think it's not entirely clear how this feature works and how it can be enabled. looking into the code it looks like checkDepth is a left-over, it doesn't seem to do anything but that's the prop we documented. |
|
made a small test here https://codesandbox.io/s/mixing-html-and-webgl-forked-hpqd3?file=/src/Html.tsx it changes the prop to "occlude" and allows it to be a boolean. a true would occlude the whole scene. it also sets opacity instead of display, which would allow the user to animate it. i guess since we haven't documented or published the feature yet we could still just count it as a patch. also added onOcclude so that the user can freely control/animate the transition. will make a new pr for this |
|
Hey, This feature is really cool but it seems to drop the frame rate of DRASTICALLY when in use. Anyone else have this problem? |
Why
Check visibility by distance
Resolves #340
What
Add a 'checkDepth' property which can be set to
trueto activate testing if the HTML object is visible from the camera. Check is handled by raycasting.Checklist