乐趣区

关于前端:开源生态丨Sample提交指南一起成为我们的Contributors吧内附彩蛋

jiezi

在《版本更新 | Orillusion 0.7 版本公布啦!》的文章中，咱们提到过后续会出一期独立的内容，来通知大家如何提交本人的示例 Sample 代码。当初教程终于来啦！

1 一些益处

示例 Sample 代码绝对于引擎外围代码开发绝对简略，不会太多的波及到引擎内核代码的改变，更多的是依据咱们的教程文档，间接调用引擎的 API 来实现一些利用性能的开发。

因为咱们的 Sample 代码也属于「Orillusion 引擎」外围库的一部分，所以一旦提交的 PR 被承受，就能够成为 Orillusion 官网开源库中的 Contributors 角色！

所有引擎外围库中的 Sample 最终都会被咱们同步公布到 Orillusion 的官方网站中，不便大家后续的援用、分享、和流传，官网链接为：
https://www.orillusion.com/example

咱们会不定期地筛选一些优良的 Sample 开发者，给予一些奖品处分，作为对 Orillusion 开源社区奉献的激励、反对、和认可！同时，也会帮忙每一个示例 Sample 的开发者，进行社区的宣传推广流动，包含国内的社区以及国外的社区。

在优良的开源社区和我的项目中留下痕迹，是咱们每一位开发者的荣誉。而且也能够十分理论的晋升大家的 CV 背景，是最间接的技术实力的体现。那前面显而易见的加分点，大家就都懂啦！

2 提交之前

在开始介绍如何成为 Orillusion 开源我的项目的 Contributors 之前，咱们先总结下目前我的项目中 Sample 的一些根本状况。

咱们的 Sample 呈现在两个 Orillusion 相干的开源我的项目中：

  1. 官网网站我的项目：
    https://github.com/Orillusion/orillusion-web
  2. 引擎外围我的项目：
    https://github.com/Orillusion/orillusion

两个我的项目都能够进行示例 Sample 的提交工作。然而咱们强烈建议，间接在咱们的引擎外围我的项目中进行 Sample 的提交。因为，这样每一位被承受的 Sample 的开发者，都会呈现在引擎外围我的项目的 Contributors 名单中！

这两个我的项目中 Sample 的开发方法也有些不同。

简略概括，官网我的项目的 Sample 写法更加偏向于让开发者能够通过把整个我的项目代码进行复制，而后粘贴到本人的开发环境中就能够间接运行，即单文件我的项目；而引擎外围我的项目中的 Sample 有些写法是思考到引擎外围开发者的代码复用性，做了一些简略的封装工作，须要大家理解下封装的逻辑，再进行 Sample 的编写。

不过，大家在给引擎外围我的项目提交 Sample 的时候，能够应用官方网站我的项目中的 Sample 写法，也能够应用引擎外围我的项目中的 Sample 写法。后续将 Sample 从引擎外围我的项目迁徙到官网网站我的项目的工作，会由咱们 Orillusion 团队的成员帮大家实现的。咱们会始终在云端 hosting 每一位 Contributor 用心编写的 Sample，不便大家随时进行线上拜访！

如果大家用官方网站中 Sample 写法进行 PR 提交，能够略微缩小一些咱们的迁徙工作，那当然是非常感谢啦！

3 具体方法

上面咱们就开始具体解说如何实现 Orillusion 我的项目中 Sample 的提交。次要分为以下几个步骤：

具体方法

上面咱们就开始具体解说如何实现 Orillusion 我的项目中 Sample 的提交。次要分为以下几个步骤

  1. 在你的 GitHub 上 fork Orillusion 我的项目

  2. 克隆你 fork 的 repo 到本地：

    git clone git@github.com:xxxx/orillusion.git

  3. 进入我的项目目录并切换到 dev 分支：

    cd orillusion && git checkout dev

  4. 初始化 public 子模块：

    git submodule update --init

  5. 装置开发依赖：

    pnpm i

  6. 运行开发服务器：

    pnpm run dev

    留神：须要 Node.js 16 版本以上，以及 PNPM 7 版本以上。

