깜박임없이 캔바스의 크기를 어떻게 조정합니까?

Question

많은 크기의 Three.js 샘플은 윈도우 크기가 조정되거나 프레임에 흰색 테두리가있을 때 깜박입니다. 예 : http://threejs.org/examples/webgl_animation_skinning.html

반면에 WebGL Aquarium은 깜박이지 않습니다. 어떻게 이뤄지나요?

Answer 1

AFAICT 대부분의 Three.JS 샘플은 창 크기 나 컨테이너 크기를보고 수동으로 canvas.width, canvas.height를 설정하여 캔버스 크기를 수동으로 설정합니다.

WebGL Aquarium을 포함한 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

당신은 바로 창 크기를 크기를 조정 한 후 렌더링 호출 할 필요가 바이올린을합니다.

requestAnimationFrame을 더 잘 조정하고 크기를 조정 한 다음 하나의 함수 호출로 렌더링 할 수 있습니다. 리플 로우 및 렌더링이 한 번의 리플 로우에서 곧바로 일어남을 확인하고 깜박임으로 이어지게합니다.

Answer 3

function onWindowResize() { 

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

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