신속하게 렌더링하고 싶은 canvas 안에 3D 구의 드로잉을 생성하려고합니다. 목표는 작은 (300px 사각) 캔버스의 실시간 성능입니다. iPad.원호에 투시 변환하여 생성 된 곡선
HTML5 렌더링에 사용되는 데모 중 대부분은 WebGL (three.js 등)을 사용하지만 멋지지만 제한적입니다 (실제로는 아무 것도 아니지만 실제로는 Apple이 기술적으로 사용할 수 있습니다) iOS에서의 지원.
canvas 그러나 위대한 작품입니다.
그래서 CSS3가 HW 변환을 제공하고 기본 텍스처링을 위해 canvas을 사용할 수 있으므로 canvas으로 일부 기본 렌더링 기능을 만드는 것을 자세히 살펴 보겠습니다. 나는 캔버스에 그려서 조명을 가짜로 만들 수 있습니다! 꽤 힘든 일이므로 HW T & L (DX7! ...)하지만 아직은 아주 차가운 것들을 만들 수 있다고 확신합니다. 그 트릭은 가능한 한 많은 양의 형상을 최소화하는 것입니다.
위로 주제. 내 실제 질문은 매우 구체적입니다. 그려야 할 구체가 카메라에서 충분히 멀리 떨어져 있다면, 그것의 정사영 투영으로 벗어날 수 있습니다. 이 경우 아크 경로와 회전 및 스케일링 변환을 사용하여 와이어 프레임 구를 구성 할 수 있으며 canvas에 사용할 수있는 것처럼 보입니다. 이것은 어떤 식 으로든 구를 텍스처링하는 것을 허용하지 않지만 멋진 부드러운 커브를 생성하고 멋지게 보일 것입니다.
원근 투영을 그림에 투사하고 싶습니다. 이러한 종류의 변환으로 인해 어떤 종류의 커브가 생성됩니까? 베 지어 또는 아크 경로를 사용하여 충분히 근접한 곡선을 그릴 수있는 가능성이 있습니까?
구의 원근 투영은 타원이라는 것을 알고 있습니다. 타원은 원을 크기 조정하여 쉽게 생성 할 수 있습니다. 투영 매개 변수가 주어진 타원에 대한 방정식을 계산하는 것만 큼 간단 할 수 있습니다. 누군가가 나를 도와 줄 수 있습니까?
내게 항상 열려있는 한 가지 옵션은 호를 잊어 버리고 내 와이어 프레임을 선으로 그립니다 (canvas은 편리하게 앤티 앨리어싱을 적용 할 것입니다). 항상 전통적으로 이렇게했습니다. 예를 들어 내 구체에 텍스처를 적용하고 싶다면 이것을 피할 방법이 없습니다.