Three.js: Создание HUD поверх 3D сцены (WebGLRenderer)?

Использовать HTML

+1 для HTML. Вы разрабатываете для платформы _designed_ для пользовательского интерфейса; использовать это. :)

На самом деле я не понимаю, почему вам НЕ СЛЕДУЕТ использовать HTML! +1

Да, если его не нужно интегрировать в 3D-сцену, я бы использовал HTML поверх холста.

Благодарю.
mrdoob, да, я хочу интегрироваться в 3д сцену. Я хочу использовать WebGL для 2-мерной графики. Но я не видел рабочего образца для этого с THREE.js.

Когда вы говорите «интегрировать в трехмерную сцену», вы имеете в виду, что не хотите, чтобы пользовательский интерфейс накладывался на трехмерную сцену, верно?

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

Я бы просто использовал HTML для графического интерфейса, поэтому просто <div> и т. Д. Поверх элемента <canvas> ...

Если вы хотите, чтобы графический интерфейс отображался с помощью Three.js поверх вашей реальной сцены, я бы использовал два элемента холста друг над другом, один для игры / сцены / чего угодно, а верхний - для графического интерфейса. Вам нужно будет убедиться, что верхний прозрачен между элементами графического интерфейса, но я не знаю, возможно ли это с Three.js ...

Да, в большинстве случаев HTML - лучший способ, это намного проще.

Если вы хотите пофантазировать и визуализировать ваш HUD с помощью WebGL (например, для анимированного 3D или некоторых шейдерных эффектов), вы можете сделать что-то вроде этого:

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

(вероятно, есть способ сделать это без FBO, просто играя с глубиной записи / чтения / маскирования, по крайней мере, для 2d оверлеев)

alteredq, спасибо за ссылку. В настоящее время я не нашел способа «играть». Но я проанализировал код на WebGLRenderer и обнаружил, что могу использовать что-то вроде этого:

var sprite = new THREE.Sprite ({карта: текс, useScreenCoordinates: true});
scene.addChild (спрайт);

Это работает.

Но меня все еще интересует способ двойного рендеринга и смешивания.

Я работал над проектом WebVR, и решение DOM мне не подходило. В итоге я сделал HUD на чистом Three.js. Я создал отдельную сцену и отрендерил ее поверх моей исходной сцены.

Вы можете увидеть живой пример здесь:
http://codepen.io/jaamo/pen/MaOGZV

И сообщение в блоге о решении здесь:
http://www.evermade.fi/pure-three-js-hud/

На самом деле я работаю над инструментом HUD для webVR.
Он основан на StereoEffect.js, который вы можете найти в примерах three.js.
Он визуализирует две части первой сцены, затем две части сцены HUD с наложением, все с StereoEffectCamera, которые являются PerspectiveCamera.

Есть демонстрация с прицелом и взаимодействием с некоторыми элементами сцены.
https://github.com/trinketmage/three.js-vr-hud/

В настоящее время я работаю над функцией «ярлык» в усеченной части сцены HUD, я был бы признателен за любые советы или любую помощь.
благодаря

Если кто-то все еще ищет, как визуализировать Орто-сцену поверх перспективной (чтобы вы могли выровнять объекты по верхней / левой / правой / нижней границам или иметь размеры в пикселях), у меня был там пример .

@cecilemuller - ваш проект не позволяет мне открывать вопросы, поэтому я здесь комментирую. Это работает? http://jsbin.com/sisutopede/edit?html , js, output (я заменил let const на var ) Я вижу только синюю сферу, похоже, я не вижу ничего Элементы пользовательского интерфейса?

@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 в chrome и firefox, вот скриншот:

Хотя да, в коде есть некоторые функции es6, поэтому вы можете использовать Babel REPL для преобразования в es5, если он не работает.

Это 2020 год, как лучше всего создать 2D-наложение HUD внутри ThreeJS без использования гибридных или странных методов? В идеале иметь доступ к чему-то вроде PixiJS внутри ThreeJS?

@sylwesterdigital Вы можете использовать форум three.js, если вам нужна помощь.

Да ... Я был там, и моя учетная запись заблокирована, поэтому я не могу комментировать, отвечать или создавать новые темы. Сообщество ThreeJS никуда не денется, и все пишут на f * React, чтобы получать ежемесячный платеж?

После многих лет мычания, я думаю, что не существует абсолютных способов сделать hud в WebGL, это полностью зависит от проекта, но я думаю:

• Если вам не нужны особые эффекты на HUD, перейдите на HTML, есть «стоимость компоновки», но пока у вас не слишком много наложений (если я использую 4/5-кратные размеры наложений экрана, они будут тормозить в Chrome с Mac Book Pro Retina середины 2015 года), пример HUD в html: demo Waymaze .
• если вам нужно, чтобы он был в gl по какой-либо причине, я бы прямо поставил это Group, чтобы каждый кадр был помещен перед камерой, визуализированной поверх всего; Вычислите размеры группы от камеры на определенном расстоянии z при изменении размера, чтобы разместить элемент сверху / справа / снизу / слева; Эти способы дают гибкость для использования перспективы (если вам нужны 3D-элементы в HUD) или нет, и я думаю, это должна быть самая низкая стоимость для производительности (пожалуйста, поправьте меня, если я ошибаюсь).
• На мой взгляд, более "логичным" способом @sylwesterdigital было бы выполнить второй рендер (более точный или ортогональный) поверх сцены в качестве текстуры внутри той же сцены; Но огромный недостаток заключается в том, что это менее эффективный способ, когда второй рендерер имеет размер экрана, умноженный на соотношение пикселей, или, если рендерер HUD меньше, вы теряете качество.
• Pixi.js поверх Three.js - плохое решение @sylwesterdigital , потому что я думаю, у вас будет 2 экземпляра WebGL, и я думаю, что это тяжело?
• Старый добрый холст поверх three.js тоже должен работать, один из моих замечательных коллег @namide преподал мне огромный урок для разработчиков: «как бы они оптимизировали его для видеоигр?». В Unity распространенные способы обработки HUD - это CanvasRenderer на в довершение всего.

Итак, в заключение, на мой взгляд, визуальные компоненты HUD должны зависеть от того, какую стоимость производительности вы можете себе позволить.