定制着色器和渲染后期处理

1.设置后期处理

    设置Three.js库为后期处理做准备,我们需要通过以下步骤对当前的配置进行修改:

    1)创建一个EffectComposer(效果组合器)对象,然后在该对象上添加后期处理通道。

    2)配置该对象,使它可以渲染我们的场景,并应用额外的后期处理步骤。

    3)在render循环中,使用EffectComposer渲染场景、应用通道,并输出结果。

   要使用后期处理,需要引入一些javaSscript文件。这些文件可以在Three.js发布包里找到。路径是examples/js/postprocessing和example/js/shaders。至少包含下面的文件:

<script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script>
    <script type="text/javascript" src="../libs/shaders/CopyShader.js"></script>

    <script type="text/javascript" src="../libs/postprocessing/EffectComposer.js"></script>

    <script type="text/javascript" src="../libs/postprocessing/MaskPass.js"></script>
    <script type="text/javascript" src="../libs/postprocessing/FilmPass.js"></script>
    <script type="text/javascript" src="../libs/shaders/FilmShader.js"></script>
    <script type="text/javascript" src="../libs/postprocessing/RenderPass.js"></script>

    首先我们创建一个EffectComposer对象,你可以在这个对象的构造函数里出入WebGL-Renderer,如下所示:

var composer = new THREE.EffectComposer(webGLRenderer);

    接下来我们要在这个组合器中添加各种通道。第一个要加入的通道是RenderPass。这个通道会渲染场景,但不会讲渲染结果输出到屏幕上。

var renderPass = new THREE.RenderPass(scene, camera);
...
var composer = new THREE.EffectComposer(webGLRenderer);
 composer.addPass(renderPass);

    接下来我们要添加一个可以将结果输出到屏幕上的通道。这里使用FilmPass,我们想创建该对象,然后添加到效果组合器中。代码如下:

var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
effectFilm.renderToScreen = true;
var composer = new THREE.EffectComposer(webGLRenderer);
composer.addPass(effectFilm);

    正如你所看到的,我们创建了一个FilmPass对象,并将它的renderToScreen属性设置为true。最后,还需要修渲染循环:

function render(){
                stats.update();

                var delta = clock.getDelta();
                orbitControl.update(delta);

                sphere.rotation.y += 0.002;

                requestAnimationFrame(render);
                composer.render(delta);
            }

    这个代码里我们移出了“webGLRenderer.render(scene, camera);”,用“composer.render(delta)”代替。这将调用EffectComposer的render()函数。由于我们已经将FilmPass的renderToScreen属性设置为true,所以FilmPass的结果将会输出到屏幕上。

2.后期处理通道

    Three.js库提供了几个后期处理通道,你可以直接将其添加到EffectComposer对象。下表是这些通道的概览。

    通道/描述

    BloomPass/该通道会使得明亮区域渗入较暗的区域。模拟相机找到过多亮点的情形

    DotScreenPass/将一层黑点贴到代表原始图片的屏幕上

    FilmPass/通过扫描线和失真模拟电视屏幕

    MaskPass/在当前图片上贴一层掩膜,后续通道只会影响被贴的区域

    RenderPass/该通道在指定的场景和相机的基础上渲染出一个新场景

    ShaderPass/使用该通道你可以传入一个自定义的着色器,用来生成高级的、自定义的后期处理通道

    TexturePass/该通道可以将效果组合器的当前状态保存为一个纹理,然后可以在其他EffectComposer对象中将该纹理作为输入参数

    下面的例子使用了以上通道的中的BloomPass、DotScreenPass、FilmPass、RenderPass、ShaderPass、TexturePass。首先看下运行效果:

image

    上图标左上角运用BloomPass、右上角运用FilmPass、左下角运用DotScreenPass、右下角运用原始渲染结果。渲染处理代码如下:

