I am new to three.js and I created a classic sphere, wrapped with a world color map & bump map and an alpha map for clouds, and directional sunlight. How can I now add an earth at night texture only on the shadow side of the globe? The globe is rotating, so I couldn't just create 2 half-spheres.
I tried adding this grayscale mask to the texture, but it is also visible in daytime. I then tried illuminating the map with a different light aimed at the dark side, but couldn't selectively target only one material. I didn't quite understand if I need to use "emissiveMap".
Could I shine a light through a semi-transparent map/mask from the center of the earth to make the cities visible, or is there some type of "black light" to only make selected color/map areas shine in the dark?
I don't need any glowing effects, I just want it to be visible. Will I have to create individual light points or learn to use fragment shaders?
Related
I have a MeshBasicMaterial which has a planegeomatry.the material is around the plane like an outline and will be green initially.i have a clock in the app.i need to reduce the length of the outline every seconds to alert user their time is running out.so the outline will flow from top of the plane clockwise fading and disappear when the time runs out.hope you get the idea.now can anyone help me how to achieve this.
One way to solve this: create a ring geometry and animate its property thetaLength using animejs or tweenjs.
Create a ring in a 3D app, that mapping coordinates that run down the length of the mesh. Then create a gradient texture, that is half black, half white, (1x256). Apply the texture to the material on the ring mesh. Animate the texture offset using animejs.
If you really want the best performance, create a procedural texture using glsl shader, and map that onto a plane.
I have a house scene where it has number of walls, when i add directional or spot lights the light passes through walls irrespective of the direction of light positioned.How can i make my light not to pass the wall ?
That is not a way how the WebGL 3D rendering works. All materials will be affected by light. You can render a shadows: http://learningthreejs.com/blog/2012/01/20/casting-shadows/
but, that means the light on the Meshes will be always rendered and after this will be rendered a shadow. That means, if you have a meshPhong material with a high shininess, it will be rendered visible and darkened by the shadow, which is not physically possible in real.
i am trying to cast an shadow on an totally transparent plane in SceneKit on OSX. I am struggling with this problem since several hours and do not come to any solution.
My Purpose is to generate an Screenshot of several objects with an transparent background and just the shadow on an invisible Plane.
Do you have any suggestions for me how i can make this with apples SceneKit?
Do i have to program my own shader, can i make this work with shadermodifiers or can i use built in functionallity?
UPDATE:
I find an alternative solution for anyone who needs:
create a white plane under 3D model, note that the color of plane must be pure white.
set blend mode of plane's material to SCNBlendModeMultiply.
set light model of plane's material to SCNLightingModelLambert.
This works because any color multiply white color (1, ,1, 1) return itself And lambert light model will not take account of directional light, So the plane will always be background color which look like transparent. Another benefit of this solution is you don't need change light‘s shadow rendering mode.
For people who used to inspector of Xcode.
According to SceneKit: What's New.
First, add a plane under you model. Then prevent it from writing to colorBuffer.
Second, change your light model's shadow rendering mode to deferred. Notice that you must use light which can cast shadows.
Oily Guo, your solution works. Here the solution is in code:
Configuration of the light source:
light.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.4)
light.shadowMode = .deferred
And for the floor (ie. SCNFloor underneath your objects):
material.diffuse.contents = UIColor.white
material.colorBufferWriteMask = SCNColorMask(rawValue: 0)
I do not have an answer to your question, however I have a workaround:
Render your scene and keep the image in memory
Change all the materials in your object for pure black, no specular
Change the plane and the sky to a fully white material, lights to white
Render the scene to another image
On the second image, apply the CIColorInvertand CIMaskToAlpha Core Image filters
Using Core Image apply the Alpha Mask to the first render.
You'll get an image with a correct Alpha channel, and transparent shadows. You will need to tweak the materials and lights to get the results you want.
The shadow may become lighter on the edges, and the only way around that is rendering it as yet another image, and filling it with black after the Mask to Alpha step.
I'm trying to create a shadow in my orthographic scene in three.js. I'd like to have a directional light so the shadow is offset from all objects equally in the scene. I am however having problems using DirectionalLight.
My first problem is that I can't get the shado to cover the entire scene, only part of it ever has a shadow. I played with the light's frustum settings, but can't figure out how to get it to cover the scene. Ideally I'd want the frustrum to match that of the camera.
The second problem is that the shadows aren't "clean". If I use a SpotLight the shadows have nice crisp borders (but obviously not the universal directionality I want). When I use a DirectionalLight the borders are misshappen and blurry.
In the samples the tile is a simply box created with CubeGeometry.
How can I create an ortographic directional light source for my scene?
I am trying to make a 3d car race in iphone using OPENGL ES 1.x.
I do not know how to draw the background sky in my scene. I tried using only planes for background but where should i placed that plane? I mean if i placed that plane outside the whole track then the frustum is not so big to show that planes in the scene.
Any suggestions will be of great help.
You can make a small skysphere or box, as suggested by Davido and turbovonce's link, which is centered around the viwer and fits into the frustum. You draw this first, without writing into the depth buffer. Then you draw the other stuff and as the skybox has not written to depth buffer it is just overwritten, except the parts where no scene objects are rendered, which are exactly the parts of the image where the sky should be visible.
You want a sky dome. Take a look at this website, it contains tons of references that should help you.
http://www.vterrain.org/Atmosphere/
Create a sphere in a 3d modeling app such as Maya or Blender and map a sky texture to the sphere. Export the model then load the model and its texture into the app, place in the scene. You should now have a background sky rendering in your game.