图形学3D渲染游戏开发【免费下载链接】runtimeA typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.项目地址https://gitcode.com/gh_mirrors/ru/runtime点击查看免费下载本文以 Galacean Engine仓库根目录README.md为主线系统讲解这款面向 Web 与移动平台的高性能实时互动引擎其组件系统架构、以galacean/engine为核心的 npm 使用方式、纯代码创建场景的完整流程以及基于 pnpm workspace 的 monorepo 源码结构与本地构建流程。读完本篇后你将能够独立完成从 npm 安装引擎、编写第一个可运行的 WebGL 场景到克隆仓库、参与构建与测试的全套技术链路。项目定位与核心特性Galacean Engine 是一款高性能的实时互动引擎主要面向 WebHTML5与移动端微信小程序平台。它采用组件系统Component System架构强调易用性与轻量设计底层构建在 WebGL 之上并原生支持 glTF 模型格式。开发者既可以通过可视化编辑器创作项目也可以用纯 TypeScript 代码直接驱动引擎——这正是本仓库runtime所承载的核心能力。根据README.md引擎提供的特性矩阵如下特性说明Platform支持 HTML5 与微信小程序WeChat Mini GameGraphics高级 2D 3D 图形能力Animation强大的动画系统Physics强大且易用的物理功能GUI支持拖拽与动态交互的灵活 UI 系统Input易用的交互输入能力Scripts使用 TypeScript 高效编写游戏逻辑从仓库目录结构看这些特性与packages/下的各子包一一对应packages/core渲染、场景、动画、粒子、2D 等核心系统、packages/physics-lite与packages/physics-physx两套物理实现、packages/uiGUI 系统、packages/loaderglTF 等资源加载、packages/xrXR 支持等。项目当前版本为1.6.13见根目录 package.json 与各子包的version字段采用 MIT 协议发布见 LICENSE。两种使用方式Editor 与 Pure CodeREADME 指出两条项目创建路径使用 Editor官方推荐配合可视化编辑器工作流便于美术与开发者无缝协作——美术快速搭建场景开发者编写自定义逻辑并可便捷导出到目标平台甚至可以直接基于预置的 Case 模板创建项目。纯代码Pure Code通过 npm 安装运行时完全用代码构建项目。这也是本仓库 runtime 源码所服务的主场景。npm install galacean/engine纯代码场景创建逐步解析 README 示例README 给出了一个可直接运行的最小场景示例——创建引擎、添加平行光、相机和一个 BlinnPhong 材质的球体import { BlinnPhongMaterial, Camera, DirectLight, MeshRenderer, WebGLEngine, PrimitiveMesh } from galacean/engine; // Create engine by passing in the HTMLCanvasElement id and adjust canvas size const engine await WebGLEngine.create({ canvas: canvas-id }); engine.canvas.resizeByClientSize(); // Get scene and create root entity const scene engine.sceneManager.activeScene; const rootEntity scene.createRootEntity(Root); // Create light const lightEntity rootEntity.createChild(Light); const directLight lightEntity.addComponent(DirectLight); lightEntity.transform.setRotation(-45, -45, 0); directLight.intensity 0.4; // Create camera const cameraEntity rootEntity.createChild(Camera); cameraEntity.addComponent(Camera); cameraEntity.transform.setPosition(0, 0, 12); // Create sphere const meshEntity rootEntity.createChild(Sphere); const meshRenderer meshEntity.addComponent(MeshRenderer); const material new BlinnPhongMaterial(engine); meshRenderer.setMaterial(material); meshRenderer.mesh PrimitiveMesh.createSphere(engine, 1); // Run engine engine.run();结合源码这段代码的每一步都有明确的实现支撑WebGLEngine.create({ canvas: canvas-id })引擎入口定义在 WebGLEngine.ts。其create是一个返回PromiseWebGLEngine的异步工厂方法支持传入 canvas id 字符串、HTMLCanvasElement或OffscreenCanvas三种形式内部先构造WebCanvas与WebGLGraphicDevice同时支持 WebGL 1.0 与 2.0完成_initialize后自动向场景管理器添加一个名为DefaultScene的默认场景。这也解释了为何示例中可以直接engine.sceneManager.activeScene拿到场景。engine.canvas.resizeByClientSize()实现位于 WebCanvas.ts签名为resizeByClientSize(pixelRatio: number window.devicePixelRatio)即按画布客户端尺寸乘以设备像素比缩放 WebGL 画布保证高分屏下渲染清晰。而Canvas基类Canvas.ts通过 setter 触发_sizeUpdateFlagManager.dispatch()将尺寸变化以更新标志的方式广播给所有依赖画布尺寸的渲染对象。scene.createRootEntity(Root)场景与根实体的创建逻辑在 Scene.ts 中每个场景拥有独立的实体树根节点多场景管理则由 SceneManager.ts 负责其activeScene属性getter/setter决定了当前参与渲染与更新的场景。entity.addComponent(DirectLight / Camera / MeshRenderer)这是引擎组件系统的基本形态——实体Entity与组件Component分离行为通过组件挂载到实体上transform提供位置、旋转、缩放的组合变换。engine.run()定义在 Engine.ts 中启动引擎的主循环渲染与系统更新源码注释还指出如果手动接管帧循环也可以不调用run()而直接逐帧更新。通过 resourceManager 加载 glTF 资源README 声明引擎built on WebGL and glTF。加载侧的入口是engine.resourceManagerEngine.ts 中初始化ResourceManager并对外暴露而 glTF 解析实现位于 GLTFLoader.ts。loader 包入口 以副作用导入的方式批量注册了全部资源加载器包括 glTF、GLTF 相关材质、网格、动画、动画控制器、KTX2/HDR 纹理、Font、Sprite/SpriteAtlas、Prefab、JSON、Buffer 与 Project 等覆盖了编辑器导出资产到纯代码项目所需的主流资源类型。典型用法即engine.resourceManager.loadGLTFResource(xxx.gltf)这类 Promise 式加载调用。仓库结构pnpm Workspace 下的 monorepo本仓库包含 runtime 的完整源码与文档。根目录 package.json 声明private: true并通过preinstall: npx only-allow pnpm强制使用 pnpmpackageManager: pnpm9.3.0pnpm-workspace.yaml 将packages/*、tests、examples、e2e纳入同一个 workspace。各子包的职责与依赖关系由各包package.json的dependencies确认包名npm 名目录职责galacean/engine-corepackages/core引擎核心实体/组件、场景、渲染管线、动画、粒子、2D、输入、XR 管理器、物理接口等依赖engine-mathgalacean/engine-mathpackages/math数学库Vector2/3/4、Quaternion、Matrix、BoundingBox、Ray、Rect、SphericalHarmonics3 等galacean/engine-designpackages/design设计接口包物理IPhysics/IPhysicsManager、输入、ShaderLab、XR 等抽象接口供核心与各后端解耦galacean/engine-rhi-webglpackages/rhi-webglWebGL RHI 后端WebGLEngine、WebCanvas、GLBuffer/GLTexture/GLRenderTarget 等封装galacean/engine-loaderpackages/loader资源加载器集合glTF、KTX2/Basis、字体、精灵图集、Prefab 等并内置libs/basis_transcoder.wasmgalacean/engine-physics-litepackages/physics-lite轻量级物理实现galacean/engine-physics-physxpackages/physics-physx基于 PhysXWASM的物理实现含 joint/shape 体系galacean/engine-shaderlabpackages/shader-labShaderLab 词法/语法解析与代码生成lexer/parser/codeGen 等以 peerDependency 依赖主包galacean/engine-uipackages/uiUI 组件系统component、input、enums、shader 等galacean/engine/galacean/engine-xrpackages/galacean、packages/xr、packages/xr-webxr顶层聚合包与 XR 特性/WebXR 后端其中 packages/galacean/src/index.ts 是galacean/engine的聚合入口它export *了 core、loader、math、rhi-webgl 四个包的全部内容并把 core 导出对象批量Loader.registerClass注册到加载器供资源反序列化时按类名还原类型。这解释了纯代码示例中为什么所有 API 都能从单一入口galacean/engine导入。本地构建与开发流程README 给出了从克隆到构建的完整命令结合根目录 package.json 中的 scripts 可以进一步明确每一步的含义。前置依赖git-lfs官方安装仓库中包含 LFS 大文件如 WASM、二进制资源克隆前必须安装。Node.js v15.0.0与 NPM。PNPM全局安装用于 workspace 依赖管理。克隆仓库本镜像环境可使用当前工作目录所在仓库上游克隆地址以官方仓库为准git clone your-repo-url安装依赖pnpm installpreinstall脚本npx only-allow pnpm会阻止误用 npm/yarn 安装避免 workspace 协议workspace:*解析失败。构建产物README 推荐的构建命令npm run b:all在根 package.json 中b:all展开为cross-env NODE_ENVrelease npm run b:types cross-env BUILD_TYPEALL NODE_ENVrelease rollup -c即先执行pnpm -r --filter./packages/* run b:types对各包运行tsc生成types/下的.d.ts声明再运行 rollup 全量打包。与构建相关的其他脚本包括命令说明npm run b:module仅打 MODULE 产物BUILD_TYPEMODULEnpm run b:umd仅打 UMD 产物npm run b:types递归执行各包tsc生成类型声明npm run dev/npm run watch/npm run watch:umdrollup watch 模式开发 / release / UMDnpm run clean递归删除各包dist与types目录npm run lint对packages/*/src执行 ESLintTS 严格检查构建配置入口为根目录 rollup.config.js其中配合 rollup-plugin-glsl.js 处理 GLSL 着色器文件的打包。运行示例npm run examples该脚本等价于pnpm --filter galacean/engine-examples dev即在 examples 子包中以 Vite 启动本地服务。examples 的构建脚本examples/vite.config.js会扫描examples/src/*.ts要求每个示例文件头部标注title与category并用 EJS 模板 examples/template/iframe.ejs 为每个示例生成独立的 iframe 页面最终渲染出一个可搜索、分组的示例导航页。examples/src/下提供了 BufferMesh、GLTF 加载、ShaderLab 多级示例、粒子、设备恢复等可直接对照源码学习的案例。测试单元测试npm run test运行 vitest工作区配置见 vitest.workspace.ts用例集中在 tests 目录覆盖 math、coreAnimator、Camera、Scene、Sprite、Trail 等、loader、rhi-webgl 与 shader-lab其中pretest会先执行playwright install --with-deps chromium以准备浏览器环境npm run coverage则以 headless 方式输出 v8 覆盖率。端到端测试npm run e2e使用 Playwright配置见 playwright.config.ts用例位于 e2e/case通过 e2e/tests/index.spec.ts 驱动每个 case 文件如animator-crossfade.ts、material-pbr.ts、physx-collision.ts与 e2e/fixtures/originImage 中对应的基准截图做视觉回归对比覆盖动画、材质、粒子、物理、阴影、后期处理等核心渲染路径。参与贡献与相关资源README 指出本仓库包含 runtime 的源码与文档欢迎任何人贡献——无论是发现 Bug、提出功能需求还是认领 roadmap 上的任务。提交变更前请先阅读贡献指南 HOW_TO_CONTRIBUTE.md。仓库同时提供了 commit 规范COMMIT_MESSAGE_CONVENTION.md、PR 模板PULL_REQUEST_TEMPLATE.md与 Issue 模板ISSUE_TEMPLATE根目录 package.json 中通过 husky commitlint lint-staged 对提交信息与暂存的 TS 文件做自动检查。总结Galacean Engine 以组件系统为核心通过galacean/engine单一 npm 入口聚合 core / math / loader / rhi-webgl 四大能力使开发者仅凭一段纯 TypeScript 代码即可在 WebGL 上运行包含光照、相机与模型的场景而本仓库的 pnpm workspace 结构、rollup 多形态构建、vitest 单测与 Playwright 视觉回归 e2e 体系则完整支撑了从源码阅读到本地构建、验证的开源协作链路。若你打算在 Web 或小程序平台开发 2D/3D 互动内容可以从npm install galacean/engine与本文示例起步再结合 e2e/case 与 examples/src 中的用例深入各子系统实现。赞分享图形学3D渲染游戏开发【免费下载链接】runtimeA typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.项目地址https://gitcode.com/gh_mirrors/ru/runtime点击查看免费下载相关推荐webgl-ui 开发指南用 React 360 在 WebGL 中构建 2D 界面webgl ui 开发指南用 React 360 在 WebGL 中构建 2D 界面 导读 webgl ui 是 React 360 仓库中一个独立、低层级的前端3D渲染cocos-engine 源码指南Cocos Creator 运行时引擎的架构特性与本地开发构建实战cocos engine 源码指南Cocos Creator 运行时引擎的架构特性与本地开发构建实战 Cocos Creator 是 Cocos 家族的新一代游戏开发图形学3D渲染GDevelop 开源游戏引擎全解析无代码 2D/3D/多人游戏开发、技术架构与源码级原理GDevelop 开源游戏引擎全解析无代码 2D/3D/多人游戏开发、技术架构与源码级原理 GDevelop 是一款 全功能、无代码、开源 的游戏开发软件可游戏开发桌面应用前端低代码上一篇Remix 3 的类型化路由怎么用 href 生成 URL 并读取 context.params下一篇如何给 Claude 写一个图像缩放zoom工具放大细节裁剪区域并放大分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考