var renderPass = new THREE.RenderPass(scene, camera); //保存渲染结果,但不会输出到屏幕
        var effectCopy = new THREE.ShaderPass(THREE.CopyShader); //传入了CopyShader着色器,用于拷贝渲染结果
        effectCopy.renderToScreen = true;  //设置输出到屏幕上

        var bloomPass = new THREE.BloomPass(3, 25, 5.0, 256); //BloomPass通道效果
        var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false); //FilmPass通道效果
        effectFilm.renderToScreen = true; //设置输出到屏幕上

        var dotScreenPass = new THREE.DotScreenPass(); // DotScrrenPass通道效果

        //渲染目标
        var composer = new THREE.EffectComposer(webGLRenderer);
        composer.addPass(renderPass);
        composer.addPass(effectCopy);

        var renderScene = new THREE.TexturePass(composer.renderTarget2);
        //左下角
        var composer1 = new THREE.EffectComposer(webGLRenderer);
        composer1.addPass(renderScene);
        composer1.addPass(dotScreenPass);
        composer1.addPass(effectCopy);
        //右下角
        var composer2  = new THREE.EffectComposer(webGLRenderer);
        composer2.addPass(renderScene);
        composer2.addPass(effectCopy);

        //左上角
        var composer3 = new THREE.EffectComposer(webGLRenderer);
        composer3.addPass(renderScene);
        composer3.addPass(bloomPass);
        composer3.addPass(effectCopy);

        //右上角
        var composer4 = new THREE.EffectComposer(webGLRenderer);
        composer4.addPass(renderScene);
        composer4.addPass(effectFilm);      
 
 

    代码原理比较简单,composer的作用是渲染最原始的效果,传入了renderPass和ShaderPass,renderPass运来创建一个新场景,ShaderPass用来输出结果到屏幕。接下来创建了一个类型为TexturePass的通道对象renderScene。可以将当前状态保存一份作为纹理。供后面的几个compoer使用。

    composer1首先使用renderScene创建新场景,然后添加dotScreenPass通道,最后使用effectCopy输出渲染。composer2、composer3、composer4相似。设置了处理通道后,在每次循环渲染时还得分别调用每个composer的render函数重新渲染:

function render() {
            stats.update();

            //sphere.rotation.y=step+=0.01;
            var delta = clock.getDelta();
            orbitControls.update(delta);

            sphere.rotation.y += 0.002;

            // render using requestAnimationFrame
            requestAnimationFrame(render);


            webGLRenderer.autoClear = false;
            webGLRenderer.clear();

            webGLRenderer.setViewport(0, 0, 2 * halfWidth, 2 * halfHeight);
            composer.render(delta);

            webGLRenderer.setViewport(0, 0, halfWidth, halfHeight);
            composer1.render(delta);

            webGLRenderer.setViewport(halfWidth, 0, halfWidth, halfHeight);
            composer2.render(delta);

            webGLRenderer.setViewport(0, halfHeight, halfWidth, halfHeight);
            composer3.render(delta);

            webGLRenderer.setViewport(halfWidth, halfHeight, halfWidth, halfHeight);
            composer4.render(delta);
        }

3.各种通道属性

    FilmPass用来创建类似电视的效果。通道属性的属性可通过构造函数传入,也可以直接修改uiniforms上对应的属性。属性说明如下:

    属性/描述

    noiseIntensity/通过该属性可以控制屏幕的颗粒程度

    scanlineIntensity/FilmPass会在屏幕上添加一些扫描线。通过该属性,可以指定扫描线的显著程度

    scanlineCount/该属性可以控制显示出来的扫描线数量

    grayscale/如果设置为true,输出结果将会转换为灰度图

    BoomPass用来在场景中添加泛光效果。属性可通过构造函数传入,也可直接修改uniforms属性。属性说明如下:
    属性/描述

    Strength/该属性定义的是泛光效果强度。值越高,明亮区域越明亮。而且渗入较暗区域的也就越多

    kernelSize/该属性控制的是泛光效果的偏移量

    sigma/可以控制泛光的锐利程度。值越高,泛光越模糊

    resolution/泛光效果的解析图。值太低,那么结果的方块会比较严重

    DotSreenPass用来将场景输出成点集。属性如下:

    center/通过center属性,可以微调点的偏移量

    angle/通过angle,可以更改对齐方式

    scale/该属性设置所有点的大小。scale越小,则点越大

4.使用掩膜的高级效果组合器

    Three.js库具有在特定区域应用通道的能力。我们采取如下步骤实现一个特定区域效果。例如下图的地图和火星。我们想在火星上应用一个彩色效果、在地球上应用褐色效果。我们采取如下步骤:

    1)创建一个座位背景图的场景。

    2)创建一个场景,里边有一个看上去像地球的球体。

    3)创建一个场景,里边有一个看上去像火星的球体。

    4)创建一个EffectComposer对象,将这三个场景渲染到一个图片里。

    5)在渲染成火星的球体上应用一个彩色效果。

    6)在渲染成地球的球体上应用褐色效果。

    下面是初始化的代码:

