Vẽ các phần tử giao diện người dùng trực tiếp đến khu vực WebGL với Three.js

Question

Trong Three.js, bạn có thể vẽ trực tiếp vào khu vực WebGL (ví dụ như hiển thị thông tin hoặc phần tử giao diện người dùng) theo cách bạn có thể phần tử canvas HTML5 thông thường?

Nếu có, làm cách nào để bạn có được ngữ cảnh và lệnh vẽ nào có sẵn?

Nếu không, có cách nào khác để thực hiện điều này, thông qua các lệnh vẽ Three.js hoặc WebGL cụ thể khác sẽ hợp tác với Three.js không?

Gói dự phòng của tôi là sử dụng các div HTML làm lớp phủ, nhưng tôi nghĩ cần có giải pháp tốt hơn.

Cảm ơn!

Answer 1

Bạn không thể vẽ trực tiếp lên canvas WebGL giống như cách bạn làm với canvas thông thường. Tuy nhiên, có các phương pháp khác, ví dụ:

• Draw để một canvas 2D ẩn như bình thường và chuyển đến WebGL bằng cách sử dụng nó như là một kết cấu cho một quad
• Vẽ hình ảnh sử dụng kết cấu ánh xạ quads (ví dụ như khung của hộp sức khỏe của bạn)
• đường Draw (và hình dạng) bằng cách đặt đỉnh của chúng vào VBO và vẽ bằng loại đa giác thích hợp
• Vẽ văn bản bằng cách sử dụng phông bitmap (quads cơ bản) hoặc hình học thực (ba.js có ví dụ và người trợ giúp)

Sử dụng các phương pháp này thường có nghĩa là thiết lập một máy ảnh chỉnh hình.

Tuy nhiên, tất cả điều này là khá nhiều công việc và ví dụ: bản vẽ văn bản với hình học thực có thể tốn kém. Nếu bạn có thể thực hiện với các div HTML với kiểu dáng CSS, bạn nên sử dụng chúng vì nó rất nhanh để thiết lập. Ngoài ra, vẽ trên nền WebGL, có lẽ sử dụng tính minh bạch, nên là một gợi ý mạnh mẽ cho trình duyệt để GPU tăng tốc bản vẽ div của nó nếu nó chưa tăng tốc mọi thứ.

Cũng nên nhớ rằng bạn có thể đạt được khá nhiều với CSS3, ví dụ: các góc tròn, độ trong suốt alpha, thậm chí các phép biến đổi phối cảnh 3D như được minh họa bởi liên kết của Anton trong bình luận của câu hỏi.

Answer 2

Tôi đã gặp sự cố tương tự. Tôi đã cố gắng tạo ra một HUD (hiển thị Head-up) mà không DOM và tôi đã kết thúc việc tạo ra giải pháp này:

1. Tôi tạo ra một cảnh riêng biệt với máy ảnh chính tả.
2. Tôi đã tạo phần tử canvas và sử dụng bản vẽ 2D nguyên thủy để hiển thị đồ họa của mình.
3. Sau đó, tôi đã tạo một mặt phẳng lắp toàn bộ màn hình và sử dụng phần tử canvas 2D làm kết cấu.
4. tôi trả lại rằng cảnh thứ trên đầu trang của cảnh gốc

Đó là cách mã HUD trông giống như:

// 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); 

Và đó là những gì tôi thêm vào vòng lặp làm cho tôi:

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

Bạn có thể chơi với mã nguồn đầy đủ tại đây: http://codepen.io/jaamo/pen/MaOGZV

Và đọc thêm về việc thực hiện trên blog của tôi: http://www.evermade.fi/pure-three-js-hud/