2013-12-17 2 views
1

Я начал игру на основе кубика three.js и имел некоторые проблемы с прозрачностью рендеринга в блоках.Можно ли остановить эти лица от рендеринга?

Я загружая блоки из файла JSON, где структура каждого выглядит следующим образом:

{ 
    'sprite': 'water.png', 
    'collides': false, 
    'moves': false, 
    'transparent': true 
} 

Затем создание текстур в моем визуализаторе от их спрайтов и прозрачного значения.

var texture = THREE.ImageUtils.loadTexture('/img/' + 
    _materials[i].sprite); 

var properties = { 
    map: texture 
}; 

if(_materials[i].transparent) { 
    properties.opacity = 0.3; 
    properties.transparent = true; 
} 

materials[i] = new THREE.MeshBasicMaterial(properties); 

И предыдущее определение для воды выглядит следующим образом.

water rendering

Вы можете видеть лица других блоков воды, через те, которые находятся выше и рядом с ними. Возможно ли предотвратить это?

+0

Вам понадобится скрытое устранение лица, чтобы вы вообще не проходили внутренние лица к рендерингу или только визуализировали прозрачное лицо, самое близкое к камере. –

+0

Если бы это был я, я бы просто визуализировал верхние грани , Как @ratchetfreak сказал. – Vallentin

+0

Если вы не можете назначить отдельные лица в кубе разных материалов, вы можете нарисовать воду за два прохода. На первом проходе отключить цвет записи и включить запись глубины, а во втором пропустить разрешить запись цвета, но отключить запись глубины и использовать тест глубины: 'GL_LEQUAL'. Это должно устранить все, кроме верхнего слоя воды, хотя из-за радостей с плавающей запятой вам может потребоваться небольшое смещение глубины на одном из ваших проходов, чтобы это работало. –

ответ

1

Самое простое решение - использовать многокомпонентные материалы для CubeGeometry.

Делай так:

var texture = THREE.ImageUtils.loadTexture('/img/' + 
    _materials[i].sprite); 

var properties = { 
    map: texture 
}; 
// hidden faces texture with opacity to 0 
var hMat = new THREE.MeshBasicMaterial({color:0xFFFFFF, transparent:true, opacity:0}); 


if(_materials[i].transparent) { 
    properties.opacity = 0.3; 
    properties.transparent = true; 
} 

matWater = new THREE.MeshBasicMaterial(properties); 

var finalMat = new THREE.MeshFaceMaterial([ hMat, hMat, matWater, hMat, hMat, hMat]); 
// I guess indice 2 is the top face , depend the cube orientation. 

var mesh = new THREE.Mesh(CubeGeo, finalMat); 

приветы.

Смежные вопросы