Three.js: Membuat HUD melalui 3D Scene (WebGLRenderer)?

Dibuat pada 29 Mei 2011  ·  19Komentar  ·  Sumber: mrdoob/three.js

Hai

apakah ada yang tahu apa cara yang benar untuk membuat layer HUD (sprite 2d, UI) pada adegan 3d dengan THREE.js? Saya ingin meniru kursor mouse dan membuat beberapa gambar di atas layar. Ide saya adalah membuat kamera orto dan menggunakan sprite. tetapi saya tidak tahu bagaimana saya bisa melapisi rendering ini di atas rendering utama. Pada contoh saya menemukan beberapa "proses pasca", tetapi saya rasa ini bukan cara yang tepat.

Terima kasih
Remo

Question

Komentar yang paling membantu

Saya sedang mengerjakan proyek WebVR dan solusi DOM bukanlah pilihan. Saya akhirnya melakukan HUD dengan Three.js murni. Saya membuat adegan terpisah dan membuatnya di atas adegan asli saya.

Anda dapat melihat contoh langsungnya di sini:
http://codepen.io/jaamo/pen/MaOGZV

Dan posting blog tentang solusinya di sini:
http://www.evermade.fi/pure-three-js-hud/

Semua 19 komentar

Gunakan HTML

1 untuk HTML. Anda sedang mengembangkan platform _designed_ untuk UI; memanfaatkannya. :)

Sebenarnya saya tidak mengerti mengapa Anda TIDAK HARUS menggunakan HTML! +1

Ya, kecuali itu perlu diintegrasikan dalam adegan 3d saya akan pergi dengan HTML di atas kanvas.

Terima kasih.
mrdoob, ya saya ingin berintegrasi dalam adegan 3d. Saya ingin menggunakan WebGL untuk beberapa grafik 2d. Tetapi saya tidak melihat sampel yang berfungsi untuk melakukan ini dengan THREE.js.

Saat Anda mengatakan "intergrate in the 3D scene", artinya Anda tidak ingin UI sebagai overlay di atas 3D, ya?

Loupax, saya telah mengubah judul menjadi littlebit :) Maksud saya di atas tetapi dengan WebGL yang diberikan. maksud saya sesuatu seperti itu:

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

Saya hanya akan menggunakan HTML untuk GUI, jadi cukup <div> dll di atas elemen <canvas> ...

Jika Anda ingin GUI dirender dengan Three.js di atas adegan Anda yang sebenarnya, saya akan menggunakan dua elemen kanvas di atas satu sama lain, satu untuk permainan / adegan / apa pun, dan yang teratas untuk gui. Anda perlu memastikan bahwa bagian atas transparan antara elemen GUI, tetapi saya tidak tahu apakah itu mungkin dengan Three.js ...

Ya, untuk kebanyakan kasus HTML adalah cara terbaik, itu jauh lebih sederhana.

Jika Anda ingin menjadi mewah dan HUD Anda dirender oleh WebGL (misalnya untuk animasi 3D atau beberapa efek shader), Anda dapat melakukan sesuatu seperti ini:

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

(mungkin ada beberapa cara bagaimana melakukannya tanpa FBO hanya bermain dengan menulis / membaca / masking kedalaman, setidaknya untuk overlay 2d)

alteredq, terima kasih untuk tautan ini. Saat ini saya belum menemukan cara untuk "bermain". Tetapi saya menganalisis kode di WebGLRenderer dan menemukan bahwa saya dapat menggunakan sesuatu seperti itu:

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

Ini bekerja.

Tapi saya masih tertarik dengan cara dual rendering dan blending ini.

Saya sedang mengerjakan proyek WebVR dan solusi DOM bukanlah pilihan. Saya akhirnya melakukan HUD dengan Three.js murni. Saya membuat adegan terpisah dan membuatnya di atas adegan asli saya.

Anda dapat melihat contoh langsungnya di sini:
http://codepen.io/jaamo/pen/MaOGZV

Dan posting blog tentang solusinya di sini:
http://www.evermade.fi/pure-three-js-hud/

Saya sebenarnya sedang mengerjakan alat HUD untuk webVR.
Ini didasarkan pada StereoEffect.js yang dapat Anda temukan di contoh three.js.
Ini membuat dua bagian dari adegan pertama, lalu dua bagian dari adegan HUD di overlay semua dengan StereoEffectCamera yang PerspectiveCamera.

Ada demo dengan crosshair dan interaksi dengan beberapa elemen di layar.
https://github.com/trinketmage/three.js-vr-hud/

Saat ini saya sedang mengerjakan fitur "label" dalam adegan HUD yang membuat frustrasi, saya akan menghargai tip atau bantuan apa pun.
Terima kasih

