ThreeJS [r85]:带有阴影贴图的自定义着色器

ThreeJS [r85]: Custom Shader with Shadowmap

我创建了一个自定义着色器,以便能够使用具有 4 种不同纹理的 BlendMap,但我无法使用它来获得 shadows/lightning 效果。

我在这里错过了什么?或者有其他方法可以实现相同的功能吗?

下面的网格创建方法显示了正确混合的所有纹理。

// Creates the ground
function CreateGround() {
    var uniforms = THREE.UniformsUtils.merge([
        THREE.UniformsLib["lights"],
        THREE.UniformsLib["shadowmap"],
    {
        TextureBackground: { type: "t", value: null },
        TextureR: { type: "t", value: null },
        TextureG: { type: "t", value: null },
        TextureB: { type: "t", value: null },
        TextureBlendMap: { type: "t", value: null }
    }]);

    var shaderMaterial;
    try {
        shaderMaterial = new THREE.ShaderMaterial({
            lights: true,
            uniforms: uniforms,
            vertexShader: BlendMapVertexShader,
            fragmentShader: BlendMapFragmentShader
        });
    } catch (e) {
        alert("Error 'CreateGround' : GPU Shader couldn't compile");
    }


    shaderMaterial.uniforms.TextureBlendMap.value = _TextureBlendMap;
    shaderMaterial.uniforms.TextureBackground.value = _TextureSand;
    shaderMaterial.uniforms.TextureR.value = _TextureClay;
    shaderMaterial.uniforms.TextureG.value = _TextureClay;
    shaderMaterial.uniforms.TextureB.value = _TextureRock;

    var geometry = new THREE.BoxGeometry(GROUND_SIZE, GROUND_HEIGHT, GROUND_SIZE);
    var mesh = new THREE.Mesh(geometry, shaderMaterial);

    mesh.castShadow = false;
    mesh.receiveShadow = true;

    return mesh;
}

这是我当前的着色器:

BlendMapVertexShader = [
THREE.ShaderChunk["shadowmap_pars_vertex"],
"varying vec2 vUv;",
"varying vec3 vPosition;",

"void main( void ) {",
    "vUv = uv;",
    "vPosition = position;",
    "gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1);",

    THREE.ShaderChunk["begin_vertex"],
    THREE.ShaderChunk["worldpos_vertex"],
    THREE.ShaderChunk["shadowmap_vertex"],
"}",
].join("\n");

BlendMapFragmentShader = [
THREE.ShaderChunk["common"],
THREE.ShaderChunk["packing"],
THREE.ShaderChunk["shadowmap_pars_fragment"],

"varying vec2 vUv;",
"varying vec3 vPosition;",
"uniform sampler2D TextureBlendMap;",
"uniform sampler2D TextureBackground;",
"uniform sampler2D TextureR;",
"uniform sampler2D TextureG;",
"uniform sampler2D TextureB;",

"void main() {",

    "vec4 cBlend = texture2D(TextureBlendMap, vUv);",
    "float bText = 1.0 - (cBlend.r + cBlend.g + cBlend.b);",
    "vec2 tiledCoords = vUv * 40.0;",
    "vec4 cBack = texture2D(TextureBackground, tiledCoords) * bText;",
    "vec4 cR = texture2D(TextureR, tiledCoords) * cBlend.r;",
    "vec4 cG = texture2D(TextureG, tiledCoords) * cBlend.g;",
    "vec4 cB = texture2D(TextureB, tiledCoords) * cBlend.b;",
    "vec4 cTot = cBack + cR + cG + cB;",
    "gl_FragColor = cTot;",
    THREE.ShaderChunk["shadowmap_fragment"],
"}",
].join("\n");

我在浏览器中没有错误或警告。

three.js r85Dev

这是一个长镜头,但如果场景中的所有对象都使用此 material,则不应有任何阴影,因为没有任何东西会投射阴影。

mesh.castShadow = false;
mesh.receiveShadow = true;

但我猜测在您的其余代码中,您将一些网格设置为投射阴影。

