Three.js在不改变原有材质的基础之上，增加额外的着色器逻辑_在不改变原有着色器的逻辑的基础之上。增加着色器的逻辑

有时候在做特效的时候，我们想在原有着色器渲染之上来增加特效。不想使用ShaderMaterail材质类，如果使用该类书写着色器逻辑，会改变原有的渲染效果。

原理利用着色器是字符串的本质，将原有的main函数提取，替换掉，重新定义main函数，将替换掉的main函数在新的main函数中执行。
1、替换之前

2、替换之后（看末尾逻辑）

一、主要代码封装

/*
 * @Author: gjw
 * @Date: 2020-07-30 16:09:32
 * @LastEditTime: 2020-07-30 17:05:17
 * @LastEditors: Please set LastEditors
 * @Description: 在不改变原有着色器的逻辑的基础之上。增加着色器的逻辑
 * @FilePath: \KEngine\src\tools\ShaderSourceUtils.ts
 */ 
import {UniformsUtils} from 'three';
class ShaderSourceUtils{
     constructor(){}
     public static replaceMain(shaderSourceString:string, renamedMain:string){
        renamedMain = 'void ' + renamedMain + '()';
        return shaderSourceString.replace(/void\s+main\s*\(\s*(?:void)?\s*\)/g, renamedMain);
     }
     public static mergeUniforms(oldUniforms:any,addNewUniforms:any){
        return UniformsUtils.merge([oldUniforms,addNewUniforms]);
     }
}
export {ShaderSourceUtils}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、代码使用示例（借助onBeforeCompile函数，mesh在渲染前会执行该函数）

        materialBox.onBeforeCompile=function( shaderobject, renderer ){
            shaderobject.uniforms=ShaderSourceUtils.mergeUniforms(shaderobject.uniforms,{
                test:{
                    value:1.0
                }
            })
            shaderobject.fragmentShader=ShaderSourceUtils.replaceMain(shaderobject.fragmentShader,'czm_testMain');
            shaderobject.fragmentShader+='\nvarying float test;\n'+
                                          'void main(){\n'+
                                             ' czm_testMain();\n'+
                                          '}\n';
        }
1
2
3
4
5
6
7
8
9
10
11
12