继承自Laya.BaseMaterial并且自定义Shader的的自定义材质如何设置透明渲染

159*****786

我自定义了一个继承自Laya.BaseMaterial的材质。想要设置为透明渲染，但文档和教程搜索无果，想请教如何做才能实现。

export default class CMat extends Laya.BaseMaterial {   


    public static _mainTex : number;
    public static _mainCol : number;
    inited : boolean = false;

    constructor() {
        super();      
        if(!this.inited)
        {
            CMat._mainTex = Laya.Shader3D.propertyNameToID("u_MainTex");
            CMat._mainCol = Laya.Shader3D.propertyNameToID("u_MainCol");
            CMat.initShader();
            
            this.inited = true;
        }    
        this.setShaderName("CMatShader");
    }

    public SetMainTex(value)
    {
        this._shaderValues.setTexture(CMat._mainTex, value);
    }

    public SetMainCol(value)
    {
        this._shaderValues.setVector3(CMat._mainCol, value);
    }
        /**
     * 设置渲染相关状态。
     */


    private static initShader(): void {
        var attributeMap:Object = {
            'a_Position': Laya.VertexMesh.MESH_POSITION0, 
            'a_Normal': Laya.VertexMesh.MESH_NORMAL0,
            'a_Texcood0': Laya.VertexMesh.MESH_TEXTURECOORDINATE0
        };
        var uniformMap:Object = {
            'u_MvpMatrix': Laya.Shader3D.PERIOD_SPRITE, 
            'u_WorldMat': Laya.Shader3D.PERIOD_SPRITE,
            'u_MainTex': Laya.Shader3D.PERIOD_MATERIAL,
            'u_MainCol': Laya.Shader3D.PERIOD_MATERIAL
        };
        var vs:string = `
        #include "Lighting.glsl"; 
        attribute vec4 a_Position;
        attribute vec3 a_Normal;
        attribute vec2 a_Texcood0;

        uniform mat4 u_MvpMatrix;
        uniform mat4 u_WorldMat;

        varying vec3 v_Normal;
        varying vec2 uv;
        varying vec4 worldPos;

        void main()
        {
            gl_Position = u_MvpMatrix * a_Position;
            mat3 worldMat = mat3(u_WorldMat);
            v_Normal = worldMat * a_Normal;
            worldPos = u_WorldMat * a_Position;
            uv = a_Texcood0;
            gl_Position = remapGLPositionZ(gl_Position); 
        }`;
        var ps:string = `
        #ifdef FSHIGHPRECISION
        precision highp float;
        #else
        precision mediump float;
        #endif

        uniform sampler2D u_MainTex;
        uniform vec3 u_MainCol;

        varying vec3 v_Normal;
        varying vec2 uv;
        varying vec4 worldPos;

        void main()
        {
            vec4 col = texture2D(u_MainTex, uv);
            //gl_FragColor = vec4(worldPos.xyz, 1.0);
            float d = distance(worldPos.xyz, vec3(.0, .0, .0)) * 0.15;
            col.xyz *= d;
            col.xyz *= u_MainCol;
            col.a = 0.5;
            gl_FragColor = col;
        }`;      

        var customShader:Laya.Shader3D = Laya.Shader3D.add("CMatShader");
        var subShader:Laya.SubShader = new Laya.SubShader(attributeMap, uniformMap);
        customShader.addSubShader(subShader);
        subShader.addShaderPass(vs, ps);
    }
}

133*****047

兄弟，问题解决了吗

缨

我也发现这个问题了，在BaseMaterial构造函数里会把renderQueue的值设置成RENDERQUEUE_OPAQUE（不透明），但是我在自定义材质里也修改了

this.renderQueue = BaseMaterial.RENDERQUEUE_TRANSPARENT;
this.alphaTest = false;

仍然没有透明效果，但是参考Laya自己的材质是可以的，可能需要更加深入的研究一下源码
问题原因已找到，在设置pass的时候要添加state

let stateMap = {
			's_Cull': Shader3D.RENDER_STATE_CULL,
			's_Blend': Shader3D.RENDER_STATE_BLEND,
			's_BlendSrc': Shader3D.RENDER_STATE_BLEND_SRC,
			's_BlendDst': Shader3D.RENDER_STATE_BLEND_DST,
			's_DepthTest': Shader3D.RENDER_STATE_DEPTH_TEST,
			's_DepthWrite': Shader3D.RENDER_STATE_DEPTH_WRITE
        };
var pass1: ShaderPass = subShader.addShaderPass(vs1, ps1, stateMap);

然后在构造函数里分别设置这些值（参考BlinnPhongMaterial设置renderModle的函数）

this.renderQueue = BaseMaterial.RENDERQUEUE_TRANSPARENT;
this.alphaTest = false;
this._shaderValues.setBool(OutlineMaterial.DEPTH_WRITE, false);
this._shaderValues.setInt(OutlineMaterial.CULL, RenderState.CULL_BACK);
this._shaderValues.setInt(OutlineMaterial.BLEND, RenderState.BLEND_ENABLE_ALL);
this._shaderValues.setInt(OutlineMaterial.BLEND_SRC, RenderState.BLENDPARAM_SRC_ALPHA);
this._shaderValues.setInt(OutlineMaterial.BLEND_DST, RenderState.BLENDPARAM_ONE_MINUS_SRC_ALPHA);
this._shaderValues.setInt(OutlineMaterial.DEPTH_TEST, RenderState.DEPTHTEST_LESS);

这样就可以透明渲染了