For a texture with transparency, alphaTest can be used, but if using alphaToCoverage instead, shadows lack alpha. This is problematic for cases like grass billboards where the docs recommend to use alphaToCoverage, but don’t explain how / what needs to be configured to get alpha on the shadow. Solution When writing to the shadow map,… Continue reading shadows to use alphaToCoverage
Author: Vishnu MR
WebXRManager: Use reported XRView.eye for setting stereo layers
XRView.eye when creating cameras for an XR device’s views – as well as finalising for cameras beyond the first two. Remove the explicit cameraL and cameraR variables, as well as the separate cameras array in favour of directly using cameraXR.cameras, and relying entirely on the device’s reported XRViewerPose. The knock-on of this is that all the cameras are created on receiving the device’s first XRViewerPose, rather… Continue reading WebXRManager: Use reported XRView.eye for setting stereo layers
Combining Three.js, Rust, and WebAssembly
WebAssembly has been specifically the prospect of doing arithmetically-intensive operations with it, not unlike the fantastic physics engine Emscripten port Ammo.js. Compiling something like that is out of the scope of this little post (but should be getting easier!), and I’ve left some links at the bottom so you can clear more about WebAssembly if you’re interested.… Continue reading Combining Three.js, Rust, and WebAssembly
Multiple Canvases Multiple Scenes
A common question is how to use THREE.js with multiple canvases. Let’s say you want to make an e-commerce site or you want to make a page with lots of 3D diagrams. At first glance it appears easy. Just make a canvas every where you want a diagram. For each canvas make a Renderer. You’ll quickly… Continue reading Multiple Canvases Multiple Scenes
renderToScreen
Whether or not to render to the canvas instead the current destination render target. In most use cases you do not set this flag explicitly since the last pass in the pass chain is automatically rendered to screen. Let’s put together a basic example. We’ll start with the example from the article on responsiveness. To that… Continue reading renderToScreen
VR – Look to Select
The simplest and possibly most common is the Google Cardboard style of VR which is basically a phone put into a $5 – $50 face mask. This kind of VR has no controller so people have to come up with creative solutions for allowing user input. The most common solution is “look to select” where… Continue reading VR – Look to Select
NavMesh
Generating a NavMesh The easiest way to generate a NavMesh is using the high level generator functions from recast-navigation/generators: generateSoloNavMesh – Generates a NavMesh with a single tile. You can use this for smaller environments. generateTiledNavMesh – Generates a NavMesh with multiple tiles. You should use this for larger environments. generateTileCache – Generates a TileCache that supports temporary obstacles.… Continue reading NavMesh
recast-navigation-js
recast-navigation-js is a WebAssembly port of the Recast and Detour libraries. Recast is a state of the art navigation mesh construction toolset for games, and Detour is a path-finding and spatial reasoning toolkit. This library provides high level APIs that make it easy to get started creating navigation meshes, querying them, and simulating crowds. It also provides… Continue reading recast-navigation-js
SDF
SDF stands for Signed Distance Field and is usually used in fragment shaders to draw shapes. The idea is that we send a 2D or 3D point to a SDF shape function and that function returns how far that point is from the shape. There are many possible shapes, as long as they can be… Continue reading SDF
Configuring the shadows
Each light casting shadows will render the scene in a specific way and output that we call “shadow map”. This shadow map is then used to know if a surface is in the shade or not. By default, that shadow map resolution is rather low in order to maintain solid performance. Fortunately, we can change… Continue reading Configuring the shadows