Threejs:How to set logarithmicDepthBuffer flag when rendering? - three.js

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

Related

Three JS - How do I change from Lambert to Phong on a material at runtime?

I tried setting "type" and then setting "needsUpdate", but it didn't change the type. I know I could make a new material, and then change every mesh that uses that material to use the new material, but I was hoping there was a way I could do it without iterating through every mesh.
You need to create a new material and have the mesh point to it.
mesh.material = new THREE.MeshPhongMaterial({ color: 0xffffff });
Check this fiddle: https://jsfiddle.net/29Lqeadx/.

antialias doesn't work well in three.js

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

How do you set which side a decal displays on a THREE JS mesh?

I am trying to apply a decal to the outside of a mesh object using DecalGeometry. However, the decal appears on the inside of the mesh. I've tried rotation and position settings within the DecalGeometry, but can't seem to affect which side of the mesh the decal appears on. FWIW, the mesh is a custom OBJ model. My code is a bit extensive to post here, but you can view the issue here. I have red BoundingBoxHelpers to help visualize the placement.
The materials object has a parameter which allows you to designate the side(s) of the mesh on which it will display (thanks #j-t for posting this question Prevent decal from showing on inside of mesh. My working code looks like this...
var decalMaterial = new THREE.MeshPhongMaterial( {
map: decalNormal,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
side: THREE.DoubleSide
});

Three.js renderer.autoClear property not working?

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});

Three.js - Is FlatShading implemented for BufferGeometry

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

Resources