我不知道我是否完全理解 ShaderChunk 方法,但它看起来只是一系列定义的字符串,您将其放入自己的文本中间,这部分看起来有点可疑:

"gl_FragColor = cTot;",
THREE.ShaderChunk["shadowmap_fragment"],

但我看不出 shadowmap_fragment 所做的任何事情如何有机会与我们现有的 gl_FragColor 值混合。在 shadowmap_fragment src 它运行:

void main() {

    gl_FragColor = vec4( 0.0, 0.0, 0.0, opacity * ( 1.0 - getShadowMask() ) );

}

其中 getShadowMask() 对 return 浮动的灯光做了很多魔术。所以我看不出您分配的 gl_FragColor 是如何与 shadowmap_fragment return 混合在一起的。换个顺序怎么样:

THREE.ShaderChunk["shadowmap_fragment"],
"gl_FragColor = cTot*gl_FragColor.a;"

不确定这是否有帮助,但您可以查看 shadowmap_pars_frag 的 src 以了解幕后发生的事情。也许我们遗漏了什么。

最后一件事:尝试只使用 none 纹理混合的阴影来隔离问题。可能是您达到了纹理采样数量的 GLSL 限制 - 因为阴影块也使用纹理采样。

好的。我最终复制了 PHONG 着色器,然后覆盖了漫反射颜色输入。解决方案如下。

这是用blendmapshader创建网格的方法

// Creates the ground
function CreateGround(material) {
    var uniforms = THREE.UniformsUtils.merge([
        THREE.UniformsLib["common"],
        THREE.UniformsLib["aomap"],
        THREE.UniformsLib["lightmap"],
        THREE.UniformsLib["emissivemap"],
        THREE.UniformsLib["bumpmap"],
        THREE.UniformsLib["normalmap"],
        THREE.UniformsLib["displacementmap"],
        THREE.UniformsLib["gradientmap"],
        THREE.UniformsLib["fog"],
        THREE.UniformsLib["lights"],
    {
        emissive: { type: "c", value: new THREE.Color(0x000000) },
        specular: { type: "c", value: new THREE.Color(0x111111) },
        shininess: { type: "f", value: 30 },

        TextureBackground: { type: "t", value: null },
        TextureR: { type: "t", value: null },
        TextureG: { type: "t", value: null },
        TextureB: { type: "t", value: null },
        TextureBlendMap: { type: "t", value: null },
    }]);

    var shaderMaterial;
    try {
        shaderMaterial = new THREE.ShaderMaterial({
            lights: true,
            uniforms: uniforms,
            vertexShader: BlendMapVertexShader,
            fragmentShader: BlendMapFragmentShader
        });
    } catch (e) {
        alert("Error 'CreateGround' : GPU Shader couldn't compile");
    }

    shaderMaterial.uniforms.TextureBlendMap.value = _TextureBlendMap;
    shaderMaterial.uniforms.TextureBackground.value = _TextureSand;
    shaderMaterial.uniforms.TextureR.value = _TextureClay;
    shaderMaterial.uniforms.TextureG.value = _TextureGrass;
    shaderMaterial.uniforms.TextureB.value = _TextureSandRock;

    var geometry = new THREE.BoxGeometry(GROUND_SIZE, GROUND_HEIGHT, GROUND_SIZE);
    var mesh = new THREE.Mesh(geometry, shaderMaterial);

    mesh.castShadow = false;
    mesh.receiveShadow = true;

    return mesh;
}

这是修改后的 PHONG 着色器:

