Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: sprite billboard #774

Merged
merged 2 commits into from
Dec 3, 2024
Merged

fix: sprite billboard #774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
782834f
fix: sprite billboard
Dec 2, 2024
f77fe60
chore: remove sprite shader unused uniform
Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/effects-core/src/components/base-render-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/effects-core/src/plugins/sprite/sprite-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/effects-core/src/plugins/text/text-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
23 changes: 20 additions & 3 deletions packages/effects-core/src/shader/item.vert.glsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down