Exploring the world of Three.js has been an interesting journey so far. While working on implementing a fallback using CanvasRenderer for devices that do not support WebGL, I encountered a couple of challenges:
Anomaly in Line Geometry
https://i.sstatic.net/qsb4X.png
Extra Pixel Issue
https://i.sstatic.net/QSbF7.png
Below is my current code snippet:
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({
colo...
});
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>Divergence in WebGL Output
Comparison with WebGL renderer output:
https://i.sstatic.net/TEeKQ.png