编写新 Sample

  1. 在 /samples/xxx/Sample_xxx.ts 的对应类别文件夹中创立新入口文件，如果没有适宜的类别文件夹，能够新建一个.ts 文件，文件名应该要具备肯定自解释性，要体现该 Sample 的性能或特点
  2. 编写你的场景代码，举荐以 /samples/base/Sample_Transform.ts 作为模板
  3. 根本代码编写规定：

->从 @orillusion/core 导入外围模块，例如 Engine3D, Scene3D, Object3D…

->从 @orillusion/xxx 导入插件 / 扩大，例如 @orillusion/stats, @orillusion/particle, @orillusion/physics, …

-> 倡议应用 Top-level await 来初始化 Engine3D 和其余异步 API

-> 倡议将所有 functions/classes/modules 嵌入到一个繁多的 ts 文件中，不便社区分享和保护

-> 倡议应用dat.gui 创立 GUI 菜单来管制具体场景参数

-> 尽可能正文代码，使代码更易浏览和了解

  1. 如果 Sample 须要本地文件，例如 gltf 模型或图片，咱们倡议你能够将它们上传到一个 公共文件托管服务，例如 github pages, cloudflare CDNs, npmjs, AWS S3, Aliyun OSS 等。而后在你的样例中应用公共 URL 来导入它们。除此之外，也能够分割咱们将你的文件增加到咱们的assets 仓库，这样你就能够间接从 /public 文件夹导入文件。

创立一个 PR

  1. 提交你的 Sample，提交时的形容内容须要遵循 提交信息标准（下方链接查看详情）
    https://github.com/Orillusion/orillusion/blob/main/.github/commit-convention.md
  2. 推送到本人的 fork 仓库
  3. 从本人 fork 仓库的 dev 分支向 orillsuion 引擎外围我的项目 dev 分支创立一个 PR，增加 PR 详细描述和更改记录，内容形容也应该遵循 提交信息标准

Sample 提交办法的这三个步骤也有总结版本，曾经放到 github 上啦，有须要的小伙伴能够间接在 github 中查看：

https://github.com/Orillusion/orillusion/blob/dev/.github/contributing.md#write-new-samples

好啦，上面咱们就能够开始编写本人的 Sample，赶快成为 Orillusion 我的项目的外围 Contributors 吧！

在这个过程中，如果发现任何 bug 或者有其余相干的问题，咱们倡议在 Github Issues 板块中提交对应的 issue，咱们都会定期查看，回复和跟进的！

心愿每一位 3D 利用的开发者和咱们共同努力，一起打造属于国人本人的开源的 3D 引擎社区，为将来 3D 利用暴发时代提供底层引擎根底工具！

彩蛋来啦

社区中应用「Orillusion 引擎」开发的 WebGPU 游戏，又更新啦！大家都曾经开始热烈探讨开发一个在线联机游戏，下班摸鱼了 …

(͡° ͜ʖ ͡°)૭✧ 摸鱼不太激励，然而开发是能够做的！有趣味的小伙伴，点开关注下作者吧！

Orillusion 致力于打造全世界第一款齐全开源基于 WebGPU 规范的一种轻量级渲染引擎, 指标是在浏览器中实现桌面级的渲染成果，反对超大简单场景的 3D 出现。易上手，易分享，易迭代，易合作、成本低，跨平台是咱们的外围劣势，咱们将为 3D 场景暴发时代提供引擎根底工具。

将来咱们将会继续把最干货最前沿的 WebGPU 技术分享给每一位社区成员，也欢送大家为 Orillusion 开源社区做出本人的奉献。咱们始终深信，开源社区的技术留痕是每一位技术人员最高尚的谋求！因而，咱们尊重，咱们认可，咱们更期待，退出 Orillusion，让咱们共同进步！

——Link uncharted, 链接将来世界

退出移动版