Suppose you want to do 360 panorama demo using equirectangular texture. Easy way would be to use sphere mesh, with enough triangles distortions are invisible, and the client is happy. The few of us, who are dealing with “make me another matterport” bullshit, are not so lucky – we have to project images onto complex meshes and, therefore, write the shaders. Continue reading ‘Sampling equirectangular textures’
Posts Tagged 'three.js'
While all the top google hits for this problem revolve around messing with matrixAutoUpdate property, I thought I’d share this simple trick:
object.matrix.copy (...); // or fromArray (...), etc object.matrix.decompose ( object.position, object.quaternion, object.scale );
This only really works with the matrices that can be represented with three.js’ position/quaternion/scale model, but in practice this is vast majority of the cases. You’re welcome.
Tags: 3D, geometry, three.js
Ok, this post is still about three.js and GLSL shaders, but unlike raytracing loads of cubes or relativity simulations, this is something more down-to-earth. In this post, we shall discuss some possible alternatives to gl_FrontFacing in your WebGL apps… Continue reading ‘On the alternative to gl_FrontFacing’
How do you handle the problem of 2D overlays in three.js-based app? You can go for camera-oriented planes, I guess, or maybe use sprites, but with just a few of them overlays why not just use DOM? The trick is to wrap the canvas in overflow:hidden element with display:relative or absolute, and place your overlays in there. This method has several problems that needs to be addressed.
When do you show and hide the overlays?
Object3D add() and remove() methods dispatch ‘added’ and ‘removed’ events, but this is only part of the story. You have to check if other objects obscure your overlay anchor, or else it will incorrectly show up on top of those objects. In simple cases, you could calculate this analytically, but general solution would have to rely on something like ray casting.
Yes they can, by overriding Object3D’s updateMatrixWorld() method, which is called on every object when you render the scene. Of course, you still have to call original method, too.
The above method implementation will look like this. As always, feel free to discuss this stuff in comments.
Do three.js sprites support custom shaders?
No. They have SpriteMaterial thing that holds your
beer parameters for this shader. You can see that this shader is compiled once and is totally inaccessible from outside of SpritePlugin.
What do I do about this? Continue reading ‘Three.js sprites and custom shaders?’
Well, BokehShader was created 5 years ago, and it is about time that someone made it better ;) In particular, you can see a sort of halo around completely sharp objects (the girl). This happens because BokehShader only takes in account the depth of target pixel, causing nearby objects to leak into the output even if they are in focus. To fight it, we can weight the pixels with abs(theirDepth.x – focus). This obviously doubles the number of texture sampling, so we have to cut the number of samples to maintain reasonable performance. The result, however, looks somewhat better:
Last month I had to create spine runtime for three.js for one of the projects. Basically, animating a number of planes with transparent texture(s), nothing fancy. But, new year brings new challenge – the client wants these animations to work with dof effect. However, adding dof effect in the project “as is” did this:
Continue reading ‘Three.js’ depth-of-field effect and transparent objects’