var sceneEarth = new THREE.Scene();
        var sceneMars = new THREE.Scene();
        var sceneBG = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        var cameraBG = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);
        cameraBG.position.z = 50;

        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var sphere = createEarthMesh(new THREE.SphereGeometry(10, 40, 40));
        sphere.position.x = -10;
        var sphere2 = createMarshMesh(new THREE.SphereGeometry(5, 40, 40));
        sphere2.position.x = 10;
        sceneEarth.add(sphere);
        sceneMars.add(sphere2);

        camera.position.set(-10, 15, 25);

        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var orbitControls = new THREE.OrbitControls(camera);
        orbitControls.autoRotate = false;
        var clock = new THREE.Clock();

        var ambi = new THREE.AmbientLight(0x181818);
        var ambi2 = new THREE.AmbientLight(0x181818);
        sceneEarth.add(ambi);
        sceneMars.add(ambi2);

        var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(550, 100, 550);
        spotLight.intensity = 0.6;

        var spotLight2 = new THREE.DirectionalLight(0xffffff);
        spotLight2.position.set(550, 100, 550);
        spotLight2.intensity = 0.6;

        sceneEarth.add(spotLight);
        sceneMars.add(spotLight2);

        var materialColor = new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture("../assets/textures/starry-deep-outer-space-galaxy.jpg"),
            depthWrite: false
        });

        var bgPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), materialColor);
        bgPlane.position.z = -100;
        bgPlane.scale.set(window.innerWidth * 2, window.innerHeight * 2, 1);
        sceneBG.add(bgPlane);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        var bgPass = new THREE.RenderPass(sceneBG, cameraBG);
        var renderPass = new THREE.RenderPass(sceneEarth, camera);
        renderPass.clear = false;
        var renderPass2 = new THREE.RenderPass(sceneMars, camera);
        renderPass2.clear = false;

        var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
        effectCopy.renderToScreen = true;

        var clearMash = new THREE.ClearMaskPass();
        var earthMask = new THREE.MaskPass(sceneEarth, camera);
        var marsMask = new THREE.MaskPass(sceneMars, camera);
        var effectSepia = new THREE.ShaderPass(THREE.SepiaShader);
        effectSepia.uniforms["amount"].value = 0.8;

        var effectColorify = new THREE.ShaderPass(THREE.ColorifyShader);
        effectColorify.uniforms["color"].value.setRGB(0.5, 0.5, 1);

        var composer = new THREE.EffectComposer(webGLRenderer);
        composer.renderTarget1.stencilBuffer = true;
        composer.renderTarget2.stencilBuffer = true;

        composer.addPass(bgPass); // 添加背景渲染新场景通道
        composer.addPass(renderPass); // 添加地球渲染的新场景通道
        composer.addPass(renderPass2); // 添加月球渲染的新场景通道
        composer.addPass(marsMask); // 添加月球掩膜通道,以后所有的通道效果都只对月球有效,直到clearMask通道
        composer.addPass(effectColorify); // 添加颜色着色器通道
        composer.addPass(clearMash); //清理掩膜通道
        composer.addPass(earthMask); //添加地图掩膜通道,之后的所有通道效果都只对月球有效,直到clearMash通道
        composer.addPass(effectSepia); // 添加一种自定义着色器通道
        composer.addPass(clearMash); // 清理掩膜通道
        composer.addPass(effectCopy);

    下面是渲染代码:

function render() {
            webGLRenderer.autoClear = false;

            stats.update();

            var delta = clock.getDelta();
            orbitControls.update(delta);

            sphere.rotation.y += 0.002;
            sphere2.rotation.y += 0.002;

            requestAnimationFrame(render);
            composer.render(delta);
        }

