Three.js / webgl RayCasting спрайты в сцене с прозрачностью или альтернативами - PullRequest
Новая
       153

Three.js / webgl RayCasting спрайты в сцене с прозрачностью или альтернативами

1 голос
/ 09 мая 2020

Я работаю над веб-игрой, которая требует выбора нарисованных объектов, а не простых геометрических c фигур. Для этого я рисовал их как спрайты в сцене на холсте, используя Three. JS. Я много месяцев ломал себе голову, пытаясь выяснить, как определить, сталкивается ли луч raycaster в моем контексте webgl (используя Three JS) с прозрачной частью спрайта. Я просмотрел и прочитал столько сообщений, сколько смог найти, но нашел только два сообщения о решениях: 

var ctx =renderer.getContext("experimental-webgl", {preserveDrawingBuffer: true})
const pixel = new Uint8Array(4)
ctx.readPixels(10,30,1,1, ctx.RGBA,  ctx.UNSIGNED_BYTE,  pixel); log(pixel);

, которое требует использования preserveDrawingBuffer, что снизит мою производительность, или: 

raycaster.intersectObject(scene.getObjectByName('some sprite')[0]].uv

, а затем с помощью математического мастера dry для сравнения UV-координат с самим изображением, я думаю, загружается в буфер где-то из scene.getObjectByName('some sprite').material.map.image.src.valueOf(), а затем, если соответствующий пиксель или нечеткая область прозрачны, мы не Не считаю спрайт выбранным. Это было бы дополнительно сложно, потому что спрайты часто вращаются, масштабируются, смещаются по центру и т. Д. c. Я даже не уверен на 100%, как бы я вообще это реализовал.

Мне интересно, есть ли другой способ, особенно более «правильный» способ сделать это. Есть ли способ преобразовать изображения спрайтов в / снабдить мои изображения какими-то сетками, а затем точно нарисовать меня sh с изображением, чтобы трассировщик лучей действительно должен был использовать правильную форму объекта, а не просто изображение самолет (спрайт)? Было бы лучше взять каждый спрайт и тщательно смоделировать его края в программе 3D-моделирования? Я перепробовал все комбинации «я sh», «геометрия», «изображение», «спрайт» и c и не нашел решения.

Любая помощь приветствуется. Нищие не могут выбирать, но я также надеюсь, что в конечном итоге появятся анимированные объекты, поэтому было бы дополнительно полезно, если бы это решение не стало невозможным.

Спасибо

e: см. Комментарий @ gman ниже. Я работал в системе выбора цвета, только реально меняя emissive.setHex на material.color.set (id), а затем проверял цвет вместо эмиссионных. отлично работает, но, похоже, немного тормозит. Придется посмотреть, плохо ли я его реализовал или смогу сделать его более эффективным. Спасибо вам обоим !!

1 Ответ

0 голосов
/ 09 мая 2020

С дополнительным проходом отрисовки вы можете визуализировать сцену в текстуру с выделенным материалом для каждого объекта и указать в ней 2D-точку. сопоставление идентификаторов каждого объекта, как описано в этом хаке OpenGL (преобразовать его в WebGL)

Используйте Scene.overrideMaterial для назначения материала всем объектам и Object3D.onBeforeRender , чтобы установить цвет каждого объекта перед его рисованием

Это будет стоить, но я думаю, что стоит попробовать

...