BlendMapVertexShader = [
"#define PHONG",

"varying vec3 vViewPosition;",
"varying vec2 vUv;",

"#ifndef FLAT_SHADED",

"varying vec3 vNormal;",

"#endif",


THREE.ShaderChunk["common"],
THREE.ShaderChunk["uv_pars_vertex"],
THREE.ShaderChunk["uv2_pars_vertex"],
THREE.ShaderChunk["displacementmap_pars_vertex"],
THREE.ShaderChunk["envmap_pars_vertex"],
THREE.ShaderChunk["color_pars_vertex"],
THREE.ShaderChunk["morphtarget_pars_vertex"],
THREE.ShaderChunk["skinning_pars_vertex"],
THREE.ShaderChunk["shadowmap_pars_vertex"],
THREE.ShaderChunk["logdepthbuf_pars_vertex"],
THREE.ShaderChunk["clipping_planes_pars_vertex"],

"void main() {",
    THREE.ShaderChunk["uv_vertex"],
    THREE.ShaderChunk["uv2_vertex"],
    THREE.ShaderChunk["color_vertex"],

    THREE.ShaderChunk["beginnormal_vertex"],
    THREE.ShaderChunk["morphnormal_vertex"],
    THREE.ShaderChunk["skinbase_vertex"],
    THREE.ShaderChunk["skinnormal_vertex"],
    THREE.ShaderChunk["defaultnormal_vertex"],

    "#ifndef FLAT_SHADED // Normal computed with derivatives when FLAT_SHADED",

        "vNormal = normalize( transformedNormal );",

    "#endif",
    THREE.ShaderChunk["begin_vertex"],
    THREE.ShaderChunk["displacementmap_vertex"],
    THREE.ShaderChunk["morphtarget_vertex"],
    THREE.ShaderChunk["skinning_vertex"],
    THREE.ShaderChunk["project_vertex"],
    THREE.ShaderChunk["logdepthbuf_vertex"],
    THREE.ShaderChunk["clipping_planes_vertex"],

    "vUv = uv;",
    "vViewPosition = - mvPosition.xyz;",

    THREE.ShaderChunk["worldpos_vertex"],
    THREE.ShaderChunk["envmap_vertex"],
    THREE.ShaderChunk["shadowmap_vertex"],

"}",
].join("\n");

BlendMapFragmentShader = [
"#define PHONG",

"varying vec2 vUv;",

"uniform vec3 diffuse;",
"uniform vec3 emissive;",
"uniform vec3 specular;",
"uniform float shininess;",
"uniform float opacity;",

"uniform sampler2D TextureBlendMap;",
"uniform sampler2D TextureBackground;",
"uniform sampler2D TextureR;",
"uniform sampler2D TextureG;",
"uniform sampler2D TextureB;",

THREE.ShaderChunk["common"],
THREE.ShaderChunk["packing"],
THREE.ShaderChunk["color_pars_fragment"],
THREE.ShaderChunk["uv_pars_fragment"],
THREE.ShaderChunk["uv2_pars_fragment"],
THREE.ShaderChunk["map_pars_fragment"],
THREE.ShaderChunk["alphamap_pars_fragment"],
THREE.ShaderChunk["aomap_pars_fragment"],
THREE.ShaderChunk["lightmap_pars_fragment"],
THREE.ShaderChunk["emissivemap_pars_fragment"],
THREE.ShaderChunk["envmap_pars_fragment"],
THREE.ShaderChunk["fog_pars_fragment"],
THREE.ShaderChunk["bsdfs"],
THREE.ShaderChunk["lights_pars"],
THREE.ShaderChunk["lights_phong_pars_fragment"],
THREE.ShaderChunk["shadowmap_pars_fragment"],
THREE.ShaderChunk["bumpmap_pars_fragment"],
THREE.ShaderChunk["normalmap_pars_fragment"],
THREE.ShaderChunk["specularmap_pars_fragment"],
THREE.ShaderChunk["logdepthbuf_pars_fragment"],
THREE.ShaderChunk["clipping_planes_pars_fragment"],

"void main() {",

    THREE.ShaderChunk["clipping_planes_fragment"],
    "// THIS IS CUSTOM CODE TO OVERRIDE THE DIFFUSE COLOR WITH BLENDMAP TEXTURES",
    "vec4 cBlend = texture2D(TextureBlendMap, vUv);",
    "float bText = 1.0 - (cBlend.r + cBlend.g + cBlend.b);",
    "vec2 tiledCoords = vUv * 40.0;",
    "vec4 cBack = texture2D(TextureBackground, tiledCoords) * bText;",
    "vec4 cR = texture2D(TextureR, tiledCoords) * cBlend.r;",
    "vec4 cG = texture2D(TextureG, tiledCoords) * cBlend.g;",
    "vec4 cB = texture2D(TextureB, tiledCoords) * cBlend.b;",
    "vec4 cTot = cBack + cR + cG + cB;",

    "vec4 diffuseColor = vec4( diffuse, opacity );",
    "diffuseColor.r = cTot.r;",
    "diffuseColor.g = cTot.g;",
    "diffuseColor.b = cTot.b;",
    "ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );",
    "vec3 totalEmissiveRadiance = emissive;",

    THREE.ShaderChunk["logdepthbuf_fragment"],
    THREE.ShaderChunk["map_fragment"],
    THREE.ShaderChunk["color_fragment"],
    THREE.ShaderChunk["alphamap_fragment"],
    THREE.ShaderChunk["alphatest_fragment"],
    THREE.ShaderChunk["specularmap_fragment"],
    THREE.ShaderChunk["normal_flip"],
    THREE.ShaderChunk["normal_fragment"],
    THREE.ShaderChunk["emissivemap_fragment"],

    "// accumulation",
    THREE.ShaderChunk["lights_phong_fragment"],
    THREE.ShaderChunk["lights_template"],

    "// modulation",
    THREE.ShaderChunk["aomap_fragment"],

    "vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;",

    THREE.ShaderChunk["envmap_fragment"],

    "gl_FragColor = vec4( outgoingLight, diffuseColor.a );",

    THREE.ShaderChunk["premultiplied_alpha_fragment"],
    THREE.ShaderChunk["tonemapping_fragment"],
    THREE.ShaderChunk["encodings_fragment"],
    THREE.ShaderChunk["fog_fragment"],
"}",
 ].join("\n");

