2021SC@SDUSC ClayGL ShadowMap类分析(十三)

本文链接：https://blog.csdn.net/Yes_Utopia/article/details/121033212

本文详细介绍了ClayGL库中的ShadowMap类，包括其成员变量如softShadow和shadowBlur，以及预处理阶段的软阴影技术PCF和VSM。ShadowMap类提供了dispose方法用于释放资源，render方法用于渲染场景到阴影纹理，而renderDebug方法则用于调试阴影纹理的渲染效果。此外，还展示了如何使用和配置这些方法以实现不同类型的阴影效果。

2021SC@SDUSC ClayGL ShadowMap类分析(十三)

new ShadowMap()

传递渲染阴影贴图。
例如：
var shadowMapPass = new clay.prePass.ShadowMap({
softShadow: clay.prePass.ShadowMap.VSM
});
…
animation.on(‘frame’, function (frameTime) {
shadowMapPass.render(renderer, scene, camera);
renderer.render(scene, camera);
});

var ShadowMapPass = Base.extend(function () {
    return /** @lends clay.prePass.ShadowMap# */ {
        /**
         * Soft shadow technique.
         * Can be {@link clay.prePass.ShadowMap.PCF} or {@link clay.prePass.ShadowMap.VSM}
         * @type {number}
         */
        softShadow: ShadowMapPass.PCF,
        /**
         * Soft shadow blur size
         * @type {number}
         */
        shadowBlur: 1.0,
        lightFrustumBias: 'auto',
        kernelPCF: new Float32Array([
            1, 0,
            1, 1,
            -1, 1,
            0, 1,
            -1, 0,
            -1, -1,
            1, -1,
            0, -1
        ]),
        precision: 'highp',
        _lastRenderNotCastShadow: false,
        _frameBuffer: new FrameBuffer(),
        _textures: {},
        _shadowMapNumber: {
            'POINT_LIGHT': 0,
            'DIRECTIONAL_LIGHT': 0,
            'SPOT_LIGHT': 0
        },
        _depthMaterials: {},
        _distanceMaterials: {},
        _receivers: [],
        _lightsCastShadow: [],
        _lightCameras: {},
        _lightMaterials: {},
        _texturePool: new TexturePool()
    };
}, function () {
    // Gaussian filter pass for VSM
    this._gaussianPassH = new Pass({
        fragment: Shader.source('clay.compositor.gaussian_blur')
    });
    this._gaussianPassV = new Pass({
        fragment: Shader.source('clay.compositor.gaussian_blur')
    });
    this._gaussianPassH.setUniform('blurSize', this.shadowBlur);
    this._gaussianPassH.setUniform('blurDir', 0.0);
    this._gaussianPassV.setUniform('blurSize', this.shadowBlur);
    this._gaussianPassV.setUniform('blurDir', 1.0);
    this._outputDepthPass = new Pass({
        fragment: Shader.source('clay.sm.debug_depth')
    });
},

Members

(static) PCF

（预处理阶段）软阴影的百分比渐近过滤
初始值设为2
类型：number

ShadowMapPass.PCF = 2;

(static) VSM

（预处理阶段）方差shadow map
初始值设为1
类型：number

ShadowMapPass.VSM = 1;

shadowBlur :number

柔和阴影模糊大小，初始值为1.0
类型：number

        shadowBlur: 1.0,

softShadow :number

柔和阴影技术，可以链接PCF或VSM，这里采用PCF。
类型：number

        softShadow: ShadowMapPass.PCF,

Methods

dispose(renderer opt)

预处理阴影贴图的实例对象
参数：

名称	类型	属性
renderer	clay.Renderer WebGLRenderingContext	可选

    // PENDING Renderer or WebGLRenderingContext
    dispose: function (renderer) {
        var _gl = renderer.gl || renderer;
        if (this._frameBuffer) {
            this._frameBuffer.dispose(_gl);
        }
        for (var name in this._textures) {
            this._textures[name].dispose(_gl);
        }
        this._texturePool.clear(renderer.gl);
        this._depthMaterials = {};
        this._distanceMaterials = {};
        this._textures = {};
        this._lightCameras = {};
        this._shadowMapNumber = {
            'POINT_LIGHT': 0,
            'DIRECTIONAL_LIGHT': 0,
            'SPOT_LIGHT': 0
        };
        this._meshMaterials = {};
        for (var i = 0; i < this._receivers.length; i++) {
            var mesh = this._receivers[i];
            // Mesh may be disposed
            if (mesh.material) {
                var material = mesh.material;
                material.undefine('fragment', 'POINT_LIGHT_SHADOW_COUNT');
                material.undefine('fragment', 'DIRECTIONAL_LIGHT_SHADOW_COUNT');
                material.undefine('fragment', 'AMBIENT_LIGHT_SHADOW_COUNT');
                material.set('shadowEnabled', 0);
            }
        }
        this._receivers = [];
        this._lightsCastShadow = [];
    }
});

render(renderer, scene, sceneCamera, notUpdateSceneopt)

将场景渲染到阴影纹理
参数：

名称	类型	属性	默认值
renderer	clay.Renderer
scene	clay.Scene
sceneCamera	clay.Camera
notUpdateScene	boolean	可选	false

    render: function (renderer, scene, sceneCamera, notUpdateScene) {
        if (!sceneCamera) {
            sceneCamera = scene.getMainCamera();
        }
        this.trigger('beforerender', this, renderer, scene, sceneCamera);
        this._renderShadowPass(renderer, scene, sceneCamera, notUpdateScene);
        this.trigger('afterrender', this, renderer, scene, sceneCamera);
    },

renderDebug(renderer, size)

调试阴影纹理的渲染
参数：

名称	类型
renderer	clay.Renderer
size	number

    renderDebug: function (renderer, size) {
        renderer.saveClear();
        var viewport = renderer.viewport;
        var x = 0, y = 0;
        var width = size || viewport.width / 4;
        var height = width;
        if (this.softShadow === ShadowMapPass.VSM) {
            this._outputDepthPass.material.define('fragment', 'USE_VSM');
        }
        else {
            this._outputDepthPass.material.undefine('fragment', 'USE_VSM');
        }
        for (var name in this._textures) {
            var texture = this._textures[name];
            renderer.setViewport(x, y, width * texture.width / texture.height, height);
            this._outputDepthPass.setUniform('depthMap', texture);
            this._outputDepthPass.render(renderer);
            x += width * texture.width / texture.height;
        }
        renderer.setViewport(viewport);
        renderer.restoreClear();
    },