游戏开发图形学【免费下载链接】turbulenz_engineTurbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.项目地址https://gitcode.com/gh_mirrors/tu/turbulenz_engine点击查看免费下载Turbulenz SDK 0.7.0 是 Turbulenz Engine Installer 与 SDK 组件的一次联合更新核心围绕 JavaScript API 的参数排序一致性、渲染器与渲染调度架构的升级展开。本文基于 release_notes_0.7.0.rst 完整梳理该版本的新特性、破坏性变更与已知问题并结合当前仓库 tslib 源码验证各项 API 的实际实现帮助开发者在升级到 0.7.0 时准确迁移旧代码、理解 DrawParameters 与多渲染 Pass 的新渲染模型。版本概览与运行环境要求Turbulenz SDK 0.7.0 同时更新了 Engine Installer 与 SDK 两个组件。该版本的显著变化集中在三方面JavaScript API 参数排序一致性改进统一了设备Devices、管理器Managers、参数Parameters在构造函数与工厂方法中的传参顺序渲染器与调度dispatching架构升级引入DrawParameters概念与多渲染 Passmultiple render passes支持自定义 Renderable 支持渲染器变更后自定义Renderables可以采用与GeometryInstance类似的 API 接入渲染管线local.turbulenz 功能增强游戏指标Game Metrics改为 JSON 格式记录。环境要求Requirements官方在发布说明中列出的运行环境要求如下类别要求用途说明必备Python 2.6.5SDK 构建/部署工具链的运行时详见 scripts/utils.py 等 Python 工具脚本必备Turbulenz Engine Installer 0.7.0提供浏览器插件/原生引擎组件与 SDK 版本严格对应可选Java 1.4仅在使用 YUI Compressor 压缩 JavaScript 时需要可选PDF 阅读器阅读随附文档新特性详解New FeaturesSceneNode.enableHierarchy()层级式禁用节点SceneNode新增enableHierarchy()方法用于递归启用或禁用节点树。源码实现在 tslib/scenenode.tsenableHierarchy(enabled) { this.setDisabled(!enabled); var children this.children; if (children) { var numChildren children.length; for (var c 0; c numChildren; c 1) { children[c].enableHierarchy(enabled); } } }可以看到其内部通过setDisabled(!enabled)设置当前节点的disabled状态并递归遍历children将启用/禁用状态传播到整棵子树。这一方法在引擎内部被广泛使用例如 physicsmanager.ts 中PhysicsManager.enableHierarchy(sceneNode, enabled)会先保存节点的原始禁用状态再递归处理子节点确保物理模拟与场景节点状态的联动scene.ts 在场景加载/清理时也会调用node.enableHierarchy(false)关闭旧节点。从使用角度看enableHierarchy(false)等价于同时调用整棵子树的setDisabled(true)常用于切换关卡、隐藏/显示复杂模型组等场景比逐个节点设置状态更高效。Scene.load() 新增可选 disabled 标志Scene.load()的参数新增可选的disabled标志用于控制加载后的节点初始状态。在 tslib/scene.ts 中loadNodes从loadParams读取var disableNodes loadParams.disabled;并在 tslib/scene.ts 中根据该标志决定新加载节点的初始禁用状态if ((this.disabled || baseNode.disabled) (disableNodes ! false)) { node.disabled true; }这一特性的价值在于开发者可以在场景数据尚未完全就绪如纹理、动画尚未加载完成时先以禁用状态载入场景避免渲染半成品画面待资源就绪后再调用enableHierarchy(true)统一启用。MathDevice 内置 AABB 对象MathDevice现在包含一个 AABBAxis-Aligned Bounding Box轴对齐包围盒对象使碰撞检测、剔除等需要包围盒运算的模块可以直接通过数学设备访问 AABB 相关函数。当前仓库中 tslib/webgl/mathdevice.ts 暴露了完整的 AABB 数学函数族例如aabbBuild/aabbBuildEmpty构建包围盒aabbCopy、aabbSet、aabbIsEmpty拷贝、设置与判空aabbMin/aabbMax提取包围盒最小/最大角点aabbGetCenterAndHalf获取中心点与半尺寸aabbIsInsidePlanes/aabbIsFullyInsidePlanes包围盒与平面对相交测试是视锥剔除frustum culling的核心工具如 scene.ts 中isInsidePlanesAABB(node.worldExtents, frustumPlanes)的用法。GraphicsDevice.setStream() 新增 offset 参数GraphicsDevice.setStream()新增可选的offset参数允许从顶点缓冲的任意偏移处开始绑定属性流为顶点布局更灵活的自定义几何提供支持。实现在 tslib/webgl/graphicsdevice.tssetStream(vertexBuffer: VertexBuffer, semantics: Semantics, offset?: number) { if (offset) { offset * (WebGLVertexBuffervertexBuffer)._strideInBytes; } else { offset 0; } this.bindVertexBuffer((WebGLVertexBuffervertexBuffer)._glBuffer); this._attributeMask | (WebGLVertexBuffervertexBuffer).bindAttributesCached((WebGLSemanticssemantics), offset); }注意实现细节offset的单位是顶点数而非字节数内部会乘上顶点缓冲的_strideInBytes换算成字节偏移后再绑定属性。渲染器内部的绘制路径graphicsdevice.ts正是通过这一机制从 DrawParameters 中取出缓冲、语义与偏移进行绑定。Observer观察者模式的官方实现0.7.0 新增了观察者模式Observer pattern的官方实现源码见 tslib/observer.ts。其 API 包括Observer.create()静态工厂方法创建新实例subscribe(subscriber)订阅回调自动去重unsubscribe(subscriber)退订回调unsubscribeAll()清空全部订阅者notify(a0, ..., a11)通知所有订阅者支持最多 12 个参数透传。值得注意的两个实现细节notify使用subscribers[index].apply(null, arguments)调用订阅者因此订阅回调中的this为 null参数以函数实参形式传入notify在遍历时动态检测subscribers.length变化if (subscribers.length length) index 1;因此订阅者在回调中退订自己是安全的不会产生数组越界或跳号问题。该实现可作为引擎内部事件解耦的基础设施也是理解后续版本事件系统演进的起点。API 一致性参数排序标准化Parameter Ordering Standardization0.7.0 最影响开发者日常编码的变更是全面标准化了 API 的参数顺序。官方给出统一格式Turbulenz Engine Devices Graphics Device Maths Device Input Device Physics Device Sound Device ... Managers Texture Manager Shader Manager Effect Manager ... Parameters Custom parameters ... ErrorCallback Log即参数按照Engine → Devices图形、数学、输入、物理、声音…→ Managers纹理、着色器、特效…→ Parameters → 自定义参数…、ErrorCallback、Log的固定次序排列。Devices 和 Managers 内部也各自遵循固定子顺序。参数排序调整实例官方列出的典型调整如下API旧顺序新顺序CameraController.create(camera, graphicsDevice, inputDevice, log)(graphicsDevice, inputDevice, camera, log)CharacterController.create(matrix, graphicsDevice, inputDevice, physicsDevice, params, log)(graphicsDevice, inputDevice, physicsDevice, matrix, params, log)loadMaterial(materialName, material, graphicsDevice, textureManager, effectManager)(graphicsDevice, textureManager, effectManager, materialName, material)可见旧代码中所有涉及 Devices/Managers 的调用都必须按新顺序重排尤其是CameraController.create和CharacterController.create这类高频调用升级时需要逐一核对。参数移除与函数签名简化loadingScreen.render()的参数被移除签名从render(graphicsDevice, backgroundAlpha, textureAlpha)简化为render(backgroundAlpha, textureAlpha)。当前仓库 tslib/loadingscreen.ts 的实现与新版签名一致——内部通过this.gd直接获取图形设备不再需要外部传入render(backgroundAlpha, textureAlpha) { var gd this.gd; var screenWidth gd.width; var screenHeight gd.height; ... }通用重命名General Renaming旧 API新 API说明scene.findLightscene.getLight获取场景中指定名称的光源见 scene.tsscene.findMaterialscene.getMaterial获取场景中的材质见 scene.tsscene.findMaterialNamescene.getMaterialName获取节点对应材质名称fontManager.releasefontManager.destroy销毁字体管理器并释放共享缓冲与纹理资源见 fontmanager.ts移除项Removedscene.findEffectName被彻底移除不再提供替代 API。旧代码中依赖该方法的逻辑需要改用scene.getMaterialName或直接管理材质与特效的映射关系。渲染器重构DrawParameters 与多渲染 Pass0.7.0 渲染器变更的核心是引入DrawParameters与多渲染 Pass这也是本版本最值得深入理解的架构升级。DrawParameters 是什么DrawParameters是渲染器在绘制一个 Renderable 时所需的全部状态封装包含顶点缓冲VertexBuffer、索引缓冲IndexBuffer、语义Semantics、偏移offset以及渲染 Pass 信息等。它由graphicsDevice.setStream(vertexBuffer, semantics, offset)与setPass(pass)等底层调用消费在 tslib/webgl/graphicsdevice.ts、tslib/capturegraphicsdevice.ts 等绘制路径中统一以drawParameters[v]数组形式被解析绑定。DrawParameters的引入把「绘制一个对象需要什么数据」从 Renderable 内部实现中剥离出来使得渲染器可以对不同几何类型采用统一的分发接口。多渲染 Pass 机制渲染 PassRender Pass封装了一组渲染状态render states与着色器参数通过GraphicsDevice.setPass(pass)应用实现在 tslib/webgl/graphicsdevice.tssetPass(pass) { var gl this._gl; var state this._state; // Set renderstates var renderStatesSet pass.statesSet; var renderStates pass.states; var numRenderStates renderStates.length; for (r 0; r numRenderStates; r 1) { renderState renderStates[r]; renderState.set.apply(renderState, renderState.values); } // Reset previous renderstates ... }渲染器在绘制帧时会先setPass(passes[0])切换到首个 Pass再逐帧应用 Pass 参数graphicsdevice.ts。多 Pass 渲染让同一个对象可以分多次绘制如先深度 Pass、再颜色 Pass是后续阴影映射、延迟渲染等技术的基础。自定义 Renderables与 GeometryInstance 一致的 API渲染器变更后自定义Renderables只需遵循与GeometryInstance类似的接口——提供geometryType与 DrawParameters 数据——即可接入渲染管线。从源码看渲染器通过renderable.geometryType分派绘制路径例如 scene.ts 对renderable.geometryType rigid的判定、defaultrendering.ts 与 simplerendering.ts 对skinned类型的判定。这一设计让开发者可以自定义几何类型并挂接到既有渲染调度中而无需修改渲染器核心显著降低了引擎的扩展门槛。ForwardRenderer 修复本版本修复了 ForwardRenderer 的两个问题无法配合 flares光晕工作以及在没有环境光ambient light时渲染为白色的问题。这保证了前向渲染路径在环境光缺失时也能输出正确的黑/暗色结果而不是异常的全白画面。EffectManager 重构Effect 类与自定义几何类型EffectManager的 API 在本版本被重做以支持自定义几何类型custom geometry types。核心变化是新增Effect类它将一个geometryType映射到一个 prepare 对象即着色器准备/参数封装对象。当前仓库 tslib/effectmanager.ts 的实现结构如下effect.geometryType {}; add(geometryType: string, prepareObject) { this.geometryType[geometryType] prepareObject; } remove(geometryType: string) { delete this.geometryType[geometryType]; } get(geometryType: string): EffectPrepareObject { return this.geometryType[geometryType]; }渲染时通过renderable.geometryType查找对应的 prepare 对象var prepareObject this.geometryType[renderable.geometryType]; ... debug.abort(Unsupported or missing geometryType);即每个 Renderable 声明自己的geometryType如内置几何的rigid、骨骼动画的skinned、粒子系统的ParticleSystem见 particlesystem.tsEffectManager 依据该类型分派对应的 prepare 对象完成着色器参数准备。旧代码中的EffectManager.createEffect调用需按EffectManager文档的 effect 注册章节迁移到新的Effect注册流程。这一重构与自定义 Renderable 特性相辅相成新增一种几何类型 定义geometryType 为它注册一个Effect。local.turbulenz 变更指标 JSON 化local.turbulenz本地服务器的 Game Metrics 记录与存储格式从 CSV 改为 JSON并有两个配套变化历史数据兼容性已存在的 CSV 格式 metrics 会话不会出现在本地服务器的 metrics 视图中即旧的 CSV 会话记录不再可读逻辑前移Metrics 的分组、排序以及 Asset List 的排序逻辑从服务器端 controller 迁移到 JavaScript 客户端侧实现。对开发者而言升级后本地指标数据将以 JSON 呈现便于程序化解析同时意味着任何依赖旧 CSV 格式的自定义工具需要相应升级。已知问题与兼容性注意事项Known Issues0.7.0 发布说明列出的已知问题对升级决策有直接影响整理如下MathDevice 忽略数组作为目标参数MathDevice将 JavaScript 数组作为 destination 参数时会忽略它如同未提供 destination 一样。使用MathDevice数学函数时应避免传入普通数组作为dstCPU 要求 SSE2引擎需要支持 SSE2 指令集的 CPUGPU 要求 GLSL着色器支持需要支持 GLSLOpenGL Shading Language的 GPUSDK HTML 帮助搜索在 Chrome 上不可用对应 Chromium 已知缺陷工具与本地服务器并发问题同时运行 Turbulenz 工具与 Local Server 可能触发simplejson_speedups.pyd的访问错误官方建议运行工具前先关闭 Local Server高负载 JS 可能卡死浏览器 UI运行高强度 JavaScript 应用如multiple animations示例时部分浏览器如 Safari可能锁死界面需手动终止进程官方建议使用 Firefox并逐步加大负载浏览器兼容矩阵development模式下 IE 6/7/8 与 Opera 10.X 无法正常支持示例引擎不兼容release模式下 IE 6 样式不兼容、Opera 10.X 控件功能不完整development模式下 Chrome 受性能限制不使用 Turbulenz JavaScript 引擎时。升级迁移清单综合以上变更从 0.6.x 升级到 0.7.0 的开发者应重点执行以下迁移动作重排参数顺序按「Engine → Devices → Managers → Parameters → 自定义参数…→ ErrorCallback → Log」的标准顺序核对所有*Controller.create、loadMaterial等调用更新渲染相关调用loadingScreen.render去掉graphicsDevice参数替换重命名 APIscene.findLight/findMaterial/findMaterialName→getLight/getMaterial/getMaterialNamefontManager.release→fontManager.destroy删除对scene.findEffectName的引用迁移 EffectManager 用法按新Effect注册流程替换createEffect调用为自定义几何类型注册Effect评估自定义 Renderable 改造如使用了自定义渲染对象可基于 DrawParameters 与多 Pass 接口重写使其与GeometryInstanceAPI 对齐注意环境约束确认 CPU 支持 SSE2、GPU 支持 GLSL、Python 2.6.5 与 Engine Installer 0.7.0 版本配套并按已知问题规避浏览器兼容性与工具并发风险。总体而言Turbulenz SDK 0.7.0 是一次面向「可扩展渲染架构」的奠基性更新参数排序标准化降低了 API 认知成本DrawParameters 多渲染 Pass 自定义 Renderable 的组合则为后续更复杂的光照与渲染特性铺平了道路。本文涉及的所有实现细节均可在当前仓库的 tslib 目录下对应源码中验证。赞分享游戏开发图形学【免费下载链接】turbulenz_engineTurbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.项目地址https://gitcode.com/gh_mirrors/tu/turbulenz_engine点击查看免费下载相关推荐Turbulenz SDK 0.17.0 版本解读Canvas 2D 渲染、InputDevice 重构与游戏本地化支持Turbulenz SDK 0.17.0 版本解读Canvas 2D 渲染、InputDevice 重构与游戏本地化支持 本指南基于 Turbulenz 开源游戏开发图形学Turbulenz Engine SDK 0.8.0 版本解析Morph 变形示例、声音归档加载与原生 DrawParameters 的演进Turbulenz Engine SDK 0.8.0 版本解析Morph 变形示例、声音归档加载与原生 DrawParameters 的演进 本文基于 Tur游戏开发图形学Turbulenz 引擎 DrawParameters 对象详解批量绘制状态封装与 GraphicsDevice.drawArray 渲染管线Turbulenz 引擎 DrawParameters 对象详解批量绘制状态封装与 GraphicsDevice.drawArray 渲染管线 导读 Draw游戏开发图形学上一篇shadcn-vue 手动安装完全指南从零搭建 Tailwind CSS v4 组件环境下一篇TAO事件循环完全解析从入门到精通的10个技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考