fix: sprite billboard (#774)

* fix: sprite billboard * chore: remove sprite shader unused uniform --------- Co-authored-by: wumaolin.wml <[email protected]>
galacean · Dec 3, 2024 · ae05c74 · ae05c74
1 parent cb8b5dc
commit ae05c74
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/packages/effects-core/src/components/base-render-component.ts b/packages/effects-core/src/components/base-render-component.ts
@@ -73,7 +73,7 @@ export class BaseRenderComponent extends RendererComponent {
     super(engine);
 
     this.renderer = {
-      renderMode: spec.RenderMode.BILLBOARD,
+      renderMode: spec.RenderMode.MESH,
       blending: spec.BlendingMode.ALPHA,
       texture: this.engine.emptyTexture,
       occlusion: false,
@@ -148,6 +148,14 @@ export class BaseRenderComponent extends RendererComponent {
       renderer.setGlobalMatrix('effects_ObjectToWorld', this.transform.getWorldMatrix());
     }
     this.material.setVector2('_Size', this.transform.size);
+
+    if (this.renderer.renderMode === spec.RenderMode.BILLBOARD ||
+      this.renderer.renderMode === spec.RenderMode.VERTICAL_BILLBOARD ||
+      this.renderer.renderMode === spec.RenderMode.HORIZONTAL_BILLBOARD
+    ) {
+      this.material.setVector3('_Scale', this.transform.scale);
+    }
+
     renderer.drawGeometry(geo, material);
   }
 

diff --git a/packages/effects-core/src/plugins/sprite/sprite-item.ts b/packages/effects-core/src/plugins/sprite/sprite-item.ts
@@ -293,7 +293,7 @@ export class SpriteComponent extends BaseRenderComponent {
 
     this.interaction = interaction;
     this.renderer = {
-      renderMode: renderer.renderMode ?? spec.RenderMode.BILLBOARD,
+      renderMode: renderer.renderMode ?? spec.RenderMode.MESH,
       blending: renderer.blending ?? spec.BlendingMode.ALPHA,
       texture: renderer.texture ?? this.engine.emptyTexture,
       occlusion: !!renderer.occlusion,

diff --git a/packages/effects-core/src/plugins/text/text-item.ts b/packages/effects-core/src/plugins/text/text-item.ts
@@ -106,7 +106,7 @@ export class TextComponent extends BaseRenderComponent {
     this.interaction = interaction;
 
     this.renderer = {
-      renderMode: renderer.renderMode ?? spec.RenderMode.BILLBOARD,
+      renderMode: renderer.renderMode ?? spec.RenderMode.MESH,
       blending: renderer.blending ?? spec.BlendingMode.ALPHA,
       texture: renderer.texture ?? this.engine.emptyTexture,
       occlusion: !!renderer.occlusion,

diff --git a/packages/effects-core/src/shader/item.vert.glsl b/packages/effects-core/src/shader/item.vert.glsl
@@ -8,12 +8,13 @@ varying vec3 vParams;// texIndex mulAplha
 varying vec4 vColor;
 
 uniform vec2 _Size;
+uniform vec3 _Scale;
 uniform vec4 _Color;
 uniform vec4 _TexParams;//transparentOcclusion blending renderMode
 uniform vec4 _TexOffset;// x y sx sy
 uniform mat4 effects_MatrixVP;
-uniform mat4 effects_MatrixInvV;
 uniform mat4 effects_ObjectToWorld;
+uniform mat4 effects_MatrixV;
 
 #ifdef ENV_EDITOR
 uniform vec4 uEditorTransform;
@@ -24,8 +25,24 @@ void main() {
   vTexCoord = vec2(atlasOffset.xy * _TexOffset.zw + _TexOffset.xy);
   vColor = _Color;
   vParams = vec3(0.0, texParams.y, texParams.x);
-  vec4 pos = vec4(aPos.xy * _Size, aPos.z, 1.0);
-  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;
+
+  if(texParams.z == 1.0) {
+    vec4 pos = vec4(aPos.xy * _Size, aPos.z, 1.0);
+    gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;
+  } else { // Billboard
+    mat4 view = effects_MatrixV;
+    // 提取摄像机的右向量和上向量
+    vec3 camRight = vec3(view[0][0], view[1][0], view[2][0]); // 视图矩阵的第一列
+    vec3 camUp = vec3(view[0][1], view[1][1], view[2][1]);    // 视图矩阵的第二列
+
+    // 计算模型转换后的位置
+    vec3 worldPosition = vec3(effects_ObjectToWorld * vec4(0.0, 0.0, 0.0, 1.0));
+
+    // 根据局部顶点在 billboarding 平面上的方向，调整到面向摄像机的世界坐标
+    vec3 vertexPosition = worldPosition + camRight * aPos.x * _Size.x * _Scale.x + camUp * aPos.y * _Size.y * _Scale.y;
+    gl_Position = effects_MatrixVP * vec4(vertexPosition, 1.0);
+  }
+
 #ifdef ENV_EDITOR
   gl_Position = vec4(gl_Position.xy * uEditorTransform.xy + uEditorTransform.zw * gl_Position.w, gl_Position.zw);
 #endif