npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@galacean/mars-core

v2.8.1

Published

Mars runtime core for the web

Downloads

167

Readme

Mars Core

基本概念

合成(composition)是 Mars 中动画播放的单位,抽象类 Composition 管理着一段动画从数据解析(JSON -> VFXItem / Texture -> mesh)到渲染帧(renderFrame)和渲染通道 (renderPass) 的创建、更新与销毁。

每个合成用到的动画数据来自不同类型的元素(VFXItem),包括相机属性、若干图层、粒子和交互元素; 合成创建时,会完成元素 VFXItem 的创建、动画纹理贴图(Texture)的加载和创建, renderFramerenderPass 的初始化; 元素在生命周期开始时,对应的 mesh 会被合成添加到默认的 renderPass 中; 生命周期进行时,mesh 中包含的 GeometryMaterial 等数据会被更新; 当需要进行后处理时,mesh 会被拆解到合适的 renderPass 中; 生命周期结束后,对应的 mesh 会从 renderFrame 中移除。

要完成动画的播放,引擎需要通过 renderFrame 获取 mesh 并添加到场景上,在渲染循环中不断调用 Compositionupdate 函数完成数据的刷新。

流程

1、资源加载和创建

  • 资源下载 AssetManager: 动画播放前需要对 JSON 和其中的二进制(processBins)、图像(processImages)等资源进行下载,图像下载后会返回用于创建 texture 的参数。除了基本的资源下载外,还支持以下功能:
    1. 根据渲染分级选择性下载资源;
    2. 加载图像后根据配置进行图像/文字的替换,在 Canvas 上绘制后保存成 imageData 对象;
    3. 启用 gl 扩展 KHR_parallel_shader_compile,在资源加载完成后对 shader 进行编译;
  • 纹理创建 TextureTexture 抽象类中的 createcreateWithData 静态方法用于根据上面返回的参数创建真正的 texture 纹理对象,目前的纹理对象可能基于的创建类型在 TextureSourceType 中枚举。

2、动画播放

  • Composition:合成管理着动画播放的数据处理与渲染设置。首先需要执行 initialize 函数,通过 VFXItemManager 完成 JSON -> VFXItem 的处理。此外,引擎需要在合适通过 composition.renderFrame 获取 mesh ,并把获取到的 mesh 添加场景中。
    1. 静态 initialize 方法:
      • 引擎需要实现 VFXItemManager 的创建、Composition 实例的创建、纹理参数转化成引擎可用的 Texture
    2. 构造函数中需要调用以下函数:
      • 插件系统 pluginSystem.initializeComposition()
      • composition.resetRenderFrame()renderFrame 的创建和初始化
      • composition.reset():动画数据解析、Mesh 等渲染实例的状态初始化
      • composition.start():合成状态重置
    3. update 方法:用于调用 renderFrame 的方法增加/修改/删除 mesh,驱动 VFXItem 更新并刷新顶点数据、uniform 变量值等,以下函数会被调用,需要实现:
      • updateVideo:更新视频帧,用于视频播放使用
      • getRendererOptions:返回使用数据创建的空白 Texture
      • reloadTexture/offloadTexture:纹理的 reloadoffload
    4. 添加到场景中的 mesh 或渲染对象通过 renderFrame 获取,在 Composition 根据引擎需要自由设计接口即可。
    5. dispose 方法:在合成生命周期结束时,会根据结束行为调用该函数,执行 VFXItem 的合成销毁回调,同时会把 mesh、texture 等对象一并销毁。
  • RenderFrameRenderFrame 可以理解为合成每帧对应的渲染数据对象,除了管理 renderPass,也保存了合成对应的相机属性、公共 uniform 变量表 (semantics)等数据;各类型元素对应的 mesh 会通过 renderFrameaddMeshToDefaultRenderPassremoveMeshFromDefaultRenderPass 来添加和移除。 mesh 会根据 priority 属性被添加到 renderPass 合适位置上。
    1. addMeshToDefaultRenderPass/removeMeshFromDefaultRenderPass
      • 对于不含滤镜元素的合成,引擎可以通过 defRenderPass 管理全部 mesh,也可以直接把传递进来的 mesh 放置到引擎自己的场景,也可以在此完成引擎需要的 mesh 组织管理;
      • 对于包含滤镜元素的合成,涉及到后处理,mars-core 会调用 splitDefaultRenderPassByMesh 函数利用切分参数把对 renderPass 进行切分。此时引擎就需要遍历 renderFrame._renderPasses 来获取 mesh 并添加到场景;
      • 添加 mesh 时 material 用到的公共 uniform 需要通过 mesh.material.uniformSemantics 获取,包括 MVP 变换涉及的矩阵、使用的 attachment 等;
    2. setEditorTransformUniform:用于设置元素在模型变换后的位移/缩放变换,引擎可以不理解这个概念,把值设置到 semantics[EDITOR_TRANSFORM] 上即可。
  • RenderPass:添加到场景中的 mesh 可以通过 renderPass.meshes 获取,渲染通道 renderPass 包含当前通道的 mesh、渲染前后清除缓冲区的操作类型和附件,用到颜色、深度和模板附件。delegate 属性用于指定 renderPass 在渲染前后的回调,在 filters 中定义,引擎需要在真正渲染 mesh 前执行这些回调确保滤镜的正确运行。
  • Mesh: 每个 VFXItem 在初始化时会调用 Mesh.create() 函数, 传入 geometry、material 等参数,并通过 priority 设置/获取当前 mesh 对应的渲染顺序。
    1. 静态 create 方法 用于创建一个新的引擎能够渲染的 Mesh 对象。引擎需要在这里把 geometry、material 等对象添加到 mesh 上。
      • 要渲染的图元类型可以通过传入的 geometry.mode 获取
    2. prioritysettergetter 函数用于设置当前 mesh 的渲染顺序,priority 值小的 mesh 应该比值大的先绘制。
    3. setVisible/getVisible 设置 mesh 的可见性

