如何調整畫布而不閃爍？

Question

當窗口被調整大小或框架有白色邊框時，許多Three.js樣本會閃爍。例如：http://threejs.org/examples/webgl_animation_skinning.html

另一方面，WebGL Aquarium不閃爍。這是如何完成的？

Answer 1

AFAICT大多數Three.JS示例通過查看窗口大小或容器大小手動設置畫布大小，然後設置canvas.width，canvas.height以匹配。

另一方面，包括WebGL水族館的TDL樣本使用CSS讓瀏覽器縮放畫布，然後在requestAnimationFrame回調中更新畫布支持庫的大小。

下面是一個例子

const gl = document.querySelector("#c").getContext("webgl"); 
 

 
function render() { 
 
    resizeCanvasToDisplaySize(gl.canvas); 
 

 
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); 
 
    
 
    // Draw a 2 pixel border around the edge using 
 
    // the scissor test since it's easier than setting up 
 
    // a lot of stuff 
 
    gl.clearColor(1, 0, 0, 1); // red 
 
    gl.disable(gl.SCISSOR_TEST); 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 

 
    gl.enable(gl.SCISSOR_TEST); 
 
    gl.scissor(2, 2, gl.canvas.width - 4, gl.canvas.height - 4); 
 
    gl.clearColor(0, 0, 1, 1); // blue 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 

 
    requestAnimationFrame(render); 
 
} 
 
requestAnimationFrame(render); 
 

 
function resizeCanvasToDisplaySize(canvas) { 
 
    const width = canvas.clientWidth; 
 
    const height = canvas.clientHeight; 
 
    if (canvas.width !== width || canvas.height !== height) { 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
} 
 
#c { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: block; 
 
}

<canvas id="c"></canvas>

或小提琴http://jsfiddle.net/greggman/pfWS3/

Answer 2

你需要調用呈現調整窗口大小後直接回家。

更好的是，你可以有​​並調整大小，然後在一個函數調用中渲染。它將確保迴流和渲染直接在一次迴流中發生，而不是分開導致閃爍。

Answer 3

function onWindowResize() { 

     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 

     renderer.setSize(window.innerWidth, window.innerHeight); 
     renderer.render(scene, camera); 
    }