加上shaderMaterial.lights = true;,我遇到了和你一样的问题。这是我自己写的完整打字稿class:threejs git issue

这是完整代码:

import * as THREE from 'three';

export class TerrainMaterial extends THREE.ShaderMaterial {

    public constructor() {

        super({
            uniforms: THREE.UniformsUtils.merge([
                THREE.UniformsLib.fog,
                THREE.UniformsLib.lights,
                {
                    diffuse: { value: new THREE.Color(0xeeeeee) },
                    opacity: { value: 1.0 },
                    emissive: { value: new THREE.Color(0x000000) },
                    specular: { value: new THREE.Color(0x111111) },
                    shininess: { value: 0 },

                    offsetRepeat: { value: new THREE.Vector4(0, 0, 1, 1) },

                    map1: { value: null },
                    map2: { value: null },
                    map3: { value: null },
                    map1Normal: { value: null },
                    map2Normal: { value: null },
                    map3Normal: { value: null },
                    map1HeightRange: { value: 0 },
                    map2HeightRange: { value: 0 },
                    map3HeightRange: { value: 0 }
                }
            ]),
            vertexShader: [
                "varying vec3 vNormal;",
                "varying vec3 vViewPosition;",
                "varying vec3 fPosition;",

                "varying vec2 vUv;",
                "uniform vec4 offsetRepeat;",

                THREE.ShaderChunk.shadowmap_pars_vertex,
                //THREE.ShaderChunk.logdepthbuf_pars_vertex,
                THREE.ShaderChunk.fog_pars_vertex,

                "void main(){",
                    THREE.ShaderChunk.beginnormal_vertex,
                    THREE.ShaderChunk.defaultnormal_vertex,
                    "vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",
                    "vNormal = normalize( transformedNormal );",
                    THREE.ShaderChunk.begin_vertex,
                    THREE.ShaderChunk.project_vertex,
                    //THREE.ShaderChunk.logdepthbuf_vertex,
                    "fPosition = position;",
                    "vViewPosition = - mvPosition.xyz;",
                    THREE.ShaderChunk.worldpos_vertex,
                    THREE.ShaderChunk.shadowmap_vertex,
                    THREE.ShaderChunk.fog_vertex,
                "}"
            ].join("\n"),
            fragmentShader: [
                "uniform vec3 diffuse;",
                "uniform vec3 emissive;",
                "uniform vec3 specular;",
                "uniform float shininess;",
                "uniform float opacity;",

                "uniform sampler2D map1;",
                "uniform sampler2D map2;",
                "uniform sampler2D map3;",
                "uniform sampler2D map1Normal;",
                "uniform sampler2D map2Normal;",
                "uniform sampler2D map3Normal;",
                "uniform float map1HeightRange;",
                "uniform float map2HeightRange;",
                "uniform float map3HeightRange;",

                "varying vec2 vUv;",
                "varying vec3 fPosition;",

                THREE.ShaderChunk.common,
                THREE.ShaderChunk.packing,
                THREE.ShaderChunk.dithering_pars_fragment,
                THREE.ShaderChunk.emissivemap_pars_fragment,
                THREE.ShaderChunk.fog_pars_fragment,
                THREE.ShaderChunk.bsdfs,
                THREE.ShaderChunk.lights_pars,
                THREE.ShaderChunk.lights_phong_pars_fragment,
                THREE.ShaderChunk.shadowmap_pars_fragment,
                THREE.ShaderChunk.specularmap_pars_fragment,
                //THREE.ShaderChunk.logdepthbuf_pars_fragment,
                "vec3 perturbNormal2Arb( vec3 normalColor, vec3 eye_pos, vec3 surf_norm ) {",
                    "vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );",
                    "vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );",
                    "vec2 st0 = dFdx( vUv.st );",
                    "vec2 st1 = dFdy( vUv.st );",
                    "vec3 S = normalize( q0 * st1.t - q1 * st0.t );",
                    "vec3 T = normalize( -q0 * st1.s + q1 * st0.s );",
                    "vec3 N = normalize( surf_norm );",
                    "vec3 mapN = normalColor * 2.0 - 1.0;",
                    //"mapN.xy = normalScale * mapN.xy;",
                    "mat3 tsn = mat3( S, T, N );",
                    "return normalize( tsn * mapN );",
                "}",
                "void main(){",
                    "vec4 diffuseColor = vec4( diffuse, opacity );",
                    "ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );",
                    "vec3 totalEmissiveRadiance = emissive;",
                    //THREE.ShaderChunk.logdepthbuf_fragment,

                    "vec3 texel;",
                    "vec3 texelNormal;",
                    "float amount;",

                    //need to optimize here, let's say remove if else if else?
                    "if(fPosition.y < map1HeightRange){",
                        "texel = texture2D(map1, vUv).rgb;",
                        "texelNormal = texture2D(map1Normal, vUv).rgb;",
                    "}",
                    "else if(fPosition.y < map2HeightRange){",
                        "amount = (fPosition.y - map1HeightRange) / map1HeightRange;",
                        "texel = mix(texture2D(map1, vUv), texture2D(map2, vUv), amount).rgb;",
                        "texelNormal = mix(texture2D(map1Normal, vUv), texture2D(map2Normal, vUv), amount).rgb;",
                    "}",
                    "else if(fPosition.y < map3HeightRange){",
                        "float hStep = map3HeightRange - map2HeightRange;",
                        "amount = (fPosition.y - hStep) / hStep;",
                        "texel = mix(texture2D(map2, vUv), texture2D(map3, vUv), amount).rgb;",
                        "texelNormal = mix(texture2D(map2Normal, vUv), texture2D(map3Normal, vUv), amount).rgb;",
                    "} else {",
                        "texel = texture2D(map3, vUv).rgb;",
                        "texelNormal = texture2D(map3Normal, vUv).rgb;",
                    "}",

                    "vec4 texelColor = vec4( texel, 1.0 );",
                    "texelColor = mapTexelToLinear( texelColor );",

                    "diffuseColor *= texelColor;",

                    THREE.ShaderChunk.specularmap_fragment,
                    "vec3 normal = normalize( vNormal );",
                    "normal = perturbNormal2Arb( texelNormal.rgb, -vViewPosition, normal );",

                    THREE.ShaderChunk.emissivemap_fragment,
                    THREE.ShaderChunk.lights_phong_fragment,
                    THREE.ShaderChunk.lights_template,
                    "vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;",
                    "gl_FragColor = vec4( outgoingLight, diffuseColor.a );",
                    THREE.ShaderChunk.tonemapping_fragment,
                    THREE.ShaderChunk.encodings_fragment,
                    THREE.ShaderChunk.fog_fragment,
                    THREE.ShaderChunk.premultiplied_alpha_fragment,
                    THREE.ShaderChunk.dithering_fragment,
                "}"
            ].join("\n")
        });

        this.defaultAttributeValues = null;

        this.fog = true;
        this.lights = true;

        this.extensions.derivatives = true;
        this.extensions.shaderTextureLOD = true;
    }

