How to optimize camera property changes in three.js? - javascript

I am basically using a modified version of the random points WebGL three.js demo that can be found here:
https://threejs.org/examples/#webgl_points_random
Now I added a scroll event listener to change the fov and position of the camera when scrolling down, but because of the way cameras work in three.js, I have to update the camera projection matrix in every frame and this is very bad for the performance as you can see in the following examples:
Although it's quite smooth in firefox
it is very choppy on other browser such as Safari or Chrome.

Related

Mapbox free camera "look at" with adjustable height

I'm trying to change the camera 'look at' height on the mapbox scene which include 3d objects
https://srvlc.sse.codesandbox.io/ or https://codesandbox.io/s/srvlc
You can see if you maximum zoom-out, camera target height is 0, I mean directly on the map, which is fine for small 3d objects, but not for big. I added an issue on their git too for a feature request, but meanwhile I'm curious if there is a workaround or something which I missed
I tried with map.transform._centerAltitude which seems to work for zoom, but broke pann & rotate controls

EDL Shader in Potree Viewer with orthographic mode

I have a problem with EDL Shader in Potree Viewer. While it works correct with perspective mode, I am in need to use orthographic mode in my project.
Please see the GIF and the example at the bottom.
There is a problem with EDL Renderer that does not work correctly with an orthographic mode. The problem appears when you zoom the point cloud. At some point, shadows disappear and we lose the depth perception.
You should be able to reproduce this on any public example. Just remember to set the orthographic mode from the Tools panel in the sidebar.
I would really appreciate any help.
You can see how it looks like on this GIF:
https://im.ezgif.com/tmp/ezgif-1-9e188b342d1c.gif
The example I used in GIF is available here: http://www.potree.org/potree/examples/lion_laz.html
You can see Potree shaders here: https://github.com/potree/potree/tree/develop/src/materials/shaders
Also, navigation controls that manipulate position of the camera:
https://github.com/potree/potree/blob/develop/src/navigation/OrbitControls.js
The example you linked to looks like the EDL shading gets cut off at the same time that the camera's near plane is crossed. You can see this by switching between perspective and ortho view; shading ends at the same point when the particles no longer show in the perspective cam.
You could change the camera.near value to something lower, I think you can even set it as a negative value on Ortho cams.

three.js Raycaster does seem to work on the basis of the first key frame of animation all the time

Raycasting selection is working fine for my project on static meshes, however for animated meshes the ray selection doesn't seem to see the movement of the mesh and only responds to the mesh's non-animated (original) position.
This is an animated model that can only pick up the pose state below the first frame and creates a small red dot when I detect the model
The bones matrices are computed by the CPU, but the new vertex positions are computed by GPU.
So the CPU has access to the first pose only.
That's why RayCasting does not work (properly) for skinned meshes.
My idea is to update the model position when updating the animation, or use GPU calculations to get the location, but I don't know how to do it. I'm looking forward to your suggestions. Thank you.
Static model
Animated model
jsfddle view
Currently, raycasting in three.js supports morph targets (for THREE.Geometry only) by replicating the vertex shader computations on the CPU.
So yes, in theory, you could add the same functionality to support raycasting for skinned meshes for both THREE.Geometry and THREE.BufferGeometry. However, a more efficient approach would be to use "GPU picking".
You can find an example of GPU picking in this three.js example. In the example, the objects are not animated, but the concept is the same.
three.js r.98

three.js OrbitControls follow mouse pointer

I made some website that implemented with three.js for a 3d graphical project.
I have to use OrbitControls for zoom in/out with mouse wheel. (And now I'm using it)
But I wonder that OrbitControls has some properties that can make the camera follow mouse pointer?
Reference site is here: https://50-jahre-hitparade.ch/
Access that site and move the mouse pointer, camera follows the mouse pointer.
I want to implement 100% same with the above site's camera move.
Is there any solution for this?
Thanks.
I think in that example they are probably just setting camera.rotation.x and .y as the normalized cursor screen coordinate.

Prevent aliasing SVG element when zooming on iOS device

I've been tasked with fixing an issue in my company's web application that involves SVG graphs generated using the D3 library. The issue is at hand is that the graphs display fine initially; however, when viewed using an iPad or other iOS device and the user zooms in on the graphs, they quickly become aliased/"fuzzy" - I'd like to prevent this loss of quality, if possible.
You can see examples of the issue here: normal graph, zoomed graph
I've never worked with SVG or D3 before, and I'm not sure if they provide any options for handling this sort of thing; if they do, I haven't been able to find them in any of the documentation I've read.
I a feeling this may be the product of the iOS zooming method and they may not be anything I can do about it besides attempting to catch the zoom event and trigger the re-rending of the graph at the desired magnification level, although I'm not sure if that's possible.
If anyone has some suggestions on how I could go about fixing this, I'd greatly appreciate the advice.
The default zoom behavior on iOS uses a fixed-resolution texture while zooming; this is known as hardware-accelerated zooming. Thus, if you take a small part of the page and zoom in using two fingers, the graphics may appear temporarily pixelated while zooming. This is true of any page, so many iOS users are likely accustomed to it.
The nice thing about SVG, being a vector graphics format, is that as soon as you release your fingers the browser will re-render the SVG at the new resolution.
If you want to maintain crisp resolution while zooming, you need to disable native hardware-accelerated zooming, and instead re-render the graph in response to touch events. You can use d3.behavior.zoom to add panning and zooming interaction to a visualization. However, note that depending on the complexity of the visualization, this may be slower than hardware-accelerated zooming.
Here's an example that combines d3.behavior.zoom with d3.geo.path to demonstrate the technique: http://bl.ocks.org/2374239.

Categories