JavaScript에서 사용할 수있는 3D 그래픽 엔진을 작성하는 방법은 무엇입니까? [닫은

StackOverflow https://stackoverflow.com/questions/1651145

  •  22-07-2019
  •  | 
  •  

문제

나는 최근 HTML 5.0 캔버스에서 멋진 모양을 그리는 데 집중했습니다. 그리고 JavaScript에서 사용할 수있는 3D 그래픽 엔진을 작성하고 싶습니다. 나는 이미 회전 큐브를 마쳤다. 이 예제와 같은 모양을 완성하고 싶습니다. http://gyu.que.jp/jscloth/touch.html.

이 분야에서 누가 시도한 적이 있습니까?

도움이 되었습니까?

해결책

편집 :이 질문은 몇 년 전에 묻습니다. 그 이후로, IE를 제외한 모든 브라우저지금은?)는 WebGL에 대한 지원을 추가했습니다. 여기에서 많은 샘플을 볼 수 있습니다. http://www.chromeexperiments.com/webgl/

나는 진정으로 당신을 낙담시키고 싶지 않지만 3d JavaScript의 엔진은 3D 렌더링 뒤의 수학/논리에서 매우 정통하고 친밀해야합니다.

당신이 당신의 현재 전문 지식을 언급하지 않았기 때문에, 나는 당신이 그렇지 않다고 가정합니다 ... 어떤 경우 나는 당신이 다른 곳에서 시작할 것을 강력히 제안합니다. 예를 들어, XNA 게임 스튜디오. 당신은 c#에 코드를 작성하고, 이미 하드 부품 중 가장 추상적 인 (그러나 확실히 전부는 아니지만) 잘 쓰여진 API가 이미 많이 있습니다. 그러나 그것은 3D 렌더링 뒤에 많은 개념과 수학을 배우는 좋은 방법입니다.

그러나 JavaScript로 시작하여 죽은 사람이라면 인터넷에 이미 많은 리소스가 있습니다. 예를 들어 이것은 :-)
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/

행운을 빕니다!

다른 팁

나는 약 1 년 전에 Google이 Superfast V8 JavaScript 엔진으로 Chrome 브라우저를 출시 한 시점에 JavaScript 3D 엔진을 썼습니다. 불행히도 브라우저가 3D 그래픽 API (예 : OpenGL 또는 Direct3D)를 노출시키기 때문에이 엔진은 비트 맵 이미지를 웹 페이지에 뒤틀어 Affine Texture-Mapped Triangles (관점 구성 텍스처 맵핑 삼각형보다 열등합니다)를 달성합니다. 꽤 느립니다.

JavaScript 3D 엔진을 사용하여 a를 만들었습니다 3D 모델 라이브러리. (힌트 : 첫 번째 모델을 보지 마십시오 - 가장 크고 가장 느리게 볼 수 있습니다!). 3D 모델의 경우 성능은 초당 약 10 프레임입니다.

이 엔진에 소스 코드를 오픈 소싱하는 것을 고려했지만이 작업을 수행하지 않았습니다. 관심이 충분하면 소스 코드를 Google 코드에 넣을 것입니다.

내 현재 애완 동물 프로젝트는 a Silverlight 3D 엔진 및 모델 뷰어, 이는 소프트웨어 3D 엔진입니다 (예 : C# 코드는 모든 픽셀의 색상을 제어합니다). Silverlight 3은 JavaScript보다 훨씬 빠르지 만, 비표준이지만 브라우저 어드먼트이지만 여전히 3D 하드웨어 가속 그래픽을 지원하지 않습니다 (많은 오버 헤드없이).

업데이트 : 원래이 게시물을 작성한 이후로, 나는 Silverlight 5와 하드웨어 가속 3D를 사용하기 위해 위에서 언급 한 Silverlight 모델 뷰어를 업데이트했습니다.

기존 3D 라이브러리를 JavaScript에 바인딩하는 것은 어떻습니까? Opengl처럼.

V8-GL OpenGL API의 80%를 JavaScript에 노출시킵니다.

alt text

나는 하나를 쓰면 어떻게 될지 모르겠다. 그러나 여기에 존재하는 몇 가지가 있습니다.

하나를 작성하려면 먼저 엑스 칸바를 지원할 것인지 결정해야하므로 즉, IE가 사용할 수 있습니다.

즉, IE를 지원하면 할 수있는 일에 약간의 제한이 설정됩니다.

가장 좋은 방법은 일부 기본 모양을 만드는 것입니다. 대부분 다른 모든 것이 구축 될 수있는 특정 프리미티브를 원할 것입니다.

일단 당신이 그것을 가지고 있고, 당신은 3D 공간에서 그들을 움직일 수 있다면, 카메라 추가를보고 싶을 것입니다. 그러나 그것은 1 단계에 비해 상대적으로 쉽습니다.

불행히도,이 모든 것은 수학에서 매우 무겁기 때문에 자주 움직일 수있는 여러 3D 객체를 만들면 큰 성능을 얻게됩니다.

2007 년 말 Firefox와 Opera가 캔버스에서 3D 지원을받을 블로그가 있었기 때문에 가장 좋은 방법은 기다리는 것입니다. http://starkravingfinkle.org/blog/2007/11/animating-with-canvas/

그 이유는 브라우저에 내장되면 대부분의 무거운 작업이 수행되기 때문입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top