    public setOffsetRepeat(ofX: number, ofY: number, rpX: number, rpY: number):void {
        this.uniforms["offsetRepeat"].value.set(ofX, ofY, rpX, rpY);
        this.setRepeat(this.uniforms["map1"].value, this.uniforms["map1Normal"].value);
        this.setRepeat(this.uniforms["map2"].value, this.uniforms["map2Normal"].value);
        this.setRepeat(this.uniforms["map3"].value, this.uniforms["map3Normal"].value);
        this.needsUpdate = true;
    }

    private setRepeat(map: THREE.Texture, normal: THREE.Texture): void {
        let v4: THREE.Vector4 = this.uniforms["offsetRepeat"].value;
        if (v4.y != 1 || v4.z != 1) {
            if (map) map.wrapS = map.wrapT = THREE.RepeatWrapping;
            if (normal) normal.wrapS = normal.wrapT = THREE.RepeatWrapping;
        }
    }

    public setMap1(map: THREE.Texture, normal: THREE.Texture, heightRange: number) {
        this.setRepeat(map, normal);
        this.uniforms["map1"].value = map;
        this.uniforms["map1Normal"].value = normal;
        this.uniforms["map1HeightRange"].value = heightRange;
        this.needsUpdate = true;
    }

    public setMap2(map: THREE.Texture, normal: THREE.Texture, heightRange: number) {
        this.setRepeat(map, normal);
        this.uniforms["map2"].value = map;
        this.uniforms["map2Normal"].value = normal;
        this.uniforms["map2HeightRange"].value = heightRange;
        this.needsUpdate = true;
    }

