Three.js를 사용하여 WebGL 영역에 직접 UI 요소 그리기

Question

Three.js에서 WebGL 영역 (예 : 헤드 업 디스플레이 또는 UI 요소의 경우)에서와 같이 직접 그릴 수 있습니까? 일반 HTML5 캔버스 요소?

그렇다면 컨텍스트를 가져올 수있는 방법과 사용할 수있는 그리기 명령은 무엇입니까?

그렇지 않은 경우 Three.js와 협력 할 수있는 다른 Three.js 또는 WebGL 관련 드로잉 명령을 통해 다른 방법으로이 작업을 수행 할 수 있습니까?

내 백업 계획은 오버레이로 HTML div를 사용하는 것이지만 더 나은 해결책이 있어야한다고 생각합니다.

감사합니다.

Answer 1

일반 캔버스에서와 같은 방법으로 WebGL 캔버스에 직접 그릴 수는 없습니다. 그러나 다른 방법이 있습니다. 평소와 같이 숨겨진 2D 캔버스에

• 그리기 및
• 이 (당신의 건강 상자의 예를 들어 프레임) 텍스처 매핑 쿼드를 사용하여 이미지
• 그리기 경로를 그립니다 쿼드에 텍스처로 사용하여 WebGL에 해당 전송 VBO에 꼭지점을 넣고 적절한 다각형 유형을 그려서 그려야합니다.
• 비트 맵 글꼴 (기본적으로 텍스처가있는 사각형) 또는 실제 형상을 사용하여 텍스트를 그립니다. (세 개의 .j에는 예제와 도우미가 있습니다.)

이것들을 사용하는 것은 일반적으로 직교 카메라를 설정하는 것을 의미합니다.

그러나이 모든 작업은 상당히 간단합니다. 실제 형상으로 텍스트를 그리는 데 많은 비용이 듭니다. CSS 스타일을 사용하여 HTML div를 만들 수 있다면 설정하는 것이 매우 빠르기 때문에이를 사용해야합니다. 또한 투명도를 사용하여 WebGL 캔버스를 그릴 때 브라우저에서 GPU가 모든 것을 가속화하지 않으면 div 도면을 빠르게 만들 수 있다는 힌트가 될 것입니다.

또한 CSS3를 사용하면 매우 효과적 일 수 있습니다. 둥근 모서리, 알파 투명도, 질문의 코멘트에 Anton의 링크로 설명 된 3D 원근감 변환.

Answer 2

나는 똑같은 문제가있었습니다. DOM없이 HUD (Head-up display)를 만들려고했는데이 솔루션을 만들었습니다.

1. 정사영 카메라로 별도의 장면을 만들었습니다.
2. 캔버스 요소를 만들고 2D 그래픽을 사용하여 그래픽을 렌더링했습니다.
3. 그러면 전체 화면에 맞는 평면을 만들고 2D 캔버스 요소를 텍스처로 사용했습니다.

   // Render HUD on top of the scene. 
   renderer.render(sceneHUD, cameraHUD); 
   

   : 그게 내가 내 렌더링 루프에 추가 무엇

   // We will use 2D canvas element to render our HUD. 
   var hudCanvas = document.createElement('canvas'); 
   
   // Again, set dimensions to fit the screen. 
   hudCanvas.width = width; 
   hudCanvas.height = height; 
   
   // Get 2D context and draw something supercool. 
   var hudBitmap = hudCanvas.getContext('2d'); 
   hudBitmap.font = "Normal 40px Arial"; 
   hudBitmap.textAlign = 'center'; 
   hudBitmap.fillStyle = "rgba(245,245,245,0.75)"; 
   hudBitmap.fillText('Initializing...', width/2, height/2); 
   
   // Create the camera and set the viewport to match the screen dimensions. 
   var cameraHUD = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0, 30); 
   
   // Create also a custom scene for HUD. 
   sceneHUD = new THREE.Scene(); 
   
   // Create texture from rendered graphics. 
   var hudTexture = new THREE.Texture(hudCanvas) 
   hudTexture.needsUpdate = true; 
   
   // Create HUD material. 
   var material = new THREE.MeshBasicMaterial({map: hudTexture}); 
   material.transparent = true; 
   
   // Create plane to render the HUD. This plane fill the whole screen. 
   var planeGeometry = new THREE.PlaneGeometry(width, height); 
   var plane = new THREE.Mesh(planeGeometry, material); 
   sceneHUD.add(plane); 
   

   그리고 : 같은

은 내가 HUD 코드가 보이는 방법은 원래의 장면

위에 그 보조 장면을 렌더링

여기에서 전체 소스 코드로 게임을 할 수 있습니다. http://codepen.io/jaamo/pen/MaOGZV

,451,515,

그리고 내 블로그의 구현에 대한 자세한 읽기 : http://www.evermade.fi/pure-three-js-hud/