Tips

  • 图层元素并非一个 spriteVFXItem 对应一个 mesh, 图层元素在每帧更新时会通过 diff 算法比较相邻 mesh 是否具有相同的材质属性从而对 mesh 进行拆解或者合并。
  • 若要获取当前 VFXItem 对应的 mesh,可以调用 VFXItem.content.mesh 进行获取。

3、Geometry

每个 VFXItem 在初始化时会调用 Geometry.create() 函数, 传入绘制类型、元素的顶点和索引数据,并在每帧更新时传入新的顶点数据传入的 attribute 数据中。

  1. 静态 create 方法:处理传入的 attribute 数据,若包含 dataSource 属性,则表示该 attribute 与 dataSource 共用buffer
    • sizeoffsetstride 会一并传入,data 的长度为0,引擎如不允许动态修改长 GPU 缓存长度,需要使用 maxVertex 参数创建初始化数组。
  2. setAttributeData/getAttributeData:设置/获取指定名字的 attribute 数据
  3. setAttributeSubData:设置 attribute 部分更新
  4. getIndexData/setIndexData:设置/获取索引数据
  5. setDrawCount/getDrawCount:设置/获取 drawCount

涉及的 attribute:

图层 sprite

1. aPoint 顶点数据,Float32Array
2. aIndex Float32Array, 与aPoint共用buffer
3. 索引数据: Uint16Array

粒子 particle

1. aPos Float32Array
2. aVel Float32Array 与aPos共用buffer
3. aDirX Float32Array 与aPos共用buffer
4. aDirY Float32Array 与aPos共用buffer
5. aRot Float32Array 与aPos共用buffer
6. aSeed Float32Array 与aRot共用buffer
7. aColor Float32Array 与aRot共用buffer
8. aOffset Float32Array
9. aSprite Float32Array
10. 索引数据:Uint16Array

拖尾 particle-trail

1. aColor Float32Array
2. aSeed  Float32Array  与aColor共用buffer
3. aInfo  Float32Array  与aColor共用buffer
4. aPos   Float32Array  与aColor共用buffer
5. aTime  Float32Array
6. aDir   Float32Array
7. aTrailStart Float32Array
8. aTrailStartIndex Float32Array

4、Material

每个 VFXItem 在初始化时会调用 Material.create() 函数, 传入 shader、uniformSemantics,material 的 states 和uniform 数据不会在构造参数中传入,会在 material 创建后通过函数设置。

  1. 静态 create 方法:需要处理传入的 shader 文本和设置 uniformSemantics
  2. states 的 setter/getter 方法实现:传入的常量类型为 glContext, 引擎可能需要转换成引擎自己定义的常量;
  3. uniform 的 set[dataType]/get[dataType] 方法,mars-core 会根据 uniform 的类型调用对应的方法设置数据

⚠️注意: 目前 ubo 的相关调用已废弃,material-data-block 不需要实现

涉及的 uniform 及其类型:

图层 sprite

1. uMainData mat4
2. uTexParams vec4
3. uTexOffset vec4
4. uSampler\[i] sampler2D
5. uSamplerPre sampler2D
6. uFeatherSampler sampler2D

粒子 particle

1. uSprite vec4
2. uParams vec4
3. uAcceleration vec4
4. uGravityModifierValue vec4
5. uOpacityOverLifetimeValue vec4
6. uRXByLifeTimeValue vec4
7. uRYByLifeTimeValue vec4
8. uRZByLifeTimeValue vec4
9. uLinearXByLifetimeValue vec4
10. uLinearYByLifetimeValue vec4
11. uLinearZByLifetimeValue vec4
12. uSpeedLifetimeValue vec4
13. uOrbXByLifetimeValue vec4
14. uOrbYByLifetimeValue vec4
15. uOrbZByLifetimeValue vec4
16. uSizeByLifetimeValue vec4
17. uSizeYByLifetimeValue vec4
18. uColorParams vec4
19. uFSprite vec4
20. uPreviewColor vec4
21. uVCurveValues vec4Array
22. uFCurveValues vec4
23. uFinalTarget vec3
24. uForceCurve vec4
25. uOrbCenter vec3
26. uTexOffset vec2
27. uPeriodValue vec4
28. uMovementValue vec4
29. uStrengthValue vec4
30. uWaveParams vec4

API 文档

TODO