    public setMap3(map: THREE.Texture, normal: THREE.Texture, heightRange: number) {
        this.setRepeat(map, normal);
        this.uniforms["map3"].value = map;
        this.uniforms["map3Normal"].value = normal;
        this.uniforms["map3HeightRange"].value = heightRange;
        this.needsUpdate = true;
    }
}

和用法:

let loader = new THREE.TextureLoader();
let terrainMat = new TerrainMaterial();
terrainMat.dithering = Config.DITHERING;
terrainMat.setOffsetRepeat(0, 0, 80, 80);
let map1 = loader.load("images/maps/ground/shatter.jpg");
let map1Normal = loader.load("images/maps/ground/shatter_normal.png");
map1.anisotropy = map1Normal.anisotropy = anisotropy;
let map2 = loader.load("images/maps/ground/earth.jpg");
let map2Normal = loader.load("images/maps/ground/earth_normal.png");
map2.anisotropy = map2Normal.anisotropy = anisotropy;
let map3 = loader.load("images/maps/ground/moss.jpg");
let map3Normal = loader.load("images/maps/ground/moss_normal.png");
map3.anisotropy = map3Normal.anisotropy = anisotropy;
let hStep = GroundGeometry.MAX_HEIGHT / 4;
terrainMat.setMap1(map1, map1Normal, hStep);
terrainMat.setMap2(map2, map2Normal, hStep * 2);
terrainMat.setMap3(map3, map3Normal, hStep * 4);

//note: replace new THREE.PlaneGeometry with your terrain geometry so the mateiral can detect height change. otherise the plane will be filled full with the same 1 map.
let p = new THREE.Mesh(new THREE.PlaneGeometry(900, 900, 257, 257), terrainMat);
p.geometry.rotateX(-NumberConsts.PI_2);
scene.add(p);

结果: click to see image (i don't have the privilege to embed images yet)