CODEWITHSUNDEEP
javascriptthree.js
Skrey
Skrey

Reputation: 138

Three.js CanvasRenderer issues

I'm just trying out Three.js. As I want to use CanvasRenderer as a fallback for devices where WebGL is not supported, I've noticed two issues:

Distored line / Bad geometry?

image

Additional pixel

image

Here's my current code

var width = 960;
var height = 500;
var aspect = width / height;

var D = 1;

var CanvasRenderer = true;

var scene    = new THREE.Scene();
var camera   = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);

if(CanvasRenderer) {
    var renderer = new THREE.CanvasRenderer({
        alpha: true,
        antialias: true
    });
} else {
     var renderer = new THREE.WebGLRenderer({
	alpha: true,
     	antialias: true
     });
}

renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(0.1, 1, 0.5);


var cube = new THREE.Mesh(geometry, [
	new THREE.MeshPhongMaterial({
        color: 0x222222, // right
        overdraw: true
    }),
	new THREE.MeshPhongMaterial({
        color: 0xffffff,
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xEDE6F5, // Top
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xffffff,
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xFFFFFF, // Left
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xffffff,
        overdraw: true
    })
]);

scene.add(cube);
scene.add(new THREE.AmbientLight(0xFFFFFF));

camera.position.set(20, 20, 20);
camera.lookAt(scene.position);

renderer.render(scene, camera);
body {
  margin: 0px;
  overflow: hidden;
  background: #EEE;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>

WebGL difference

You can see the difference with WebGL renderer:

image

JSFiddle

http://jsfiddle.net/4tbs4tpL/2/

Upvotes: 1

Views: 1656

Answers (1)

WestLangley
WestLangley

Reputation: 104763

When using CanvasRenderer, the Material.overdraw property takes values between 0 and 1. A reasonable value is 0.5.

The artifacts you refer to will likely diminish with lower values of overdraw.

three.js r.86

Upvotes: 1

Related Questions