I've been trying to work out how to clip / not render anything that falls outside of a box, exactly like how Godus works (pictured below: notice the clipping at the back)…
Originally, I experimented with constructive solid geometry (CSG) to manually split and clip every object that falls on the box boundary. However, this is hugely computationally intensive and isn't feasible for a system where I want to be able to scroll around and have the clipped area update in realtime.
Is there a way to achieve this in a way that runs in realtime without modification of the objects, perhaps with shaders or something else? I'm new to shaders and still don't quite understand them enough to know how to implement this myself.
I appreciate the help!
Can the camera go outside of the box? If not, just put a big cube around the area you want and give its inside faces a material.
If the camera can go outside of the box (which would be weird, since you'd be able to see through the back of the meshes) one thing you might try is using vertex colors to make all faces outside of your box the same solid color as the background.
Related
In order to solve the problem of z-fighting, I limited the near and far of camera to a small range.But when I want to add a larger object,it was culled by view frustum.
I tried object3d.frustumCulled property,not working as expected,the reason is as follows:
https://github.com/mrdoob/three.js/issues/12170
So,is there a way to ensure that some specific objects are not frustum culled without changing the camera near and far? THX.
Culling doesn't mean that an object is drawn or not. It can be either drawn or not drawn depending on where it is. It is an optimization that tries to say something like this:
Hey, i have a really cheap check (plane/sphere intersection) that i can do and tell you if you need to attempt to draw this at all.
So you do a cheap check, and if the object is guaranteed to be entirely out of the frustum, you never issue the draw call. If it intersects, you have to issue a draw call, but you may still see nothing if none of the triangles are actually in the frustum.
If you download something like specter.js and inspect your draw calls, you will infact see that with frustumCulled = false you get a draw call for every object in your scene. Your screen may be empty.
I try to implement a scene, where an object is updated in different way for each eye (eg. I want to project opposite rotation of box for each eye).
I have demo application written with WebGL using Three.js as described in Google Developers tutorial.
But there is only one scene, containing one mesh, with single update function. I can't find way to implement separation of update, so it's done seperately for each eye (just as rendering is done) and wonder if it's even possible.
Anybody has any experiences with similar case?
Your use case is rather unusual (and may I say, eye-watering), so basically the answer is no: Three.js has abstracted away the left/right eye dichotomy of VR. Internally it renders the scene using an array of 2 camera's, with the correct left/eye setting.
Fortunately, every object has an onBeforeRender(renderer, scene, camera, ...) event. If you hook that event, and find a way to distinguish the left/right eye camera you should be able to modify the orientation just before it gets rendered.
A (perhaps too) simple way to distinguish the camera's would be to keep a track of the index with a counter.
How can I set a black color to the whole screen, excluding a shaperenderer circle? The circle is basically my game world, anything that leaves it shouldn't be visible. Is there some way to create a reverse circle pixmap (eg..A circle, but inverted) to overlay everything except for the circle game area? Or maybe a way to clear the screen, excluding parts? Thanks!
You could try the approach you mentioned in the comments. Using a black image with a circular hole in it. Then have each assigned to a different camera much in the same way you would set up a HUD in libgdx.
You might want to take a look at shaders, this approach is really flexible and lets you even control how rapid the transition is. Just the basics of GLSL should be sufficient.
https://www.youtube.com/watch?v=caQZKeAYgD8 Here's a decent tutorial.
I'm currently rendering a skybox to a THREE.CubeCamera target and am then using that target as the environment map on a material. The idea being that I want to have the colour of a cube affected by the colour of the sky around it, though not fully reflecting it (like how a white matte cube would look in the real world).
For example, here is what I have so far applying the environment map to a THREE.LambertMaterial or THREE.PhongMaterial with reflectivity set to 0.7 (same results):
Notice in the first image that the horizon line is clearly visible (this is at sunset when it's most obvious) and that the material is very reflective. The second image shows the same visible horizon line, which moves with the camera as you orbit. The third image shows the box at midday with blue sky above it (notice how the blue is reflected very strongly).
The effect I'm trying to aim for is a duller, perhaps blurred representation of what we can already see working here. I want the sky to affect the cube but I don't want to fully reflect it, instead I want each side of the cube to have a much more subtle effect without a visible horizon line.
I've experimented with the reflection property of the materials without much luck. Yes, it reduces the reflection effect but it also removes most of the colouring taken from the skybox. I've also tried the shininess property of THREE.PhongMaterial but that didn't seem to do much, if anything.
I understand that environment maps are meant to be reflections, however my hope is that there is a way to achieve what I'm after. I want a reflection of the sky, I just need it to be much less precise and instead more blurred / matte.
What could I do to achieve this?
I achieve this writing my own custom shader based on physically based rendering shading model.
I use cook-torrance model that consider roughness of the material for specular contribution. It's not an easy argument that I can talk in this answer, you can find great references here http://graphicrants.blogspot.it/ at the specular BRDF article.
In this question you can find how I achieve the blurry reflection depending on material roughness.
Hope it can help.
I solved this by passing a different set of textures that were blurred to be the cubemap for the object.
I have 3 nice and puffy clouds I made in Photoshop, all the same size, now I would like to animate them so they appear like they were moving in the background. I want this animation to be the base background in all my scenes (menu,settings, score, game).
I'm using cocos2d, I have setup the menus and the buttons so the work but how do I accomplish this?
I was thinking to add this as a layer, any other suggestions?
Can anyone show me how some code how to make this please?
David H
A simple way to do it is with sine and cosine. Have slighly different parameters (period and amplitude) to ensure that the user doesn't realise (as easily) that they are programmatically animated.
You may also want to play with animating the opacity value. I'm not sure if layers have those, otherwise you'll have to add the clouds to separate nodes or images and applying it to them.
It's hard to be more specific without knowing what the images look like.
The simplest way to animate anything is to add the sprite to the scene, set the position and call something like...
[myClouds runAction:[CCMoveBy actionWithDuration:10 position:CGPointMake(200, 0)]];
This will slide the sprite 200px to the right over 10 seconds. As Srekel suggested, you can play around with some trig functions to get a more natural feel and motion paths, but you'll have to schedule a selector and iteratively reposition the elements.
The more difficult part of your questions is about getting the animation in the background of all scenes. Keep in mind that when you switch scenes, you're unloading one node hierarchy and loading a new one. The background cannot be shared. You CAN, however, duplicate the sprites and animation in all scenes, but when you transition between them there will be a jump.