I am using Three.js to create graphical effects and cannon figure this one out. I am using the EffectComposer and adding either UnrealBloom or standard Bloom effect but the output is not as desired.
I know it is doing what it is supposed to but I am just wondering how to go about getting Bloom on specific objects only.
I tried rendering a different scene with it's own effect composer and superimposing the generated imagery using an additive blender but as you could imaging, the glow is degenerated and the object shows through objects that it should not.
I thought about using some sort of depth-buffer manipulation but was wondering if anyone has a better way of doing it.
The end result I would like is a normal looking scene but with a blue object this shines, giving a sci-fi type feel. Any help would be appreciated.
To get bloom, you need to have the objects to bloom be set to a brighter color than the rest of the scene, and have the bloom threshold set correctly.
That involves making sure that your overall lighting is dark enough so the whole scene doesn't get blown out...
Once you have the scene suitably dark, you can use BasicMaterials, or materials with emissive color set, to make the parts you want to bloom bright enough to cross the bloom threshhold.
Related
The player of my 3d game using threeJS with react (R3F) cannon, fiber is currently a sphere. This is because i want it to slide with no friction, and the geometric shapes that has sides/vertexes dont.
The thing i wanted to achieve is to have the same no-friction movement but making the useSphere object (or any that i can use with cannon) taller. But as it is a sphere is completely rounded so that i can only increase radious and i only want to make it taller not wider.
Any solution to this problem is welcome as my game is first person camera so i dont even show the player just want the correct physics with cannon library.
Ive seen that three js includes geometries like capsules: https://threejs.org/docs/#api/en/geometries/CapsuleGeometry
That i feel might work if i had the chance to use it with cannon but i dont know how to. I simply want a no edge shape that is taller than a ball, like a ball but larger. I think there might be a way to make a custom shape but i sincerely havent found anything.
Thanks in advance for your help, would be really nice to me.
I am working on a system to procedurally build meshes for "mines", right now I don't want to achieve visual perfection I am more focused on the basic.
I got the point in which I am able to generate the shape of the mines and from that generating the 2 meshes, one for the ground and one for the "walls" of the mine.
Now I am working on getting the UV mapping right but my problem is that the ground is really hard to map to UV coordinates properly and I am currently not able to get it right.
For the tessellation I am using a constrained version of the delaunay triangulation to which I added a sub-tessellation what simply splits the triangles at least once and keeps splitting them if the area of the triangle is greater than X.
Here a 2D rendering of the tessellation that highlight the contours, the triangles and the edges
Here the result of the 3D rendering (using three.js and webgl) with my current UV mapping applied (a displacement map as well, please ignore it for now).
I am taking a naive approach to the UV mapping, each vertex of a triangle in the grid is translated to values between 0 and 1 and that's it.
I think that, in theory should be right, but the issue is with the order of the vertexes that is creating a problem but if that would be the case the texture should be shown rotated or oddly not just oddly AND stretched like that.
Once I will get the UV mapping right, the next step would be to correctly implement the
I am currently writing this in javascript but any hint or solution in any language would be alright, I don't mind converting and/or re-engineering it to make it work.
My goal is to be able to procedurally build the mesh, send it to multiple clients and achieve the same visual rendering. I need to add quite a few bits and pieces after this other step is implemented so I can't rely on shaders on the client side because otherwise being able to place tracks, carts or something else on the ground would just be impossible for the server.
Once I will get these things sorted out, I will switch to Unity 3D for the rendering on the client side, webgl and three.js are currently being used just to have a quick and easy way to view what's being produced without the need of a client/server whole infrastructure.
Any suggestion?
Thanks!
I sorted out the issue in my code, it was pretty stupid though: by mistake I was adding 3 UV mappings per triangle and not 1 per point causing an huge visual mess. Sorted out that, I was able to achieve what I needed!
https://www.youtube.com/watch?v=DHF4YWYG7FM
Still a lot of work to do but starts to look decent!
In my current project I need to make a visible spotlight, just like one which calls batman. I mean that cone of light, that you can see on a night sky.
I haven't any graphical or 3d experience and I just can't make light visible.
Would be nice if you can show me how do that or give couple advice.
Here is codepen for experiments.
Thanks a lot.
P.S. I need visible whole cone, not just reflection from box.
JSFiddle Demo of batsignal-type spotlight
Lights (and shadows) can be tricky for many reasons. They have many parameters and require much tweaking to look right. Just getting light to show up can be a little counter-intuitive which is why this line of code is your best friend:
light.shadowMapVisible = true;
Light objects are not visible. If you look at one, you won't see anything. If you want a sun in a sky that lights up your scene, you must create the light source and the sun object if you want something to see.
Getting light to show up usually means providing a surface upon which light can shine. In the example above, that surface is a sphere that surrounds us. In our example, we also build a yellow transparent cone to fake the beam of light. Try adding a texture to this cone to achieve greater realism. In real life, this cone would be visible as light from a spotlight reflecting off tiny particles in the air. In our 3d world, there are no particles to reflect off of unless we put them there, hence the cone. Good luck!
Tips:
Remember that there are many kinds of lights. Some can cast shadows, some cannot. Some affect only certain materials.
The renderer has a parameter called "maxLights" that defaults to 4.
I've been working on a WebGL project that runs on top of the Three.js library. I am rendering several semi-transparent meshes, and I notice that depending on the angle you tilt the camera, a different object is on top.
To illustrate the problem, I made a quick demo using three semi-transparent cubes. When you rotate the image past perpendicular to the screen, the second half of the smallest cube "jumps" and is no longer visible. However, shouldn't it still be visible? I tried adjusting some of the blending equations, but that didn't seem to make a difference.
What I'm wondering is whether or not this is a bug in WebGL/Three, or something I can fix. Any insight would be much appreciated :)
Well, that's something they weren't able to solve when they invented all this hardware accelerated graphics business and sounds like we'll have to deal with this for a long while.
The issue here is that graphic cards do not sort the polygons, nor objects. The graphics card is "dumb", you tell it to draw an object and it will draw the pixels that represent it and also, in another non-visible "image" called zbuffer (or depthbuffer), will draw the pixels that represent the object but instead of color it will draw the distance to the camera for each pixels. Any other objects that you draw afterwards, the graphics card will check if the distance to the camera for each pixel, and if it's farther, it won't draw it (unless you disable the check, that is).
This speeds up things a lot and gives you nice intersections between solid objects. But it doesn't play well with transparency. Say that you have 2 transparent objects and you want A to be drawn behind B. You'll need to tell the graphics card to draw A first and then B. This works fine as long as they're not intersecting. In order to draw 2 transparent objects intersecting then the graphics would have to sort all the polygons, and as the graphics card doesn't do that, then you'll have to do it.
It's one of these things that you need to understand and specifically tweak for your case.
In three.js, if you set material.transparent = true we'll sort that object so it's drawn before (earlier) other objects that are in front. But we can't really help you if you want to intersect them.
Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.