Multi-map-channel модели и текстуры в three.js
Я пытаюсь использовать более двух каналов карты в three.js для назначения текстур моим моделям. К моему удивлению, ни один нативный материал в three.js не поддерживает несколько наборов uvs. Поэтому я должен использовать ShaderMaterial и писать свои собственные вершинные / фрагментные шейдеры, чтобы иметь доступ к нескольким каналам карты.
Теперь мне удалось заставить многоканальные uvs работать с простым кодом:
<script id="vertex_shh" type="x-shader/x-vertex">
//VERTEX SHADER//
varying vec2 vUv;
attribute vec2 uv2;
varying vec2 vUv2;
attribute vec2 uv3;
varying vec2 vUv3;
attribute vec2 uv4;
varying vec2 vUv4;
attribute vec2 uv5;
varying vec2 vUv5;
void main()
{
vUv = uv;
vUv2 = uv2;
vUv3 = uv3;
vUv4 = uv4;
vUv5 = uv5;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
// END //
</script>
<script id="fragment_shh" type="x-shader/x-fragment">
//FRAGMENT SHADER//
uniform sampler2D tCh1;
uniform sampler2D tCh2;
uniform sampler2D tCh3;
uniform sampler2D tCh4;
uniform sampler2D tCh5;
varying vec2 vUv;
varying vec2 vUv2;
varying vec2 vUv3;
varying vec2 vUv4;
varying vec2 vUv5;
void main(void)
{
vec3 DiffuseComp;
vec4 TexCh1 = texture2D(tCh1, vUv);
vec4 TexCh2 = texture2D(tCh2, vUv2);
vec4 TexCh3 = texture2D(tCh3, vUv3);
vec4 TexCh4 = texture2D(tCh4, vUv4);
vec4 TexCh5 = texture2D(tCh5, vUv5);
DiffuseComp = ((TexCh1.rgb * (1.0 - TexCh4.rgb) + (TexCh2.rgb * TexCh4.rgb)) * (1.0 - TexCh5.rgb)) + (TexCh3.rgb * TexCh5.rgb);
gl_FragColor= vec4(DiffuseComp, 1.0);
}
// END //
/* SHADER */
var vertShader = document.getElementById('vertex_shh').innerHTML;
var fragShader = document.getElementById('fragment_shh').innerHTML;
var attributes = {};
var uniforms = {
tCh1: { type: "t", value: Textura1},
tCh2: { type: "t", value: Textura2},
tCh3: { type: "t", value: Textura3},
tCh4: { type: "t", value: Textura4},
tCh5: { type: "t", value: Textura5}
};
/* MATERIAL */
var multitexsh = new THREE.ShaderMaterial({
uniforms: uniforms,
attributes: attributes,
vertexShader: vertShader,
fragmentShader: fragShader
});
Однако моя проблема в том, что мне в основном нужен шейдер с этой функциональностью и некоторыми основными функциями шейдера Phong: освещение (от освещения сцены) и зеркальные блики. Я полностью потерян здесь. Я пытался найти способы добавить эту функцию в нативные шейдеры или добавить упомянутые функции из материала phong в мой собственный шейдер, но не нашел информации, которая была бы достаточной для этого с моими базовыми навыками кодирования. Может кто-нибудь сделать шаг? и помочь мне здесь?
РЕДАКТИРОВАТЬ:
Благодаря pailhead он стал работать с onBeforeCompile. Это на r89, обновленный код ниже:
/* MANAGERS, LOADERS */
var manager = new THREE.LoadingManager();
var loader = new THREE.FBXLoader( manager );
var textureLoader = new THREE.TextureLoader( manager );
/*TEXTURE */
var prodtex ='textures/testing/cubetex.jpg';
var prodtex2 ='textures/testing/cube_blendmap.jpg';
var Textura1 = textureLoader.load (prodtex);
var Textura2 = textureLoader.load (prodtex);
var Textura3 = textureLoader.load (prodtex2);
/* MATERIAL */
var MAT = new THREE.MeshPhongMaterial();
MAT.map = Textura1;
/* MY SHADER CHANGES*/
const uv2_chunkToReplaceVS = 'attribute vec2 uv2; varying vec2 vUv2; attribute vec2 uv3; varying vec2 vUv3;'
const uv2_chunkToReplaceVSV = 'vUv2 = uv2; vUv3 = uv3;'
const uv2_chunkToReplaceFS = 'uniform sampler2D tCh1; uniform sampler2D tCh2; uniform sampler2D tCh3; varying vec2 vUv2; varying vec2 vUv3;'
const map_chunkToReplaceFSV = 'vec4 TexCh1 = texture2D(tCh1, vUv); vec4 TexCh2 = texture2D(tCh2, vUv2); vec4 TexCh3 = texture2D(tCh3, vUv3); vec4 texelColor = texture2D( map, vUv ); texelColor = mapTexelToLinear( texelColor ); TexCh1 = mapTexelToLinear( TexCh1 ); TexCh2 = mapTexelToLinear( TexCh2 ); TexCh2 = mapTexelToLinear( TexCh2 ); diffuseColor *= TexCh1 * (1.0 - TexCh3) + (TexCh2 * TexCh3);'
MAT.onBeforeCompile = shader=>{
shader.uniforms.tCh1= {type: "t", value: Textura1};
shader.uniforms.tCh2= {type: "t", value: Textura2};
shader.uniforms.tCh3= {type: "t", value: Textura3};
shader.fragmentShader = shader.fragmentShader.replace('#include <map_fragment>', map_chunkToReplaceFSV);
shader.vertexShader = shader.vertexShader.replace('#include <uv2_pars_vertex>', uv2_chunkToReplaceVS );
shader.vertexShader = shader.vertexShader.replace('#include <uv2_vertex>', uv2_chunkToReplaceVSV );
shader.fragmentShader = shader.fragmentShader.replace('#include <uv2_pars_fragment>', uv2_chunkToReplaceFS);
};
/* MODEL */
loader.load( ('models/' + 'cube' + '.FBX'), function( object ) {
//set material//
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = MAT;
};
} );
scene.add (object);
});
1 ответ
Вы можете использовать недокументированную функцию материала под названием onBeforeCompile,
Это обратный вызов, который вызывается до трех разборов шаблонов шейдера и до его компиляции.
Шаблон может выглядеть так
//someTemplate.vert
#include <common>
#include <some_pars_vertex>
void main(){
#include <some_vertex>
#include <another_vertex>
gl_Position = projectionMatrix * foobar;
}
Допустим, вы хотите добавить больше ультрафиолетовых каналов. Вы сделали бы некоторые фрагменты / функции в GLSL. Это должно произойти в глобальном масштабе (выше void main(){...}):
//myBeforeVoidMain.vert
attribute vec2 aUV2;
attribute vec2 aUV3;
varying vec2 vUv2;
varying vec2 vUv3;
Тогда это должно произойти в основной функции:
//myUv.vert
vUv2 = aUV2;
vUv3 = aUV3;
Вы можете ввести этот код, но где и как?
Как:
const chunkToReplace = THREE.ShaderChunk.uv_pars_vertex
myMaterial = new THREE.MeshPhongMaterial()
myMaterial.onBeforeCompile( shader=>{
shader.uniforms.myUniform = {value:foo}
shader.vertexShader = shader.vertexShader.replace( '#include <uv_pars_vertex>', chunkToReplace + myChunk )
})
Куда:
Вы должны быть знакомы с обоими: https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderLib
И вам нужно подумать об этом. Можно отметить, что <common> присутствует в глобальном масштабе почти каждой библиотеки. Тем не менее, поскольку он включен в vert и фрагменты шейдеров, вы не можете упоминать о attribute в этом фрагментный шейдер не скомпилируется.
Один хороший блок для добавления атрибутов, униформы и вариаций в вершинный шейдер uv_pars_vertex потому что он также присутствует практически во всех шейдерах.
Для этой конкретной проблемы вам также нужно расширить фрагментный шейдер. Опять вариации будут помещены в uv_pars_fragment, а затем вы должны найти остальную часть логики, где вы будете использовать эти ультрафиолетовые каналы.
нота:
Хорошей идеей будет объединить два канала в один атрибут:
attribute vec4 aUv23;
...
vUv2 = aUv23.xy;
vUv3 = aUv23.zw;