I cannot get post-processing to work with EffectComposer and BloomPass
I've looked at the past stack overflow posts including making sure that there is a renderpass, bloompass, and then a copyshader, with rendertoscreen set to true on the last pass, but nothing seems to work.
Here is my code:
(I render a simple cylinder earlier)
var renderModel = new THREE.RenderPass( scene, camera );
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
var effectBloom = new THREE.BloomPass ( 1, 25, 5);
effectCopy.renderToScreen = true;
renderer.autoClear = false;
var composer = new THREE.EffectComposer( renderer );
composer.setSize( width,height );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass(effectCopy);
and then I render the scene with
composer.render( 0.05 );
instead of
renderer.render( scene, camera );
Expected result is just a cylinder rendered in the scene(when I comment out adding the bloom and copy pass to the effect composer)
Cannot post images because this is my first question, but it renders a light blue cylinder with a black background.
But instead I just get a black screen when I add the passes.
I have tried doing different combinations such as just the rendermodel and bloom effect but it still doesn't work.
I am using webgl2 if that has any significance.
In case anyone is having trouble and this solution works:
It ended up being some problem with the three.js I was importing from a cdn.
(https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.js)
I changed to a minified version of three.js I had downloaded earlier and post-processing started to work again.
Hopefully, this helps anyone with similar problems.
Related
I need help for getting UV Textures to be rendered correctly in three.js. I've created a model with repeating tile texture in Blender. The tile texture is applied using UV mapping, and it looks like this if it is being rendered correctly:
Render image using Blender
.However, when it is loaded using JSONLoader by three.js, the tiles are just stretched to fill each polygon, giving weird result like this:Screenshot of render using three.js
. I've tried setting THREE.RepeatWrapping in my code but nothing changed:
bodyLoader = new THREE.JSONLoader();
bodyLoader.load('./starofthesea_threejs.json', function(geometry, materials) {
mainBodyMaterials = new THREE.MeshFaceMaterial(materials);
console.log(materials);
mainBodyMaterials.wrapS = THREE.RepeatWrapping;
mainBodyMaterials.wrapT = THREE.RepeatWrapping;
mainBodyMaterials.needsUpdate = true;
mainBody = new THREE.Mesh(geometry, mainBodyMaterials);
mainBody.traverse ( function (child) {
if (child instanceof THREE.Mesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
mainBody.scale.x = mainBody.scale.y = mainBody.scale.z = 1;
geometry.computeBoundingBox();
geometry.computeFaceNormals();
geometry.computeFlatVertexNormals();
scene.add(mainBody);
});
Is there anything wrong in my code, or workaround to get it rendered correctly? All help is deeply appreciated.
Finally I've figured out the problem by myself, where both the Blender model and JS are misconfigured. RepeatWrapping should be applied to texture but not material. I need to study the structure of THREE.MeshFaceMaterial to find the handle for the underlying textures. I need to traverse through the materials to find out all materials with image textures:
mainBodyMaterials = new THREE.MeshFaceMaterial(materials);
for(prop in mainBodyMaterials.materials) {
if(mainBodyMaterials.materials[prop].map != null) {
mainBodyMaterials.materials[prop].map.wrapS = THREE.RepeatWrapping;
mainBodyMaterials.materials[prop].map.wrapT = THREE.RepeatWrapping;
tex.push(mainBodyMaterials.materials[prop].map.clone());
tex[tex_sequence].needsUpdate = true;
tex_sequence++;
}
}
After applying wrapS and wrapT to textures correctly, one of the tile materials get rendered correctly, but 'Texture marked for update but image is undefined' error keep throwing out. I need to clone the texture to get rid of the error, according to another question: Three.js r72 - Texture marked for update but image is undefined?
As there are several materials with repeating tiles, I need to create a global array at the beginning of the JS routine, and push the modified textures one by one when looping through the materials:
var tex = new Array();
var tex_sequence = 0;
After fixing the JS calls, one of the textures are still not working. I forgot that only ONE UV slot is allowed for three.js. I need to unwrap the UVs again under the same UV slot in Blender. Everything works like a charm, and I hope my painful experience can help those who are getting mad by similar problems.
I'm attempting to get a basic THREE.js example to work and modify it from there on out but it just keeps outputting a torus, no matter what I change.
I've copied the exact code from the docs page into a JSFiddle and again I get a torus.
Here is the docs page example:
CylinderGeometry
And here is the jsfiddle with the torus: https://jsfiddle.net/ded9grxn/
I've tried adding the code from the docs page to the example like so:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshPhongMaterial(
{
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
});
mesh.add(
new THREE.Mesh(
geometry,
material
)
);
But to no avail. Any help is appreciated!
The reason you fiddle does not work is that the script you invoke (https://threejs.org/docs/scenes/js/geometry.js) looks at the hash in the URL of the window to select the object.
If you go to
https://threejs.org/docs/scenes/geometry-browser.html#CylinderGeometry
you get the cylinder.
If you go to
https://threejs.org/docs/scenes/geometry-browser.html
you get the default, which is a torus.
For the reason why your modification does not work, we need more information about how you performed the modif (what did you remove, where did you add).
(Edit) in the fiddle, after doing your modification, do not forget to remove the line
var options = chooseFromHash( mesh );
this is where your script invokes the function in geometry.js that will set the mesh according to the hash in the URL
I'm in the process of developing a chrome VR web app. Now I'm desperately trying to figure out how to render a website into my into my stereoscopic scene which has some meshes in it.
So I have my renderer for the meshes, which works well. The following code is only the relevant snippets:
var renderer = new THREE.WebGLRenderer();
Then i have my stereoeffect renderer which receives the webgl renderer:
var effect = new THREE.StereoEffect(renderer);
Next is that I create the website renderer, and apply it to the stereoeffect:
var rendererCSS = new THREE.CSS3DRenderer();
var effectHUD = new THREE.StereoEffect(rendererCSS);
Then I have scenes which are being rendered:
var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();
function render(dt) {
effect.render(scene, camera);
effectHUD.render( sceneCSS, camera );
}
No what I receive is this:
A stereoscopic image of my mesh, but a non stereoscopic image of the website. The problem is that the when I try to add the css renderer into the StereoEffect renderer, the setViewport function (among others, probably) are missing.
I've tried adding the website object to the webgl renderer, but it doesn't want to render my website, so adding the website object to the scene with the meshes doesn't work.
Any help is greatly appreciated!
I've been having the same problem.
It appears there was a CSS Stereo renderer but it's been removed along with all examples. This could have been for any number of reasons so use the following with caution, or until they reintroduce compatibility:
After searching I found a remaining copy of their demo from which you can mine the code and copy its CSS3DStereoRenderer.js file.
Hopefully this helps.
Following method of adding light helper works ok:
var light = new THREE.SpotLight( 0xFFFFFF );
light.position.set(100,100,100);
scene.add(light);
var helper = new THREE.SpotLightHelper( light );
scene.add(helper);
but following will cause helper to be off position:
var wrapper = new THREE.Object3D();
wrapper.position.set(100,100,100);
var light = new THREE.SpotLight( 0xFFFFFF );
wrapper.add(light);
var helper = new THREE.SpotLightHelper( light );
wrapper.add(helper);
scene.add(wrapper);
It seems like helper position is taken from absolute light position to scene, but is then applied from it's wrapper, that means it is actually applied twice a thus doesn't match actual position of the light. In this example, helper would appear on (200,200,200). Same applies for PointLight and probably other light types.
Is it possible to put helpers into wrapper together with light and avoid position problem?
see it demonstrated here: http://jsfiddle.net/wfpxdw37/24/
Light Helpers are just that -- helpers.
They must be added as a child of the scene.
Consider that requirement a feature. :-)
three.js r.69
I'm having issues getting a custom made collada object with no built in camera or lighting to render. I more or less copied what I had seen in a few collada examples to create my own loader, which looks like this:
var loader = new THREE.ColladaLoader();
var room, scene, stats;
loader.load('../Models/Rooms/boot.dae', function colladaReady( collada ){
collada.scene.getChildByName('Cube',true).doubleSided = true;
room = collada.scene;
room.scale.x = room.scale.y = room.scale.z = 1;
room.updateMatrix();
init();
});
The init function is fairly basic and looks like this
scene = new THREE.Scene();
scene.add( room );
scene.add( camera );
renderer.render(scene, camera);
Here is the actual object I'm trying to render. I have also tried it out with the monster.dae file that is in the examples folder without success. The Chrome javascript console isn't showing any errors, so I'm not quite sure where to look in my code. It all resembles functional examples, so I'm not sure why it's not functional. Is there something I'm unaware of that is relevant to collada loading?
RESOLVED: The item was rendering, but had no skin or texture associated with it. So it was rendering at the same colour as the background, which understandably appears to not be rendering at all. Discovered by adding a grid to the ground just to check.