自定义着色器

import { Material, Shader, Color } from "@galacean/engine";
 
//-- Shader 代码
const vertexSource = `
  uniform mat4 renderer_MVPMat;
 
  attribute vec3 POSITION; 
 
  void main() {
    gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);
  }
  `;
 
const fragmentSource = `
  uniform vec4 u_color;
 
  void main() {
    gl_FragColor = u_color;
  }
  `;
 
// 创建自定义 shader（整个 runtime 只需要创建一次）
Shader.create("demo", vertexSource, fragmentSource);
 
// 创建材质
const material = new Material(engine, Shader.find("demo"));

const renderer1ShaderData = renderer1.shaderData;
const renderer2ShaderData = renderer2.shaderData;
const materialShaderData = material.shaderData;
 
materialShaderData.setColor("material_color", new Color(1, 0, 0, 1));
renderer1ShaderData.setFloat("u_progross", 0.5);
renderer2ShaderData.setFloat("u_progross", 0.8);

// shader
 
uniform float u_float;
uniform int u_int;
uniform bool u_bool;
uniform vec2 u_vec2;
uniform vec3 u_vec3;
uniform vec4 u_vec4;
uniform mat4 u_matrix;
uniform int u_intArray[10];
uniform float u_floatArray[10];
uniform sampler2D u_sampler2D;
uniform samplerCube u_samplerCube;
uniform sampler2D u_samplerArray[2];
 
// GLSL 300:
// in float u_float;
// ...

// shaderData 可以分别保存在 scene 、camera 、renderer、 material 中。
const shaderData = material.shaderData;
 
shaderData.setFloat("u_float", 1.5);
shaderData.setInt("u_int", 1);
shaderData.setInt("u_bool", 1);
shaderData.setVector2("u_vec2", new Vector2(1, 1));
shaderData.setVector3("u_vec3", new Vector3(1, 1, 1));
shaderData.setVector4("u_vec4", new Vector4(1, 1, 1, 1));
shaderData.setMatrix("u_matrix", new Matrix());
shaderData.setIntArray("u_intArray", new Int32Array(10));
shaderData.setFloatArray("u_floatArray", new Float32Array(10));
shaderData.setTexture("u_sampler2D", texture2D);
shaderData.setTexture("u_samplerCube", textureCube);
shaderData.setTextureArray("u_samplerArray", [texture2D, textureCube]);

#ifdef DISCARD
	discard;
#endif
 
#ifdef LIGHT_COUNT
	uniform vec4 u_color[ LIGHT_COUNT ];
#endif

// 开启宏开关
shaderData.enableMacro("DISCARD");
// 关闭宏开关
shaderData.disableMacro("DISCARD");
 
// 开启变量宏
shaderData.enableMacro("LIGHT_COUNT", "3");
 
// 切换变量宏。这里底层会自动 disable 上一个宏，即 “LIGHT_COUNT 3”
shaderData.enableMacro("LIGHT_COUNT", "2");
 
// 关闭变量宏
shaderData.disableMacro("LIGHT_COUNT");

import { Material, Shader, Color, Texture2D, BlendFactor, RenderQueueType } from "@galacean/engine";
 
//-- Shader 代码
const vertexSource = `
  uniform mat4 renderer_MVPMat;
 
  attribute vec3 POSITION; 
  attribute vec2 TEXCOORD_0;
  varying vec2 v_uv;
 
  void main() {
    gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);
    v_uv = TEXCOORD_0;
  }
  `;
 
const fragmentSource = `
  uniform vec4 u_color;
  varying vec2 v_uv;
 
  #ifdef TEXTURE
    uniform sampler2D u_texture;
  #endif
 
  void main() {
    vec4 color = u_color;
 
    #ifdef TEXTURE
      color *= texture2D(u_texture, v_uv);
    #endif
 
    gl_FragColor = color;
 
  }
  `;
 
Shader.create("demo", vertexSource, fragmentSource);
 
export class CustomMaterial extends Material {
  set texture(value: Texture2D) {
    if (value) {
      this.shaderData.enableMacro("TEXTURE");
      this.shaderData.setTexture("u_texture", value);
    } else {
      this.shaderData.disableMacro("TEXTURE");
    }
  }
 
  set color(val: Color) {
    this.shaderData.setColor("u_color", val);
  }
 
  // make it transparent
  set transparent() {
    const target = this.renderState.blendState.targetBlendState;
    const depthState = this.renderState.depthState;
 
    target.enabled = true;
    target.sourceColorBlendFactor = target.sourceAlphaBlendFactor = BlendFactor.SourceAlpha;
    target.destinationColorBlendFactor = target.destinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
    depthState.writeEnabled = false;
    this.renderQueueType = RenderQueueType.Transparent;
  }
 
  constructor(engine: Engine) {
    super(engine, Shader.find("demo"));
  }
}