Three.js: 3D 장면 (WebGLRenderer) 위에 HUD를 만드시나요?

HTML 사용

HTML의 경우 +1. UI 용 _designed_ 플랫폼을 개발 중입니다. 그것을 활용하십시오. :)

사실 나는 왜 당신이 HTML을 사용하지 말아야하는지 모르겠습니다! +1

네, 3D 장면에 통합 할 필요가 없다면 캔버스 위에 HTML을 사용합니다.

감사.
mrdoob, 네, 3D 장면에 통합하고 싶습니다. 일부 2D 그래픽에 WebGL을 사용하고 싶습니다. 그러나 THREE.js로 이것을 수행하는 작업 샘플을 보지 못했습니다.

"3D 장면에 통합"이라고 말하면 UI가 3D 위에 오버레이로 표시되는 것을 원하지 않습니까?

Loupax, 제목을 약간 변경했습니다. :) 상단에 있지만 WebGL이 렌더링되었습니다. 나는 다음과 같은 것을 의미합니다.

http://www.smokycogs.com/blog/o3d-tutorial-4-the-beginnings-of-a-hud/
http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/o3d-webgl-samples/hud-2d-overlay.html?spec=svn218&r=218

나는 단순히 GUI에 HTML을 사용하므로 <canvas> 요소 위에 단순히 <div> 등이 있습니다.

실제 장면 위에 Three.js로 GUI를 렌더링하려면 두 개의 캔버스 요소를 서로 위에 사용합니다. 하나는 게임 / 장면 / 무엇이든, 다른 하나는 GUI 용입니다. GUI 요소 사이에서 맨 위가 투명한지 확인해야하지만 Three.js에서 가능한지 모르겠습니다 ...

예, 대부분의 경우 HTML을 사용하면 훨씬 간단합니다.

화려하고 WebGL로 HUD를 렌더링하고 싶다면 (예 : 애니메이션 3D 또는 일부 셰이더 효과) 다음과 같이 할 수 있습니다.

http://mrdoob.github.com/three.js/examples/webgl_rtt.html

(최소한 2d 오버레이의 경우 깊이 쓰기 / 읽기 / 마스킹으로 FBO없이 재생하는 방법이있을 것입니다)

alteredq,이 링크에 감사드립니다. 나는 현재 "재생"방법을 찾지 못했습니다. 그러나 WebGLRenderer에서 코드를 분석하고 다음과 같은 것을 사용할 수 있음을 알았습니다.

var sprite = new THREE.Sprite ({map : tex, useScreenCoordinates : true});
scene.addChild (sprite);

작동합니다.

그러나 나는 여전히 이중 렌더링과 이것을 혼합하는 방법에 관심이 있습니다.

나는 WebVR 프로젝트에서 일하고 있었고 DOM 솔루션은 옵션이 아니 었습니다. 나는 순수한 Three.js로 HUD를 끝냈다. 별도의 장면을 만들고 원래 장면 위에 렌더링했습니다.

여기에서 라이브 예제를 볼 수 있습니다.
http://codepen.io/jaamo/pen/MaOGZV

솔루션에 대한 블로그 게시물은 다음과 같습니다.
http://www.evermade.fi/pure-three-js-hud/

실제로 webVR 용 HUD 도구를 작업 중입니다.
three.js 예제에서 찾을 수있는 StereoEffect.js를 기반으로합니다.
첫 번째 장면의 두 부분을 렌더링 한 다음 오버레이에 HUD 장면의 두 부분을 모두 PerspectiveCamera 인 StereoEffectCamera로 렌더링합니다.

십자선이있는 데모와 장면의 일부 요소와의 상호 작용이 있습니다.
https://github.com/trinketmage/three.js-vr-hud/

저는 현재 HUD 장면의 절두체 내에서 "라벨"기능을 작업하고 있습니다. 어떤 팁이나 도움을 주시면 감사하겠습니다.
감사

누군가가 원근법 위에 Ortho 장면을 렌더링하는 방법을 찾고 있다면 (객체를 위쪽 / 왼쪽 / 오른쪽 / 아래쪽 테두리에 정렬하거나 픽셀 단위로 크기를 지정할 수 있습니다) 거기 에

@cecilemuller- 귀하의 프로젝트는 내가 이슈를 열 수 없도록 허용하므로 여기에 댓글을 달고 있습니다. 작동합니까? http://jsbin.com/sisutopede/edit?html , js, output ( let const 을 var 로 대체했습니다) 파란색 구만 볼 수 있지만 아무것도 보이지 않는 것 같습니다 UI 요소?

