Артефакты при рендеринге обеих сторон прозрачного объекта с помощью тр .js

Я пытаюсь визуализировать обе стороны прозрачного объекта с помощью three.js. Другие объекты, расположенные внутри прозрачного объекта, также должны отображаться. К сожалению, я получаю артефакты, с которыми я не знаю, справляюсь. Вот тестовая страница: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

Вот изображение указанного артефакта. Похоже, они происходят из базовой геометрии сферы.

Интересно, что артефакты не видны для режима наложения THREE.SubtractiveBlending = 2.

Любая помощь приветствуется!

Alex

Ответ 1

Самопрозрачность особенно сложна в WebGL и three.js. Вам просто нужно по-настоящему понять проблемы, а затем адаптировать свой код для достижения желаемого эффекта.

Вы можете получить вид двухсторонней прозрачной сферы в Three.js с помощью хитрости: вам нужно визуализировать две прозрачные сферы - одну с material.side = THREE.BackSide, а material.side = THREE.BackSide с material.side = THREE.FrontSide.

Использование таких методов обычно требуется, если вы хотите обеспечить прозрачность без артефактов, особенно если вы позволяете камере или объекту двигаться.

Вот скрипка: http://jsfiddle.net/x5bm0qLf/

РЕДАКТИРОВАТЬ: Обновил скрипку до three.js r.105

Ответ 2

Как правило, для создания прозрачных объектов вам нужно сортировать их спереди назад (я предполагаю, что three.js уже делает это). Если ваш объект выпуклый (как и оба из них), вы иногда можете получить рендеринг каждого объекта дважды, один раз с gl.cullFace(gl.CCW) и снова с gl.cullFace(gl.CW). Так, например, если куб находится внутри сферы, в которой вы эффективно делаете

gl.enable(gl.CULL_FACE);
gl.cullFace(gl.CW);
drawSphere();  // draws the back of the sphere
drawCube();    // draws the back of the cube
gl.cullFace(gl.CCW);
drawCube();    // draws the front of the cube.
drawSphere();  // draws the front of the sphere.

Я не знаю, как это сделать в three.js

Это только обрабатывает объекты, которые являются выпуклыми и не пересекаются (один объект полностью содержится внутри другого).

Ответ 3

Чтобы визуализировать эту сцену правильно с альфа-смешением, треугольники должны отображаться с обратной стороны перед каждым кадром. Ваша сцена особенно сложна, так как у вас есть один объект внутри другого и рендеринг обеих сторон, для чего потребуется отрисовка части сферы, затем куб, затем остальная часть сферы. Я сомневаюсь, что tr.js(или любая другая библиотека граф сцены) может обрабатывать этот случай.

Аддитивное или субтрактивное смешивание будет работать без сортировки, но выглядит не так хорошо.

Ответ 4

Сделайте клон исходной сетки и переверните ее нормали; затем сделайте два одинаковых "односторонних" материала для каждого с другим именем. Не самый классный подход, но он работал отлично. Я боролся с той же проблемой, вот что я сделал: P

Файл .json выглядит следующим образом:

    {
"materials":[
    { "name":"ext", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 },
    { "name":"int", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 }
],
"meshes":[
    {
        "name":"Cylinder001",
        "material":"ext", ...

    {
        "name":"Cylinder002",
        "material":"int", ...