Jika seseorang masih mencari cara merender pemandangan Ortho di atas perspektif satu (sehingga Anda dapat menyelaraskan objek ke batas atas / kiri / kanan / bawah atau memiliki ukuran dalam piksel), saya punya contoh di sana .

@cecilemuller - proyek Anda tidak mengizinkan saya untuk membuka masalah jadi saya berkomentar di sini. Apakah itu bekerja? http://jsbin.com/sisutopede/edit?html , js, output (Saya mengganti let const dengan var ) Saya hanya dapat melihat bola biru, sepertinya saya tidak melihat satu pun Elemen UI?

@trinketmage - terima kasih telah membuat demo / plugin yang luar biasa dan meluangkan waktu untuk menjelaskan masalah 1 , saat ini saya mencoba memikirkan masalah 2 : https://github.com/trinketmage/three.js-vr-hud/issues/ 2 - berfungsi dengan sempurna saat saya menggunakan keyboard, saat saya mulai menggunakan perangkat seluler / Alat Pengembang Chrome dan mensimulasikan orientasi, perangkat bergerak ...


Pada catatan samping - cukup salin & tempel - pada titik tertentu saya harus dapat menulis kode saya sendiri mengingat semua pengetahuan di utas ini ...

@ stefek99 Ini harus menunjukkan persegi panjang berwarna di atas bola biru; baru saja mencoba jsbin di chrome dan firefox, berikut tangkapan layarnya:
screenshot

Meskipun ya, ada beberapa fitur es6 dalam kode tersebut, jadi Anda dapat menggunakan Babel REPL untuk mengonversi ke es5 jika tidak berjalan.

Ini tahun 2020, apa cara terbaik untuk membuat hamparan HUD 2D di dalam ThreeJS tanpa menggunakan metode hybrid atau aneh? Idealnya untuk memiliki akses ke sesuatu seperti PixiJS di dalam ThreeJS?

@sylwesterdigital Anda dapat menggunakan forum three.js jika Anda membutuhkan bantuan.

Ya ... Saya pernah ke sana dan akun saya ditangguhkan, jadi saya tidak dapat berkomentar, membalas, atau membuat topik baru. Apakah komunitas ThreeJS tidak akan kemana-mana dan semua orang melakukan pengkodean f * React untuk mendapatkan pembayaran bulanan?

Setelah bertahun-tahun berkeliaran, saya rasa tidak ada cara mutlak untuk melakukan hud di WebGL, itu sepenuhnya tergantung pada proyek, tetapi pemikiran saya adalah:

  • Jika Anda tidak memerlukan efek khusus pada HUD, gunakan HTML, ada "biaya pengomposisian" tetapi selama Anda tidak memiliki terlalu banyak overlay (jika saya menggunakan 4 kali / 5 kali ukuran overlay layar, itu menjadi lambat di Chrome dengan Mac Book Pro Retina pertengahan 2015), contoh HUD di html: demo waymaze .
  • jika Anda membutuhkannya di gl karena alasan apa pun, saya akan langsung meletakkannya di Grup yang setiap bingkai akan ditempatkan di depan kamera yang ditampilkan di atas segalanya; Hitung luasan grup dari kamera pada jarak z tertentu pada pengubahan ukuran untuk menempatkan item di atas / kanan / bawah / kiri; Cara ini memberikan fleksibilitas untuk menggunakan perspektif (jika Anda membutuhkan elemen 3D di HUD) atau tidak dan saya rasa itu harus menjadi biaya terendah untuk kinerja (tolong koreksi saya jika saya salah).
  • Cara yang lebih "logis" @sylwesterdigital , menurut pendapat saya, adalah melakukan render kedua (baik Ortografis atau Perspektif) di atas adegan sebagai tekstur di dalam adegan yang sama; Tetapi kerugian besar adalah bahwa ini adalah cara yang kurang bijak untuk kinerja yang menyebabkan perender kedua ukuran layar dikalikan dengan rasio piksel, atau, jika perender HUD lebih kecil Anda kehilangan kualitas.
  • Pixi.js di atas Three.js adalah solusi yang buruk @sylwesterdigital , karena saya kira Anda akan memiliki 2 instance WebGL dan saya rasa itu berat?
  • Kanvas tua yang bagus di atas three.js juga harus berfungsi, salah satu rekan kerja saya yang luar biasa @namide mengajari saya pelajaran developer yang sangat besar: "bagaimana mereka mengoptimalkannya untuk videogame?", Di Unity, cara umum untuk menangani HUD adalah dengan CanvasRenderer di di atas segalanya.

Jadi kesimpulannya, menurut saya, komponen visual HUD harus bergantung pada berapa biaya kinerja yang Anda mampu.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat