I'm trying to make the renderer write on top of the previous frame. If I understand the context of autoClear correct, renderer.autoClear = false; should make this possible, however I can't seem to make it work.
Here is a codepen example:
http://codepen.io/anon/pen/ifLEz?editors=001
renderer.autoClear = false;
If I'm missing a point, feel free to fork it and paste the solution :)
Use
renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
Related
Use logarithmic depth buffer is a very simple change, just enable logarithmicDepthBuffer when create THREE.WebGLRenderer like so:
var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true});
But is there any way to change the logarithmicDepthBuffer flag after WebGLRenderer created,or when rendering.
The initial setting of logarithmicDepthBuffer is internally cached in a class called WebGLPrograms. So you can't change this setting at runtime. You have to create a new instance of WebGLRenderer.
BTW: All parameters assigned to the constructor of WebGLRenderer are considered to be immutable.
three.js R112
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.
I use svg as texture in threee.js, I've already set antialias: true, but still not working perfect,
// RENDERER
renderer = new THREE.WebGLRenderer({
antialias: true, //是否开启反锯齿
precision: "highp", //着色精度选择
alpha: true, //是否可以设置背景色透明
premultipliedAlpha: true,
stencil: false,
preserveDrawingBuffer: true, //是否保存绘图缓冲
maxLights: 1 //maxLights:最大灯光数
});
renderer.setPixelRatio(window.devicePixelRatio);
this is svg:
this is texture on 3d model:
could anybody help me?
thanks!
When an image is loaded into a 3d environment it is not pixels but defined as texels. Texels are translated to the space available on a face as set by the UV coordinates. The original image is sampled according to the sample method you supply. Some result in specifically blocky looks. Think minecraft. Others are very smooth and especially blurry when zoomed in. Think older video games.
To determine the sample method of your original image you can set the sample technique in the magnification and minification properties of the texutre.
Try
mySVG = new THREE.TextureLoader().load('assets/images/icons/mySVG.svg');
mySVG.magFilter = THREE.NearestFilter;
mySVG.minFilter = THREE.LinearMipMapLinearFilter;
Various filters are available and documented at https://threejs.org/docs/api/textures/Texture.html
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
It seems that setting THREE.FlatShading for a material doesn't work for BufferGeometry. Is it implemented?
I'm creating BufferGeometry with CTMLoader (useBuffers = true) and applying either MeshLambertMaterial or MeshNormalMaterial with shading: THREE.FlatShading.
Three.js still renders everything as SmoothShading.
If I switch to ClassicGeometry (useBuffers = false), everything works as expected. Unfortunately, that would not work for us since our models are huge and that was exactly the reason to use BufferGeometry.
Is it just not implemented or is it very difficult/time-consuming/not-possible to implement?
Thank you in advance for any hints or suggestions. I'm using the latest r58 version.
P.S.
I found a recent Ryan Rix' post on the same topic http://rix.si/2013/04/15/threejs-ctm-and-you/ where he had to switch to ClassicGeometry to make it work.
In three.js r73 flat shading is working with THREE.MeshPhongMaterial for sure. You can use it like this:
geometry = new THREE.BufferGeometry();
//... make your geometry
material = new THREE.MeshPhongMaterial({
color: 0xff0000,
shading: THREE.FlatShading
});
mesh = new THREE.Mesh( geometry, material );
This doesn't work for THREE.MeshLambertMaterial yet. But they are working on it. Check the related issue here on GitHUB.
flatShading does work in MeshPhongMaterial or any other, the property for
flatShading is boolean
flatShading : Boolean
Define whether the material is rendered with flat shading. Default is false.
const PlaneMaterial = new THREE.MeshPhongMaterial({color:'blue',
side:THREE.DoubleSide,
flatShading:true})
Code Snipet