I found a great three.js demo here: http://mrdoob.github.com/three.js/examples/canvas_geometry_earth.html
I noticed, that there are some line in the shadow of the earth. Is it a bug, or the author made it by design?
That lines are there because geometry used for shadow has an overdraw: true parameter.
That parameter is used to hide some anti-alias gaps using CanvasRenderer. It works fine for opaque textures, like the earth one, but not for transparent textures, like the shadow, because the "overdrawing" effect.
Remove parameter, or change it to false, and you can see the difference.
Related
screen_shot_showing_diagonal_lines
My THREE.js project is rendering these weird diagonal lines. I searched online and see that the issue is due to object casting shadow on itself.
While changing the shadow.bias property did help, it also created a gap between the object casting the shadow and the plane receiving the shadow ("peter-panning"). Note the directional light here is the only light source casting shadow in my scene.
this.directionalLight.shadow.bias = -0.001
I thought I might resolve this instead by changing the "castShadow" property of the ground plane meshes to false in the json file it is reading from so it will not cast shadow on itself but this doesn't seem to change anything in the rendering.
"castShadow": false,
"receiveShadow": true
I wonder if the shadow casting property is set somewhere else? or perhaps the issue is not with shadows at all (shadow.bias worked so it should be a shadows issue)? or there might be some other way to resolving this.
Thank you!
NOTE: It appears I oversimplified my initial question. See below for the edit.
I'm trying to combine the technique shown in the clipping/stencil example of Three.js, which uses the stencil buffer to render 'caps' when clipping geometry, with an EffectComposer-based rendering pipeline, but I am running into some difficulties. A fiddle demonstrating the problem can be found at https://jsfiddle.net/2vc76ajd/1/.
The EffectComposer has two passes: a RenderPass and a ShaderPass using CopyShader (see code below).
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
var shaderPass = new ShaderPass(CopyShader);
shaderPass.enabled = false;
composer.addPass(shaderPass);
The first renders the scene as usual, the latter merely copies the rendertarget onto a fullscreen quad. If I disable the ShaderPass everything works as intended: the geometry is clipped, and cutting planes are drawn in a different color:
When the ShaderPass is enabled by clicking the 'copy pass' checkbox in the upper right, however, the entire cutting plane gets rendered, rather than just the 'caps':
Presumably there is some interaction here between offscreen render targets and stencil buffers. However, I have so far been unable to find a way to have subsequent render passes look the same as the initial render. Can anyone tell me what I am missing?
EDIT: While WestLangley's answer solved my initial problem, it unfortunately doesn't work when you're using an SSAOPass, which is what I was doing before trying to simplify the problem for the question. I have posted an updated fiddle at https://jsfiddle.net/bavL98hf/1/, which includes the proposed fix and now toggles between a RenderPass or an SSAOPass. With SSAO turned on, the result is this:
I have tried setting stencilBuffer to true on all the render targets used in SSAOPass in addition to the ones in EffectComposer, but sadly that doesn't work this time. Can anyone tell me what else I am overlooking?
Created a simple scene with a cube in it. Able to see the color of the containing element, (body), in the background.
Added an FXAA shader and the antialiasing works well. However the background is now black, so can no longer see the color of the background container.
Added the following code:
var target = new THREE.WebGLRenderTarget(512, 512);
var composer = new THREE.EffectComposer( renderer, target );
in order to set the effect composer render target format to THREE.RGBAFormat, rather than the default THREE.RGBFormat.
This makes the background work properly, but then there are black and white edges around the cube and the antialiasing does not look very good.
Repeated the above but used the Sepia shader instead of the FXAA shader. This works correctly. The cube looks sepia and the background containing element color is correct.
Are there any workarounds to allow antialiasing and transparent background?
Thanks for any help
I read your issue and there seems to be a good source that can solve or at least lead you down the right path. Go check out: https://github.com/mrdoob/three.js/issues/2125
Hope this helps.
Check my answer in https://stackoverflow.com/a/21056080/2482976
The FXAA needed to be updated to handle the transparent background
I'm just a 3D newbie, and this is my first experiment with Three.js:
http://www.miguelrivero.net/mainWeb/images/portafolio/exp/BowieNextDay/heroesCoverCube.html
Any idea why the side textures show these wires?
Thanks!
You are probably using the canvas renderer. Although you seem to try to use WebGL, it falls back to Canvas. Try to update for more recent version first.
CanvasRenderer has this wireframe behaviour. To work around it, you can set material.overdraw to true. In r59 this parameter was changed from boolean to number.
WebGLRenderer should not have this problem, if you manage to get this to work.
I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.