5.用ShaderPass定制效果

    通过ShaderPass,我们可以传递一个自定义的着色器,将大量额外的效果应用到场景中。Three.js扩展的着色器主要分为简单着色器、模糊着色器、高级效果着色器。

    简单着色器列表:

    MirrorShader/该着色器可以为部分屏幕创建镜面效果

    HueStaturationShader/该着色器可以改变颜色的色调和饱和度

    VignetteShader/该着色器可以添加晕映效果。该效果可以在图片中央的周围显示黑色的边框

    ColorCorrectionShader/通过这个着色器,你可以调整颜色的分布

    RGBShiftSader/该着色器可以将构成颜色的红、绿、蓝分开

    BrightnessContrasShader/该着色器可以更改图片的亮度和对比度

    ColorifyShader/可以在屏幕上蒙上一层颜色

    SepiaShader/可以在屏幕上创建出类似乌贼墨的效果

    模糊效果着色器:

    HorizontalBlurShader和VerticalBlurShader/这两个着色器在场景中应用模糊效果

    HorizontalTiltShiftShader和VerticalTiltShiftShader/这两个着色器可以创建出移轴效果。在移轴效果中只有部分图片显示得比较锐利,从而创建出一个看上去像是微缩景观的场景

    TriangleBlurShader/该着色器使用基于三角形的方法,咱场景中应用模糊效果

    高级效果的着色器:

    BleachBypassShader/该着色器可以创建一种漂白效果。在该效果下,图片上像素是镀了一层银

   EdgeShader/该着色器可以探测图片中的锐利边界,并突出显示这些边界

    FXAAShader/该着色器可以在后期处理阶段应用锯齿效果。如果在渲染抗锯齿影响效率,那么久可以使用该着色器

    FocusShader/这是一个简单的着色器,其结果是中央区域渲染得比较锐利,但周围比较模糊

6.定制自定义着色器

    为Three.js库创建自定义的着色器,需要实现两个组件:vertexShader和fragmentShader。组件vertexShader可以用来调整每个顶点的位置,组件fragmentShader可以从来决定每个像素的颜色。对于后期处理着色器来说,我们只要实现fragmentShader即可,然后使用Three.js提供的额、默认的vertexShader。

    我们以定制一个灰度着色器为例。首先要创建一个js文件,存放着色器源代码,这里我们命名一个custom-shader.js文件。内容如下:

THREE.CustomGrayScaleShader = {
    uniforms: {
        "tDiffuse": {type: "t", value: null},
        "rPower": {type: "f", value: 0.2126},
        "gPower": {type: "f", value: 0.7152},
        "bPower": {type: "f", value: 0.0722}
    },
    vertexShader: [
        "varying vec2 vUv;",
        "void main(){",
        "vUv = uv;",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
        "}"
    ].join("\n"),
    fragmentShader: [
        "uniform float rPower;",
        "uniform float gPower;",
        "uniform float bPower;",
        "uniform sampler2D tDiffuse;",
        "varying vec2 vUv;",
        "void main(){",
        "vec4 texel = texture2D(tDiffuse, vUv);",
        "float gray = texel.r * rPower + texel.g * gPower + texel.b * bPower;",
        "gl_FragColor = vec4(vec3(gray), texel.a);",
        "}"
    ].join("\n")
}

    我们为Threee.js创建了一个叫做CustomGrayScaleShader的自定义着色器该对象包含uniforms、vertexShader和fragmentShader三个属性。uniforms定义了通过javascript外部传入的变量,vertexShader定义了顶点着色器,fragmentShader定义了片元着色器代码。

    这里需要注意的是顶点着色器中的uv变量,是着色器代码的内部变量,表示纹理上的texel(纹理上的像素),铜鼓varying vec2 vUv变量传递给片元着色器。着色器代码定义好后,我们就可以通过以下形式在javascript代码中使用了:

var renderPass = new THREE.RenderPass(scene, camera);
        var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
        effectCopy.renderToScreen = true;
        var shaderPass = new THREE.ShaderPass(THREE.CustomGrayScaleShader);
        shaderPass.enabled = false;

        var bitPass = new THREE.ShaderPass(THREE.CustomBitShader);
        bitPass.enabled = false;

        var composer = new THREE.EffectComposer(webGLRenderer);
        composer.addPass(renderPass);
        composer.addPass(shaderPass);
        composer.addPass(bitPass);
        composer.addPass(effectCopy);

    代码中创建了两个着色器通道,分别适合shaderPass和bitPass。shaderPass正好使用的是我们创建的自定义着色器THREE.CustomGrayScaleShader。

posted @ 2017-05-07 09:21  heavi  阅读(...)  评论(...编辑  收藏