Laya commercial grade 3d actual combat _020 vertex color shader_ sky background

Video presentation, click to watch

Goal: achieve model vertex color

Developers must have basic knowledge of shaders when studying this chapter

We can notice that the distant sky model (not the skybox) is different
from u3d , because the fog effect will be turned on in the default LayaBlinnPhong shader of LAYA

And the color of the model is vertex color, no texture sampling

You can see that the sky material uses a custom shader

		struct appdata
		{
			float4 vertex : POSITION;
			float4 color : COLOR;
		};

		struct v2f
		{
			float4 color : TEXCOORD0;
			float4 vertex : SV_POSITION;
		};

		v2f vert (appdata v)
		{
			v2f o;
			o.vertex = UnityObjectToClipPos(v.vertex);
			o.color = v.color;
			return o;
		}
		
		fixed4 frag (v2f i) : SV_Target
		{
			fixed4 col = i.color;
			return col;
		}

In the custom shader of u3d, it can be seen that only vertex colors are used

So realize the vertex color shader

New Script\Shader\VertexColor.ts

export class VertexColor extends Laya.Material {

constructor() {
    super();
    //设置本材质使用的shader名字
    this.setShaderName("VertexColor");
    this._shaderValues.addDefine(VertexColor.SHADERDEFINE_ENABLEVERTEXCOLOR);

}
//static ALBEDOCOLOR: number;
static SHADERDEFINE_ENABLEVERTEXCOLOR: Laya.ShaderDefine;

//初始化我们的自定义shader
static initShader() {

    VertexColor.SHADERDEFINE_ENABLEVERTEXCOLOR = Laya.Shader3D.getDefineByName("ENABLEVERTEXCOLOR");

    //所有的attributeMap属性
    var attributeMap = {
        'a_Position': Laya.VertexMesh.MESH_POSITION0,
        'a_Color': Laya.VertexMesh.MESH_COLOR0

    };

    //所有的uniform属性
    var uniformMap =
    {
        'u_MvpMatrix': Laya.Shader3D.PERIOD_SPRITE

    };

    let VS = `
        attribute vec4 a_Position;
        uniform mat4 u_MvpMatrix;
        
        #if defined(COLOR)&&defined(ENABLEVERTEXCOLOR)
            attribute vec4 a_Color;
            varying vec4 v_Color;
        #endif

        void main()
        {
            #if defined(COLOR)&&defined(ENABLEVERTEXCOLOR)
            v_Color = a_Color;
            #endif
            gl_Position = u_MvpMatrix * a_Position;

            

        } `;

    let FS = `
    //不能少写这行
    #ifdef FSHIGHPRECISION
            precision highp float;
        #else
            precision mediump float;
        #endif
    
    #if defined(COLOR)&&defined(ENABLEVERTEXCOLOR)
    varying vec4 v_Color;
    #endif
   
    void main()
    {
      

       
       #if defined(COLOR)&&defined(ENABLEVERTEXCOLOR)
          gl_FragColor=v_Color;
          #else
          gl_FragColor=vec4(1.0);
        #endif
      
      
      
       
      
    }
    `;

    //注册
    var LightSh = Laya.Shader3D.add("VertexColor");

    //创建一个SubShader
    var subShader = new Laya.SubShader(attributeMap, uniformMap);

    //我们的自定义shader customShader中添加我们新创建的subShader
    LightSh.addSubShader(subShader);

    //往新创建的subShader中添加shaderPass
    subShader.addShaderPass(VS, FS);

}

}

Game.ts
Onawake method added

//shader 章节
let sky = GameObject.Find(this.scene, ‘PlayerPivot/Sky’) as Laya.MeshSprite3D;
VertexColor.initShader();
sky.meshRenderer.material = new VertexColor();

F8 f5
before and after comparison