Две текстуры на одном объекте Три js

Моя цель — визуализировать две разные текстуры на одном объекте.

Я пытаюсь визуализировать землю с ночной текстурой и дневной текстурой, примерно так: http://stuffin.space .

Проблема в том, что я все еще хотел бы использовать классы Three.js, чтобы я мог добавить карту рельефа и отражение Фонга, используя MeshPhongMaterial без необходимости писать шейдеры целиком.

Я думал о том, чтобы иметь два объекта, один из которых будет прозрачным с одной стороны, или расширить класс MeshPhongMaterial, но это кажется довольно сложным.

Есть ли простое решение для решения этой проблемы с помощью three.js?


three.js textures shader 3d-rendering
person Mattia    schedule 06.10.2019    source источник
comment
3 способа, о которых я могу думать. Создайте свой собственный шейдер. Изменить встроенный шейдер. Объедините текстуры на холсте и используйте полученное изображение в качестве текстуры.   -  person 2pha    schedule 07.10.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете назначить функцию свойству onBeforeCompile материала.

Он получает объект, который имеет исходный код как для вершинного, так и для фрагментного шейдеров, а также для юниформ. Как в

someMaterial.onBeforeCompile = function(shader) {
  console.log(shader.vertexShader);
  console.log(shader.fragmentShader);
});

Вы изменяете шейдеры, как в

someMaterial.onBeforeCompile = function(shader) {
  shader.fragmentShader = shader.fragmentShader.replace(thingToReplace, replacement);
});

Исходный код шейдера является «предварительно расширенным», что означает, что это специальный формат three.js. Например, исходный код фрагментного шейдера по умолчанию при запуске выше может выглядеть примерно так:

#include <common>
#include <color_pars_fragment>
#include <uv_pars_fragment>
#include <uv2_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <aomap_pars_fragment>
#include <lightmap_pars_fragment>
#include <envmap_pars_fragment>
#include <fog_pars_fragment>
#include <specularmap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
    #include <clipping_planes_fragment>
    vec4 diffuseColor = vec4( diffuse, opacity );
    #include <logdepthbuf_fragment>
    #include <map_fragment>
    #include <color_fragment>
    #include <alphamap_fragment>
    #include <alphatest_fragment>
    #include <specularmap_fragment>
    ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
    #ifdef USE_LIGHTMAP
        reflectedLight.indirectDiffuse += texture2D( lightMap, vUv2 ).xyz * lightMapIntensity;
    #else
        reflectedLight.indirectDiffuse += vec3( 1.0 );
    #endif
    #include <aomap_fragment>
    reflectedLight.indirectDiffuse *= diffuseColor.rgb;
    vec3 outgoingLight = reflectedLight.indirectDiffuse;
    #include <envmap_fragment>
    gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    #include <premultiplied_alpha_fragment>
    #include <tonemapping_fragment>
    #include <encodings_fragment>
    #include <fog_fragment>
}

Просматривая все эти фрагменты, вы можете попытаться выяснить, какую часть заменить. Мое предположение для вас — это часть #include <color_fragment>, основанная на этой статьи

person gman    schedule 07.10.2019