THREE JS, can often seem angular and straight edged. I haven't used it for very long and thus am struggling to understand how to curve the world so to speak. I would imagine a renderer or something must be changed, but the idea is to take a 2d map and turn it into a simple three lane running game. However, if you look at the picture below from another similar game, how can i achieve the fish eye effect?
I would do that kind of effect on per-vertex base depending on the distance from the camera.
Also, maybe a bit tweaked perspective camera with bigger vertical fov would boost up the effect of the "curviness".
It's just a simple distortion effect that has been simulated in some way, it probably isn't really curved. Hope this helps.
I'm sure there are many possible different approaches... Here's one that creates nice barrel distortion effect.
You can do something like that by rendering normal wide angle camera to a texture, then project it to a lens-shaped plane (a sphere even), then the actual on-screen render is from a camera pointing to that.
I don't have the code available ATM, but I should be able to dig it up in few days if interested. Or you can just adapt from the three.js examples. Three.js includes some postprocessing examples where the scene is first rendered into a texture, that texture is applied to a a quad then photographed with ortographic camera. You can modify such an example by changing the ortographic camera to a perspective one, then distorting/changing the quad to something more appropriately shaped.
Taken to extremes, this approach can produce some pixelization / blocky artifacts.
Related
I am working on a infinite runner game, where 3d objects are involved - A rover and some obstacles, that move on a terrain. The game is made using p5.js WebGL functionality. I have almost completed the game, but the game should end when the rover hits any obstacle. I just want to know if I can detect the collision of both the 3d objects(the rover is a plane, and the obstacle is custom loaded model) and end the game...Simply, I want to know whether collision detection in WebGL is feasible, and if so how?
Please help me out on the same.
Thank you.
Ideally, indeed, you'd post a minimal sketch of your attempt at detecting the collision: something to make it easier for other to contribute (without making to many wild guesses on your behalf).
One idea is to check if the bounding box of the 3d model (defined by it's minX, minY, minZ, maxX, maxY, maxZ values) intersects with the plane (or the bounding box of the plane if it's simpler to keep things consistent). It won't be 100% accurate, depending on the loaded model (we don't even know what that is is), but it's a decent initial step.
For more accuracy a convex hull would be handy. If computing that from scratch in p5.js might prove difficult, perhaps you could use the same 3D editor to export the model to also generate a convex hull of the original model and export that to be used as simpler collision mesh.
Additionally, even through more advanced, you can look into using a physics engine such as ammo.js to handle the heavy collision math (and more) for you. (checkout the vehicle demo).
Im trying to create an effect where I have multiple images/meshes on the same sine wave. I can distort all separately, but of course they are not in sync.
In the vertex shader I have this line for the simple distortion:
pos.z += sin(pos.y);
My Idea would be to make the sin wave independent from the pos.y value and replace it with something like the current position y in the height of all of my images.
My other Idea would be to have only one mesh and paste every image on it, but I am not sure if it is a good practice or if that would work at all.
I would be greatful for any suggestion on how to implement this.
Thanks!
Yes, this is possible. See this example, which shows 4 adjacent grids in sync. You have to adjust certain values to put them all in sync. At present, I had been able to do so only in directions of 45 degree increments. But you can use multiple waves of varying magnitudes and frequency.
The example was created using three.js code to perform the animation, but I have been able to replicate some of this using a shader.
Let me know if you still need help.
I'm using a Perspective Camera for my top down Three.js game, but it curves a bit too much because it's designed to be used as "first person view". Is there a way to adjust how much objects bend/curve in the frustum from the sides?
Essentially, I would like something like a mix of a Perspective Camera and an Orthographic Camera
E.g -- The walls of the buildings should be less visible from a certain distance
You can adjust the camera FOV.
https://threejs.org/docs/?q=persp#api/en/cameras/PerspectiveCamera
Made a simple Pen here:
https://codepen.io/cdeep/pen/eYEOqrz
camera.fov = 30;
camera.updateProjectionMatrix ();
The lesser the FOV, the more flatter things look.
Please note that you'll need to position the camera farther away at lower FOVs to ensure the contents fit inside the view which also requires you to increase the camera's far property so things don't get cut out
Has anybody used ThreeJS StereoEffect and Raycaster together for collision detection (in stereo view). In standard full screen view I can easily check if a Vector2 in the middle of the screen colides with an object in my scene. When I switch on the stereo effect I in effect get 2 scenes, and the collision detection stops working, but I am not really sure how to proceed. Should I create two new vector2d objects, one for each view - help :) ...
It's a bit late, but ...
I encountered a similar problem, I eventually found the reason. Actually in StereoEffect THREE.js displays the meshes on the two eyes, but in reality is actually adds only one mesh to the scene, exactly in the middle of the line left-eye-mesh <-> right-eye-mesh, hidden to the viewer.
So when you use the raycaster, you need to use it on the real mesh on the middle, not the illusion displayed on each eye !
I detailled here how to do it
Three.js StereoEffect displays meshes across 2 eyes
Hopes it solves your problem !
You can use my StereoEffect.js file in your project for resolving problem. See example of using.
I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture.
I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.html which kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).
Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html but again it glows the entire region, not only "outer" thing.
I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.
Please share your ideas, thanks!
I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:
http://stemkoski.github.io/Three.js/Atmosphere.html
To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.
[updated April 30th]
Next, similar to the source code from
http://stemkoski.github.io/Three.js/Selective-Glow.html
the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.
I hope this helps you get started. Good luck!
[updated June 11]
I have a new example which achieves the same effect in a much simpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:
http://stemkoski.github.io/Three.js/Shader-Halo.html
Still haven't figured out the pan/zoom issues though.
[Updated July 24]
I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformation and for the final working example, see:
http://stemkoski.github.io/Three.js/Shader-Glow.html.
I'm pretty happy with the final result, so I will not be updating this answer any more :)
In the example you are referring to, I used a blue glow with additive blending -- if you used a white color instead maybe that would produce the effect you want.