galacean / engine

A typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.
https://galacean.antgroup.com/engine
MIT License
4.2k stars 299 forks source link

Fix `pass.renderstate` does not work in `SpriteRenderer` #2023

Closed cptbtptpbcptdtptp closed 7 months ago

cptbtptpbcptdtptp commented 7 months ago

Please check if the PR fulfills these requirements

/**
 * @title ShaderLab 2D
 * @category Material
 */

import {
  AssetType,
  Camera,
  Material,
  Shader,
  Sprite,
  SpriteRenderer,
  Texture2D,
  WebGLEngine,
} from "@galacean/engine";
import { ShaderLab } from "@galacean/engine-shader-lab";

const shaderLab = new ShaderLab();

const test2d = `Shader "test2d" {
    SubShader "Default" {
      Pass "Pass0" {
        mat4 renderer_MVPMat;
        sampler2D renderer_SpriteTexture;

        DepthState {
          Enabled = true;
          WriteEnabled = false;
          CompareFunction = CompareFunction.Less;
        }

        StencilState {
          Enabled = false;
        }

        RasterState {
          CullMode = CullMode.Off;
        }

        BlendState {
          Enabled = true;
          SourceColorBlendFactor = BlendFactor.SourceAlpha;
          DestinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha;
          SourceAlphaBlendFactor = BlendFactor.One;
          DestinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha;
          ColorBlendOperation = BlendOperation.Add;
          AlphaBlendOperation = BlendOperation.Add;
        }

        RenderQueueType = RenderQueueType.Transparent;

        struct a2v {
          vec4 POSITION;
          vec2 TEXCOORD_0;
          vec4 COLOR_0;
        }

        struct v2f {
          vec4 v_color;
          vec2 v_uv;
        }

        VertexShader = vert;
        FragmentShader = frag;

        v2f vert(a2v v) {
          v2f o;

          gl_Position = renderer_MVPMat * v.POSITION;
          o.v_color = v.COLOR_0;
          o.v_uv = v.TEXCOORD_0;
          return o;
        }

        void frag(v2f i) {
          vec4 baseColor = texture2D(renderer_SpriteTexture, i.v_uv);
          gl_FragColor = baseColor * i.v_color;
        //   gl_FragColor = vec4(1, 0, 0, 0.1);
        }
      }
    }
  }`;

WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => {
  Shader.create(test2d);
  engine.canvas.resizeByClientSize();
  const rootEntity = engine.sceneManager.activeScene.createRootEntity();

  // camera
  const cameraEntity = rootEntity.createChild("cameraNode");
  cameraEntity.transform.setPosition(0, 0, 5);
  cameraEntity.addComponent(Camera);

  engine.resourceManager
    .load<Texture2D>({
      url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*ApFPTZSqcMkAAAAAAAAAAAAAARQnAQ",
      type: AssetType.Texture2D,
    })
    .then((texture) => {
      const entity = rootEntity.createChild("sprite");
      const renderer = entity.addComponent(SpriteRenderer);
      renderer.sprite = new Sprite(engine, texture);
      renderer.setMaterial(new Material(engine, Shader.find("test2d")));
    });

  engine.run();
});