WebGL + Google 크롬을 사용하는 서브 픽셀 애니메이션?

Question

삼각형을 천천히 번역하면 픽셀 단위로 이동합니다. 앤티 앨리어싱을 사용하여 Google 크롬이 운동을 원활하게하도록하는 방법이 있습니까?

예를 들어 체크 아웃 :

https://dl.dropbox.com/u/4571/musicope2/index.html

PS를 : 궁금이 대답은 거 같습니다에도 적용됩니다 경우 대답은 여전히 ​​유효? 경우

Sub-pixel rendering in Chrome Canvas

나 '

Answer 1

네가 정확히 무엇을 요구하는지 모르겠다.

안티 앨리어싱은

gl = canvas.getContext("experimental-webgl", { antialias: true }); 

와 WebGL이 컨텍스트를 만들 때 요구하지만 실제로 어떤 수준에 앤티 앨리어싱을 켜거나하지 않으며 여부는 브라우저에 달려있다 할 수 있습니다. 예를 들어 일부 브라우저는 드라이버 버그로 인해 특정 GPU에서 앤티 앨리어스를 허용하지 않습니다.

그렇지 않으면 캔버스를 더 큰 크기로 설정하고 CSS를 사용하여 더 작은 크기로 표시 할 수 있습니다. 브라우저는 결과를 표시하기 위해 GPU 쌍 선형 필터링을 사용할 가능성이 높습니다.이 결과는 사용자에게 일종의 앤티 앨리어싱을 부여합니다. 이렇게하려면 캔버스 크기를 표시 할 크기를 두 배로 설정하고 css를 표시 할 크기로 설정하십시오. 예 : 캔버스의 drawingBuffer는이 페이지에 표시되는 크기를 두 배로 만들 가능성이 앤티 앨리어싱 보이게

desiredWidth = 640; 
desiredHeight = 480; 
canvas.width = desiredWidth * 2; 
canvas.height = desiredHeight * 2; 
canvas.style.width = desiredWidth + "px"; 
canvas.style.height = dsiredHeight + "px"; 
gl = canvas.getContext("experimental-webgl", { antialias: false }); 

.