Support trail effects (#1251) #1431

errnull · 2023-03-24T08:09:21Z

新增 TrailRenderer 支持。
playground 效果预览：
https://l60fjz.csb.app/

cptbtptpbcptdtptp · 2023-03-24T08:12:39Z

codecov-commenter · 2023-03-24T08:15:13Z

Codecov Report

Patch coverage: 8.60% and project coverage change: -0.10 ⚠️

Comparison is base (6a0e525) 50.77% compared to head (853e33a) 50.67%.

❗ Current head 853e33a differs from pull request most recent head dd6bf65. Consider uploading reports for the commit dd6bf65 to get more accurate results

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@             Coverage Diff             @@
##           dev/1.0    #1431      +/-   ##
===========================================
- Coverage    50.77%   50.67%   -0.10%     
===========================================
  Files          364      364              
  Lines        18818    18863      +45     
  Branches      2702     2699       -3     
===========================================
+ Hits          9554     9558       +4     
- Misses        8307     8348      +41     
  Partials       957      957

Impacted Files	Coverage Δ
packages/core/src/trail/TrailRenderer.ts	`7.77% <7.77%> (+0.25%)`	⬆️
packages/core/src/trail/TrailMaterial.ts	`20.00% <20.00%> (-5.00%)`	⬇️
packages/core/src/shader/ShaderPool.ts	`100.00% <100.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

errnull · 2023-03-24T08:18:48Z

did fix

gz65555 · 2023-03-31T08:28:37Z

Component 没有提交上来

gz65555 · 2023-04-04T07:42:14Z

Component 没有提交上来

已经看到

GuoLei1990 · 2023-04-07T08:05:41Z

packages/core/src/trail/TrailRenderer.ts

+  constructor(props) {
+    super(props);
+
+    this._createMaterial();


对于所有 Renderer，Material 都应该保持开放性，开发者可以调用接口更换材质对象和修改材质属性。不要在渲染器内部使用绑定和内置策略

已经抽离一个独立的 Trail Material，如果需要自定义 Material 使用 Renderer 的 setMaterial 即可替换。

GuoLei1990 · 2023-04-07T08:07:28Z

packages/core/src/trail/TrailRenderer.ts

+  set trailColor(value: any) {
+    this._trailColor.copyFrom(value);
+    this.material.shaderData.setVector4("u_tailColor", value);
+  }


Trail Color 属于渲染器，所以其数据存在material 身上并不合理，需要改为renderer

该属性已经与Material解绑，开发者可以在 Shader 中获取 Trail Color 自行实现

this.getMaterial().shaderData.setColor("u_tailColor", value); 逻辑上并未未解绑，依然使用的是材质的 shaderData

this.getMaterial().shaderData.setColor("u_tailColor", value); 逻辑上并未未解绑，依然使用的是材质的 shaderData

已更新为 renderer shaderData

GuoLei1990 · 2023-04-07T08:09:19Z

packages/core/src/trail/TrailRenderer.ts

+  set textureTileT(value: number) {
+    this._textureTileT = value;
+    this.material.shaderData.setFloat("u_textureTileT", value);
+  }


S 和 T 代表什么，API 和注释要写清楚

已经添加注释

注释里也没有讲清楚 S 和T 是什么，API 要考虑开发者的理解成本

注释里也没有讲清楚 S 和T 是什么，API 要考虑开发者的理解成本

已经更新变量个解释：
/**

Texture UV S-axis for trail.

textureScaleY == 1 => Texture AspectFill;

textureScaleY > 1 => Texture Tile;

textureScaleY < 1 => Texture Strech;
*/
后续会在案例中演示。

GuoLei1990 · 2023-04-07T08:10:26Z

packages/core/src/trail/TrailRenderer.ts

+  /**
+   * NodeIDs vertex of trail.
+   */
+  get nodeIDs(): Float32Array {


nodeIDs 作为公开 API 对用户的作用和功能是什么，需要考虑清楚，为什么需要这个 API？

确实不需要 Public，已经改为 Private

GuoLei1990 · 2023-04-07T08:11:44Z

packages/core/src/trail/TrailRenderer.ts

+
+  set headColor(value: any) {
+    this._headColor.copyFrom(value);
+    this.material.shaderData.setVector4("u_headColor", value);


和 trailColor 一样，不要把渲染器熟悉塞到材质中，同理梳理一下其他的变量

该属性已经与Material解绑，开发者可以在 Shader 中获取 Head Color 自行实现，其他变量也修改。

GuoLei1990 · 2023-04-07T08:12:43Z

packages/core/src/trail/TrailRenderer.ts

    }

-    this._prePointsNum = this._curPointNum;
+    const currentEntityMatrix = new Matrix();


不应该在帧循环中 new Matrix() ，要注意 GC 因素

以修改，使用成员变量。

GuoLei1990 · 2023-04-07T08:13:45Z

packages/core/src/trail/TrailRenderer.ts

+    return this._headColor;
+  }
+
+  set headColor(value: any) {


不应该用 any

GuoLei1990 · 2023-04-07T08:20:16Z

拖尾很重要的一个属性是宽度变化，现在是固定宽度，比如尾巴逐渐变窄无法实现

GuoLei1990 · 2023-04-07T08:22:17Z

packages/core/src/trail/TrailRenderer.ts

+    this._currentLength = 0;
+    this._currentEnd = -1;
+    this._currentNodeIndex = 0;
+    this._maxLength = this._time * 120;


默认长度直接采用 maxLength,最好根据使用情况动态扩容

对一个 Trail 来说，Time 是确定的话，因为是跟随屏幕刷新的，
屏幕中显示的 Trail 长度最多不超过 maxLength = time * FPS，
拖尾运动如果超过 maxLength 可以从头开始复用数组空间，
所以目前这个 maxLength 是不需要扩容的。

要考虑初始内存占用，如果我的设备降级为30帧呢？

GuoLei1990 · 2023-04-07T08:23:12Z

packages/core/src/trail/TrailRenderer.ts

+  }
+
+  /** 
+   * Head color for trail


这类注释写句号

所有注释都已经补上句号.

GuoLei1990 · 2023-04-07T08:25:41Z

packages/core/src/trail/TrailRenderer.ts

+    // 将 TriangleStrip 分成两个 subMesh，
+    // 要在第一段末尾多绘制第二段的首节点，
+    // 不然会出现断层；
+    let lastIndex = this._currentLength * this._verticesPerNode * 3;


用英文写注释

// Split TriangleStrip into two subMeshes;
// Copy the head node of the second submesh to the end of the first submesh;
// Avoid gap in the trail.

GuoLei1990 · 2023-04-07T08:26:59Z

packages/core/src/trail/TrailRenderer.ts

+    return this._positions;
+  }
+
+  set positions(value: Float32Array) {


把内部顶点数据公开出去的价值是什么，可以考虑下是否要公开

确实不需要 Public，已经改为 Private

GuoLei1990 · 2023-04-07T08:36:44Z

和 dev/1.0 的冲突要解决一下

errnull · 2023-04-13T10:43:50Z

和 dev/1.0 的冲突要解决一下

冲突已解决。

errnull · 2023-04-14T03:17:17Z

拖尾很重要的一个属性是宽度变化，现在是固定宽度，比如尾巴逐渐变窄无法实现

目前先基于匀速的宽度缩减做一个简单实现，下个版本迭代宽度曲线变化。

errnull · 2023-04-14T05:29:39Z

拖尾很重要的一个属性是宽度变化，现在是固定宽度，比如尾巴逐渐变窄无法实现

目前先基于匀速的宽度缩减做一个简单实现，下个版本迭代宽度曲线变化。

已实现宽度匀速缩减

# Conflicts: # packages/core/src/trail/trail.vs.glsl

GuoLei1990 · 2023-04-17T12:51:45Z

packages/core/src/trail/TrailRenderer.ts

+        new VertexElement("a_trailBirthTime", 0, VertexElementFormat.Float, 3),
+        new VertexElement("a_nodeCenter", 0, VertexElementFormat.Vector3, 4),
+      ])
+    mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);


需要实现UV，拖尾很常用就是和透明贴图结合，如：

案例上最好结合这种贴图，渲染出项目可接受的效果：https://layaair.layabox.com/3.x/demo/resources/res/threeDimen/trail/Assets/tex/wenli00154.jpg 素材图片

案例上最好结合这种贴图，渲染出项目可接受的效果：https://layaair.layabox.com/3.x/demo/resources/res/threeDimen/trail/Assets/tex/wenli00154.jpg 素材图片

纹理的拉伸模式可以通过调整：

scaleX&scaleY = 1 -> 纹理 1:1 拉伸遮盖轨迹;

scaleX&scaleY > 1 -> 纹理缩放平铺 Tile 模式;

scaleX&scaleY < 1 -> 纹理拉伸裁剪 Stretch 模式;

ScreenFlow.mp4

新增了一个 TextureDragging 参数，设置了之后可以让纹理从头拉长

该案例 scaleX&scaleY = 1 且 TextureDragging = true，
即可复原 laya 的纹理拉伸效果。

GuoLei1990 · 2023-04-17T12:54:24Z

packages/core/src/trail/TrailRenderer.ts

+    mesh.setVertexBufferBinding(trailBirthTimesBuffer, 4, 3);
+
+    const nodeCentersBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._nodeCenters, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(nodeCentersBuffer, 12, 4);


拖尾动态更新的Buffer 需要尽可能合并，每帧多次 setData 对性能有影响

拖尾动态更新的Buffer 需要尽可能合并，每帧多次 setData 对性能有影响

已经将 a_nodeIndex&a_vertexNodeIndex&a_trailBirthTime 三个buffer 的 setData 合并成一个，除此之外都是独立顶点数据。

GuoLei1990 · 2023-04-17T12:57:52Z

packages/core/src/trail/TrailRenderer.ts

+  set time(value: number) {
+    this._time = value;
+    this._init();
+    this.getMaterial().shaderData.setFloat("u_trailLifeTime", value);


时间存储在 ShaderData 上，如果两个TrailRenderer 共享一个材质，会不会出错呢？

时间存储在 ShaderData 上，如果两个TrailRenderer 共享一个材质，会不会出错呢？

已经修改成基于 renderer 的 shaderdata

GuoLei1990 · 2023-04-17T12:59:21Z

packages/core/src/trail/TrailRenderer.ts

+  set trailColor(value: any) {
+    this._trailColor.copyFrom(value);
+    this.material.shaderData.setVector4("u_tailColor", value);
+  }


this.getMaterial().shaderData.setColor("u_tailColor", value); 逻辑上并未未解绑，依然使用的是材质的 shaderData

errnull · 2023-04-19T03:37:31Z

所有基于 material 的 shaderData 已经全部改成 Renderer 的。

…ndexData.

Support trail effects (galacean#1251)

4a8aa70

errnull requested review from GuoLei1990 and zhuxudong March 24, 2023 08:09

feat: update max length.

c78007f

errnull requested review from cptbtptpbcptdtptp and removed request for zhuxudong March 24, 2023 08:27

errnull self-assigned this Mar 24, 2023

GuoLei1990 reviewed Apr 7, 2023

View reviewed changes

errnull added 4 commits April 13, 2023 15:27

Merge branch 'dev/1.0' into dev/trailRenderer

70096af

feat: remove useless import.

334481e

feat: update import.

25f823e

feat: modify code optimization comments.

7457e04

errnull added 2 commits April 14, 2023 10:55

feat: create trail material.

262709b

feat: remove useless import.

c3d40f4

feat: add imp for trail width cut.

c66f95e

Merge branch 'dev/1.0' into dev/trailRenderer

497a644

# Conflicts: # packages/core/src/trail/trail.vs.glsl

feat: update explanatory for uv s&t.

922a48b

GuoLei1990 reviewed Apr 17, 2023

View reviewed changes

GuoLei1990 approved these changes Apr 17, 2023

View reviewed changes

errnull and others added 2 commits April 19, 2023 02:40

feat: update texture dragging.

c83de9b

feat: update material shaderData to renderer shaderData.

f26212b

errnull added 9 commits April 19, 2023 11:51

feat: update explanatory for uv s&t.

237bd99

feat: merge a_nodeIndex&a_vertexNodeIndex&a_trailBirthTime to a_nodeI…

f086d3b

…ndexData.

feat: update code.

5493427

feat: Update code.

b68d62a

feat: update data.

64f769e

feat: update time and max length.

6b505a2

feat: update max length.

084d8dd

feat: update max length.

dd6bf65

feat: rename texture scale var.

b49bf86

GuoLei1990 changed the base branch from dev/1.0 to dev/1.1 May 22, 2023 02:33

GuoLei1990 changed the base branch from dev/1.1 to main September 15, 2023 09:34

Support trail effects (#1251) #1431

Are you sure you want to change the base?

Support trail effects (#1251) #1431

Conversation

errnull commented Mar 24, 2023

cptbtptpbcptdtptp commented Mar 24, 2023

codecov-commenter commented Mar 24, 2023 • edited

Codecov Report

errnull commented Mar 24, 2023 • edited

gz65555 commented Mar 31, 2023

gz65555 commented Apr 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

errnull Apr 19, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GuoLei1990 commented Apr 7, 2023 • edited

Choose a reason for hiding this comment

errnull Apr 14, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

errnull Apr 13, 2023 • edited

Choose a reason for hiding this comment

GuoLei1990 Apr 7, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GuoLei1990 commented Apr 7, 2023

errnull commented Apr 13, 2023

errnull commented Apr 14, 2023

errnull commented Apr 14, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

errnull Apr 18, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

errnull commented Apr 19, 2023

codecov-commenter commented Mar 24, 2023 •

edited

errnull commented Mar 24, 2023 •

edited

errnull Apr 19, 2023 •

edited

GuoLei1990 commented Apr 7, 2023 •

edited

errnull Apr 14, 2023 •

edited

errnull Apr 13, 2023 •

edited

GuoLei1990 Apr 7, 2023 •

edited

errnull commented Apr 14, 2023 •

edited

errnull Apr 18, 2023 •

edited