Three.js: Resize rendering canvas (GPU hungry fragment shader)

6
votes

I am running resource hungry fragment shader with three.js. I have setup rendering size to 800 * 600 to keep shader running smooth even on lowend cards.

I am setting my rendering canvas like this: 

var canvas1 = document.getElementById('canvas1') ;
renderer = new THREE.WebGLRenderer(canvas1);
renderer.setSize( 800, 600 );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );

On body element i have

<canvas id='canvas1' style=" position: absolute; left: 0; top: 0; z-index: -10; background-color: #000000; "></canvas>

I am then in css header doing width: 100%; height: 100%;

This does not help much, as Three.js creates new canvas of size 800*600 on top of canvas1. What is best approach to zoom Three.js rendering canvas to match web browsers window size, without touching rendering size?

1
javascriptthree.jswebgl

1 Answers

6
votes
renderer = new THREE.WebGLRenderer( { canvas: canvas1 } );

Passes canvas1 to WebGLRenderer as rendering target.

Then remove: document.body.appendChild( renderer.domElement ); as we already have canvas1 element in our dom.

Three.js documentation is little bit tricky sometimes, { canvas: }, to pass parameter.