I tried disabling frustum culling, to no avail.
Using the latest version (r180)
This also happens with the old CanvasRenderer, so I’m thinking the problem may come from Projector.js
I put this as a question since I’m not sure if I’m doing something wrong, or if it’s a bug.
Thanks in advance!
EDIT: mrdoob fixed it : D
I’m not sure that it is a bug per se, but more of a limitation of those types of renderers. Implementing proper polygon clipping is very complex and has a high performance cost, so its quite possible it is just not built into the implementation. Is there a reason you need to use the SVGRenderer, and cannot instead use the SVGLoader to load your SVGs and render them with webGLrenderer? It will perform muuuuch better…
Hey thanks for your answer
I’m running ThreeJS in browsers where WebGL might be unavailable / unsupported.
If there’s no WebGL1/WebGL2/WebGPU, I fallback to SVGRenderer.
Hmm ok. Which browsers are that? I think chrome, edge and safari account for >90% of the browser market share.. and they all have at least software fallback for webgl at this point.
If you have to restrict yourself to svgrenderer, then I guess maybe restricting the camera to avoid geometry touching the near plane of the camera?
Firefox… 52.9.0 ESR (on Windows XP) lmao.
I’m making a game that runs on as many browsers/systems as possible.
Clipping issues also occur when the camera is far away from the plane, so restricting the camera wouldn’t help unfortunately.
It might be a frustum culling issue causing that extreme dropout.
If you set .frustumCulled = false on the meshes does that change how much it drops out?
.frustumCulled doesn’t seem to change anything D:
If you want to check out the issue I made a JSFiddle:
I found this: “All SVG elements are 2D, but can give the impression of being 3D when rotated.” Thats why disapearing.
It also happens with CanvasRenderer, I don’t think it’s an SVG issue
Ask @Mugen87
SVGRenderer/CanvasRenderer are for specific (rare) use cases. They are not just drop in replacement renderers for complex THREEJS 3d scenes.
Its the equivalent of dropping a push scooter into the fast lane of the autobahn. It may “work” but it’s a crime.
My advice is to pretend like SVG/CanvasRenderer don’t exist. Ditch support for whatever “device” you have that doesn’t support WebGL. If you absolutely have to support those devices.. consider making a version of your app that is just implemented in pure HTML.. and use WebGL/threejs for the 3d version/devices that support it.
My whole goal is for my 3D game to support ancient devices that don’t support WebGL
A 3D game in pure HTML isn’t 3D anymore lol
https://github.com/kevinroast/phoria.js seems to have no clipping issues, so I guess I could fork it and make it support ThreeJS scenes.
Yeah that could be a good approach. There is also the “CSSRenderer” which I believe doesn’t have the same clipping issues.
CSS3DRenderer seems interesting although it doesn’t support geometries. I’ll give it a try. Thanks!