@trinketmage- 환상적인 데모 / 플러그인을 만들고 문제 1 을 설명하는 데 시간을 내 주셔서 감사합니다. 지금은 문제 2 를 파악하려고합니다 : https://github.com/trinketmage/three.js-vr-hud/issues/ 2- 키보드를 사용할 때 완벽하게 작동합니다. 모바일 장치 / Chrome Dev Tools를 사용하기 시작하고 점프하는 방향을 시뮬레이션하는 순간 ...

• 동영상 : https://www.youtube.com/watch?v=fO_yJ1bcSCM(23 초 )
• 라이브 : https://stefek99.github.io/three.js-vr-hud/example/

사이드 노트에서-충분한 복사 및 붙여 넣기-어느 시점에서이 스레드에 대한 모든 지식을 감안할 때 내 코드를 작성할 수 있어야합니다.

@ stefek99 파란색 구체 위에 컬러 사각형이 표시되어야합니다. 크롬과 파이어 폭스에서 jsbin을 시도해 보았습니다. 여기 스크린 샷이 있습니다.

예, 코드에 일부 es6 기능이 있으므로 실행 중이 아닌 경우 Babel REPL 을 사용하여 es5로 변환 할 수 있습니다.

2020 년입니다. 하이브리드 또는 이상한 방법을 사용하지 않고 ThreeJS 내에서 2D HUD 오버레이를 만드는 가장 좋은 방법은 무엇입니까? ThreeJS 내부에서 PixiJS와 같은 것에 액세스하는 것이 이상적입니까?

@sylwesterdigital 도움이 필요하면 three.js 포럼을 사용할 수 있습니다.

예 ... 거기에 있었는데 계정이 보류 중이 어서 댓글을 달거나 답글을 달거나 새 주제를 만들 수 없습니다. ThreeJS 커뮤니티는 아무데도 갈 수 없으며 모두가 월별 지불을 위해 f * React를 코딩하고 있습니까?

수년간의 작업 끝에 WebGL에서 hud를 수행하는 절대적인 방법은 없다고 생각합니다. 전적으로 프로젝트에 따라 다르지만 제 생각은 다음과 같습니다.

• HUD에 특정 효과가 필요하지 않은 경우 HTML로 이동하면 "합성 비용"이 발생하지만 오버레이가 너무 많지 않은 한 (화면 오버레이의 4 배 / 5 배 크기를 사용하면 느려집니다. Mac Book Pro Retina가 설치된 Chrome (2015 년 중반)), html 형식의 HUD 예제 : demo waysmaze .
• 어떤 이유로 든 gl에 있어야한다면 각 프레임이 모든 것 위에 렌더링되는 카메라 앞에 배치되는 Group에 직접 넣을 것입니다. 크기 조정시 특정 z 거리에서 카메라에서 그룹의 범위를 계산하여 항목을 위 / 오른쪽 / 아래 / 왼쪽에 배치합니다. 이 방법은 관점 (HUD에서 3D 요소가 필요한 경우)을 사용할 수있는 유연성을 제공하며 성능에 가장 낮은 비용이되어야한다고 생각합니다 (내가 틀렸다면 수정 해주세요).
• 내 생각에 @sylwesterdigital 보다 "논리적 인"방법은 동일한 장면 내부의 텍스처로 장면 위에 두 번째 렌더링 (직교 또는 원근)을 수행하는 것입니다. 그러나 큰 단점은 화면 크기에 픽셀 비율을 곱한 두 번째 렌더러가 발생하는 성능이 떨어지거나 HUD 렌더러가 더 작 으면 품질을 잃는다는 것입니다.
• Three.js 위에있는 Pixi.js는 @sylwesterdigital 의 나쁜 솔루션입니다. 2 개의 WebGL 인스턴스가있을 것
• three.js 위에있는 좋은 오래된 캔버스도 작동해야합니다. 저의 놀라운 동료 중 한 명이 @namide 가 저에게 엄청난 개발자 교훈을 가르쳐주었습니다. "비디오 게임을 위해 어떻게 최적화할까요?"Unity에서 HUD를 처리하는 일반적인 방법은 CanvasRenderer on 무엇보다도.

결론적으로, 제 생각에는 HUD 시각적 구성 요소는 감당할 수있는 성능 비용에 따라 달라져야합니다.