尧图网页设计 
图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载Babylon.js Accessibilitybabylonjs/accessibility是官方无障碍扩展包其核心是一个HTML TwinHTML 孪生渲染器为场景中需要被感知的 3D 物体在 DOM 中生成对应的 HTML 孪生元素使原本只输出 Image 的canvas内容可以被屏幕阅读器逐条朗读并支持纯键盘完成点击等交互。读完本文你将掌握如何安装接入该包、通过IAccessibilityTag为节点与 GUI 控件添加语义描述、调用HTMLTwinRenderer.Render()生成无障碍树以及利用 ARIA 属性和事件处理器做深度定制。关联文档packages/public/umd/babylonjs-accessibility/readme.md包的真实实现位于 packages/tools/accessibility构建产物入口见 packages/public/babylonjs/accessibility/src/index.ts。为什么 WebGL 场景需要无障碍支持屏幕阅读器Screen Reader是面向盲人或低视力用户将屏幕内容转化为语音或盲文输出的辅助技术常见的有 Windows 自带 Narrator、macOS/iOS 的 VoiceOver以及 JAWS、NVDA 等第三方工具。这类用户往往不依赖显示器与鼠标而是通过键盘驱动屏幕阅读器朗读并操作页面。普通 2D 网页因为有语义化的 HTML 元素无障碍支持相对成熟但 WebGL 应用把 3D 场景整体画进一个canvas中屏幕阅读器只能读到一句笼统的 Image无法理解场景里有哪些物体、物体之间的关系。若不处理盲人与低视力用户将难以使用这类应用。Babylon.js Accessibility 包的解法就是为场景生成一套 HTML 孪生树每个你认为该被读到的节点或控件都在画布之后的 DOM 中拥有一个对应的 HTML 孪生元素屏幕阅读器朗读的是这套 DOM 树键盘交互也经由孪生元素转译回 Babylon.js 对象。安装与接入官方推荐在新项目中使用 ES6 包babylonjs/accessibility通过 npm 与核心包一并安装npm install babylonjs babylonjs-accessibility安装后即可在代码中引入渲染器并启动import * as ACCESSIBILITY from babylonjs/accessibility; // 为指定 scene 生成 HTML twin ACCESSIBILITY.HTMLTwinRenderer.Render(scene);HTMLTwinRenderer.Render()会紧跟在场景 canvas 元素之后创建一个div idaccessibility-host容器并在其中为每个可访问内容生成孪生元素。从源码看该方法是包的唯一入口类HTMLTwinRenderer的静态方法它内部通过 React 的createRoot(scene.getEngine().getRenderingCanvas())把宿主组件挂载到渲染画布上见 packages/tools/accessibility/src/HtmlTwin/htmlTwinRenderer.ts因此该包依赖 React 运行时。关于 UMD 分发包仓库中 packages/public/umd/babylonjs-accessibility 即为传统 UMD 构建babylonjs-accessibility其package.json声明了babylonjs/core、babylonjs/gui、React 类型等 peer 依赖可通过npm install babylonjs-accessibility使用脚本标签全局加载示例见 packages/public/umd/babylonjs-accessibility/readme.md。两种分发方式功能一致本文示例统一使用BABYLON/ACCESSIBILITY全局命名空间写法在 ES6 项目中替换为对应的 import 即可。用 IAccessibilityTag 给场景内容添加描述盲人与低视力用户听内容、用键盘交互因此首先要为场景中应该被感知的内容加上朗读文案这通过IAccessibilityTag完成——它定义在核心包 packages/dev/core/src/IAccessibilityTag.ts 中Node基类上也挂有accessibilityTag属性见 packages/dev/core/src/node.ts。let egg BABYLON.MeshBuilder.CreateSphere(Egg, {diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6}, scene); egg.accessibilityTag { description: An easter egg }要点并非场景中所有内容都应该可访问。装饰性的树木、UI 面板上的背景图等无关紧要的内容不应加 tag只对影响用户体验的内容添加。GUI 控件默认重要即使未显式指定IAccessibilityTag所有Control也会生成包含自身信息如按钮文本的孪生元素此时为控件指定 tag 可覆盖默认元数据例如用description覆盖按钮上原本显示的文本。NodeMesh / TransformNode默认不重要除非显式给它赋accessibilityTag否则不会进入孪生树。IAccessibilityTag的完整字段如下详见 packages/dev/core/src/IAccessibilityTag.ts字段类型说明descriptionstring节点的 alt 文本描述该节点是什么 / 做什么由屏幕阅读器朗读eventHandler{ [key in keyof HTMLElementEventMap]: (e?: Event) void }自定义交互事件直接应用到生成的 HTML 孪生元素上roleAcceptedRole覆盖孪生元素的 ARIA role如button、progressbar、dialog等完整列表见源码类型定义aria{ [key in AcceptedARIA]: any }覆盖孪生元素的 ARIA 属性如aria-valuemin、aria-live等完整列表见源码role与aria的合法取值并非任意字符串而是由源码中的联合类型严格约束AcceptedRole覆盖 MDN ARIA Roles 文档中的几十个角色AcceptedARIA覆盖常见的 ARIA 属性类型类型错误会在编译期直接报错可有效防止手写拼错属性名。生成孪生树HTMLTwinRenderer.Render()渲染器的工作方式是读取你通过IAccessibilityTag赋予场景内容的元数据为每个可访问内容生成 HTML 孪生元素屏幕阅读器朗读这些 HTML 元素同时孪生元素与 Babylon.js 对象内部保持连接使用户通过孪生元素也能操作背后的 3D 对象。ACCESSIBILITY.HTMLTwinRenderer.Render(scene);执行后 DOM 结构大致为div idaccessibility-host位于场景 canvas 之后内部按场景层级生成孪生元素如场景树div、节点项divGUI 项等——具体组件实现见 packages/tools/accessibility/src/HtmlTwin 目录下的htmlTwinSceneTree.tsx、htmlTwinNodeItem.ts、htmlTwinGUIItem.ts、htmlTwinHostComponent.tsx。Render()还接受一个可选的options参数其唯一选项为interface IHTMLTwinRendererOptions { /** 为 true 时所有 GUI 控件无论是否有 accessibility tag 都会加入孪生树为 false 时仅加入带 tag 的控件。默认为 true。 */ addAllControls: boolean; }该接口定义于 packages/tools/accessibility/src/HtmlTwin/htmlTwinRenderer.ts。当你希望严格只暴露带 tag 的控件时可这样调用ACCESSIBILITY.HTMLTwinRenderer.Render(scene, { addAllControls: false });交互支持让键盘也能点击部分场景内容是可交互的例如可点击Accessibility 包支持自动检测并迁移这些交互到孪生元素上Node 类型对象若你通过 Babylon.js 的ActionManager定义了交互包会自动检测并把事件应用到生成的孪生元素上用户即可用键盘在孪生元素上触发 click / 右键点击等操作进而触发 Babylon.js 对象上对应的动作。目前仅支持ACTION_OnPickTrigger、ACTION_OnLeftPickTrigger、ACTION_OnRightPickTrigger三种触发类型。Control 类型对象若你为onPointerClickObservable定义了观察者observer包同样会自动检测并应用到孪生元素上。如果需要自定义交互可在IAccessibilityTag的eventHandler字段中指定let egg BABYLON.MeshBuilder.CreateSphere(Egg, {diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6}, scene); egg.accessibilityTag { description: An easter egg, eventHandler: { onclick: yourFunction } }eventHandler的键类型为keyof HTMLElementEventMap因此除了onclick你还可以绑定onfocus、onkeydown等任意标准 HTML 元素事件从而完全接管孪生元素的交互行为。孪生元素的自动更新时机场景通常是动态的孪生树会自动随以下变化保持同步场景中新增 / 移除一个 NodeMesh 或 TransformNodeNode 的enabled状态变化从 Container 中新增 / 移除一个 ControlControl 的isVisible状态变化Node 或 Control 的IAccessibilityTag被赋值或重新赋值。也就是说运行时动态增删物体、显隐切换、无障碍标签变更都不需要你手动重建孪生树渲染器会监听这些事件自动更新 DOM 中的孪生元素。高级定制用 ARIA 属性和 Role 精细化控制如果你熟悉 Web 无障碍标准可以借助role与aria字段把某个孪生元素定制成任何想要的语义形态例如模拟一个带进度的进度条yourObject.accessibilityTag { description: An demo customized progressbar, role: progressbar, aria: { aria-valuemin: 0, aria-valuemax: 100, aria-valuenow: 0 } }务必注意ARIA 设计初衷是增强可访问性但错误使用反而有害——它不会自动让元素可交互或获得浏览器默认行为。例如把 role 设为progressbar并不会真的让它动起来你必须自己在脚本中模拟等价行为如随进度更新aria-valuenow。因此仅在确实需要覆盖默认行为时使用role/aria且必须承担在脚本中模拟等价浏览器行为的责任合法取值受源码类型约束编程时请参考 packages/dev/core/src/IAccessibilityTag.ts 中AcceptedRole与AcceptedARIA的完整清单避免拼写错误。小结Babylon.js Accessibility 包以HTML 孪生渲染器这一思路把不可达的 WebGL 画布内容映射为语义化 DOMIAccessibilityTag负责定义读什么HTMLTwinRenderer.Render()负责生成读的载体ActionManager / Observable 自动迁移与eventHandler负责怎么交互自动更新机制负责跟上场景变化ARIA 定制则满足专业无障碍场景的深度需求。三步接入即可让 3D 应用对屏幕阅读器用户友好给关键内容打 tag → 调用一次Render()→ 按需补充交互与 ARIA。可继续深入阅读实现源码 packages/tools/accessibility/src/HtmlTwin 以理解孪生树内部构造。赞分享图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载相关推荐Babylon.js Accessibility 包实战用 HTML Twin 渲染器为 3D 场景提供屏幕阅读器与键盘导航支持Babylon.js Accessibility 包实战用 HTML Twin 渲染器为 3D 场景提供屏幕阅读器与键盘导航支持 babylonjs/acc图形学游戏开发3D渲染Babylon.js 无障碍实战用 HTML Twin Renderer 让 3D 场景支持屏幕阅读器与键盘导航Babylon.js 无障碍实战用 HTML Twin Renderer 让 3D 场景支持屏幕阅读器与键盘导航 本指南以 packages/tools/ac图形学游戏开发3D渲染ContextMenu无障碍支持键盘导航与屏幕阅读器适配ContextMenu无障碍支持键盘导航与屏幕阅读器适配 引言 无障碍设计Accessibility简称a11y确保所有用户包括使用键盘导航和屏幕阅读前端UI组件低代码上一篇FaceFusion 完整指南3 步跑通第一次 AI 换脸下一篇抖音自动上传工具完整使用指南从零开始实现视频自动化发布创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Babylon.js Accessibility 无障碍包实战：用 HTML Twin 渲染器让 3D 场景适配屏幕阅读器与键盘导航
图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载Babylon.js Accessibilitybabylonjs/accessibility是官方无障碍扩展包其核心是一个HTML TwinHTML 孪生渲染器为场景中需要被感知的 3D 物体在 DOM 中生成对应的 HTML 孪生元素使原本只输出 Image 的canvas内容可以被屏幕阅读器逐条朗读并支持纯键盘完成点击等交互。读完本文你将掌握如何安装接入该包、通过IAccessibilityTag为节点与 GUI 控件添加语义描述、调用HTMLTwinRenderer.Render()生成无障碍树以及利用 ARIA 属性和事件处理器做深度定制。关联文档packages/public/umd/babylonjs-accessibility/readme.md包的真实实现位于 packages/tools/accessibility构建产物入口见 packages/public/babylonjs/accessibility/src/index.ts。为什么 WebGL 场景需要无障碍支持屏幕阅读器Screen Reader是面向盲人或低视力用户将屏幕内容转化为语音或盲文输出的辅助技术常见的有 Windows 自带 Narrator、macOS/iOS 的 VoiceOver以及 JAWS、NVDA 等第三方工具。这类用户往往不依赖显示器与鼠标而是通过键盘驱动屏幕阅读器朗读并操作页面。普通 2D 网页因为有语义化的 HTML 元素无障碍支持相对成熟但 WebGL 应用把 3D 场景整体画进一个canvas中屏幕阅读器只能读到一句笼统的 Image无法理解场景里有哪些物体、物体之间的关系。若不处理盲人与低视力用户将难以使用这类应用。Babylon.js Accessibility 包的解法就是为场景生成一套 HTML 孪生树每个你认为该被读到的节点或控件都在画布之后的 DOM 中拥有一个对应的 HTML 孪生元素屏幕阅读器朗读的是这套 DOM 树键盘交互也经由孪生元素转译回 Babylon.js 对象。安装与接入官方推荐在新项目中使用 ES6 包babylonjs/accessibility通过 npm 与核心包一并安装npm install babylonjs babylonjs-accessibility安装后即可在代码中引入渲染器并启动import * as ACCESSIBILITY from babylonjs/accessibility; // 为指定 scene 生成 HTML twin ACCESSIBILITY.HTMLTwinRenderer.Render(scene);HTMLTwinRenderer.Render()会紧跟在场景 canvas 元素之后创建一个div idaccessibility-host容器并在其中为每个可访问内容生成孪生元素。从源码看该方法是包的唯一入口类HTMLTwinRenderer的静态方法它内部通过 React 的createRoot(scene.getEngine().getRenderingCanvas())把宿主组件挂载到渲染画布上见 packages/tools/accessibility/src/HtmlTwin/htmlTwinRenderer.ts因此该包依赖 React 运行时。关于 UMD 分发包仓库中 packages/public/umd/babylonjs-accessibility 即为传统 UMD 构建babylonjs-accessibility其package.json声明了babylonjs/core、babylonjs/gui、React 类型等 peer 依赖可通过npm install babylonjs-accessibility使用脚本标签全局加载示例见 packages/public/umd/babylonjs-accessibility/readme.md。两种分发方式功能一致本文示例统一使用BABYLON/ACCESSIBILITY全局命名空间写法在 ES6 项目中替换为对应的 import 即可。用 IAccessibilityTag 给场景内容添加描述盲人与低视力用户听内容、用键盘交互因此首先要为场景中应该被感知的内容加上朗读文案这通过IAccessibilityTag完成——它定义在核心包 packages/dev/core/src/IAccessibilityTag.ts 中Node基类上也挂有accessibilityTag属性见 packages/dev/core/src/node.ts。let egg BABYLON.MeshBuilder.CreateSphere(Egg, {diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6}, scene); egg.accessibilityTag { description: An easter egg }要点并非场景中所有内容都应该可访问。装饰性的树木、UI 面板上的背景图等无关紧要的内容不应加 tag只对影响用户体验的内容添加。GUI 控件默认重要即使未显式指定IAccessibilityTag所有Control也会生成包含自身信息如按钮文本的孪生元素此时为控件指定 tag 可覆盖默认元数据例如用description覆盖按钮上原本显示的文本。NodeMesh / TransformNode默认不重要除非显式给它赋accessibilityTag否则不会进入孪生树。IAccessibilityTag的完整字段如下详见 packages/dev/core/src/IAccessibilityTag.ts字段类型说明descriptionstring节点的 alt 文本描述该节点是什么 / 做什么由屏幕阅读器朗读eventHandler{ [key in keyof HTMLElementEventMap]: (e?: Event) void }自定义交互事件直接应用到生成的 HTML 孪生元素上roleAcceptedRole覆盖孪生元素的 ARIA role如button、progressbar、dialog等完整列表见源码类型定义aria{ [key in AcceptedARIA]: any }覆盖孪生元素的 ARIA 属性如aria-valuemin、aria-live等完整列表见源码role与aria的合法取值并非任意字符串而是由源码中的联合类型严格约束AcceptedRole覆盖 MDN ARIA Roles 文档中的几十个角色AcceptedARIA覆盖常见的 ARIA 属性类型类型错误会在编译期直接报错可有效防止手写拼错属性名。生成孪生树HTMLTwinRenderer.Render()渲染器的工作方式是读取你通过IAccessibilityTag赋予场景内容的元数据为每个可访问内容生成 HTML 孪生元素屏幕阅读器朗读这些 HTML 元素同时孪生元素与 Babylon.js 对象内部保持连接使用户通过孪生元素也能操作背后的 3D 对象。ACCESSIBILITY.HTMLTwinRenderer.Render(scene);执行后 DOM 结构大致为div idaccessibility-host位于场景 canvas 之后内部按场景层级生成孪生元素如场景树div、节点项divGUI 项等——具体组件实现见 packages/tools/accessibility/src/HtmlTwin 目录下的htmlTwinSceneTree.tsx、htmlTwinNodeItem.ts、htmlTwinGUIItem.ts、htmlTwinHostComponent.tsx。Render()还接受一个可选的options参数其唯一选项为interface IHTMLTwinRendererOptions { /** 为 true 时所有 GUI 控件无论是否有 accessibility tag 都会加入孪生树为 false 时仅加入带 tag 的控件。默认为 true。 */ addAllControls: boolean; }该接口定义于 packages/tools/accessibility/src/HtmlTwin/htmlTwinRenderer.ts。当你希望严格只暴露带 tag 的控件时可这样调用ACCESSIBILITY.HTMLTwinRenderer.Render(scene, { addAllControls: false });交互支持让键盘也能点击部分场景内容是可交互的例如可点击Accessibility 包支持自动检测并迁移这些交互到孪生元素上Node 类型对象若你通过 Babylon.js 的ActionManager定义了交互包会自动检测并把事件应用到生成的孪生元素上用户即可用键盘在孪生元素上触发 click / 右键点击等操作进而触发 Babylon.js 对象上对应的动作。目前仅支持ACTION_OnPickTrigger、ACTION_OnLeftPickTrigger、ACTION_OnRightPickTrigger三种触发类型。Control 类型对象若你为onPointerClickObservable定义了观察者observer包同样会自动检测并应用到孪生元素上。如果需要自定义交互可在IAccessibilityTag的eventHandler字段中指定let egg BABYLON.MeshBuilder.CreateSphere(Egg, {diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6}, scene); egg.accessibilityTag { description: An easter egg, eventHandler: { onclick: yourFunction } }eventHandler的键类型为keyof HTMLElementEventMap因此除了onclick你还可以绑定onfocus、onkeydown等任意标准 HTML 元素事件从而完全接管孪生元素的交互行为。孪生元素的自动更新时机场景通常是动态的孪生树会自动随以下变化保持同步场景中新增 / 移除一个 NodeMesh 或 TransformNodeNode 的enabled状态变化从 Container 中新增 / 移除一个 ControlControl 的isVisible状态变化Node 或 Control 的IAccessibilityTag被赋值或重新赋值。也就是说运行时动态增删物体、显隐切换、无障碍标签变更都不需要你手动重建孪生树渲染器会监听这些事件自动更新 DOM 中的孪生元素。高级定制用 ARIA 属性和 Role 精细化控制如果你熟悉 Web 无障碍标准可以借助role与aria字段把某个孪生元素定制成任何想要的语义形态例如模拟一个带进度的进度条yourObject.accessibilityTag { description: An demo customized progressbar, role: progressbar, aria: { aria-valuemin: 0, aria-valuemax: 100, aria-valuenow: 0 } }务必注意ARIA 设计初衷是增强可访问性但错误使用反而有害——它不会自动让元素可交互或获得浏览器默认行为。例如把 role 设为progressbar并不会真的让它动起来你必须自己在脚本中模拟等价行为如随进度更新aria-valuenow。因此仅在确实需要覆盖默认行为时使用role/aria且必须承担在脚本中模拟等价浏览器行为的责任合法取值受源码类型约束编程时请参考 packages/dev/core/src/IAccessibilityTag.ts 中AcceptedRole与AcceptedARIA的完整清单避免拼写错误。小结Babylon.js Accessibility 包以HTML 孪生渲染器这一思路把不可达的 WebGL 画布内容映射为语义化 DOMIAccessibilityTag负责定义读什么HTMLTwinRenderer.Render()负责生成读的载体ActionManager / Observable 自动迁移与eventHandler负责怎么交互自动更新机制负责跟上场景变化ARIA 定制则满足专业无障碍场景的深度需求。三步接入即可让 3D 应用对屏幕阅读器用户友好给关键内容打 tag → 调用一次Render()→ 按需补充交互与 ARIA。可继续深入阅读实现源码 packages/tools/accessibility/src/HtmlTwin 以理解孪生树内部构造。赞分享图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载相关推荐Babylon.js Accessibility 包实战用 HTML Twin 渲染器为 3D 场景提供屏幕阅读器与键盘导航支持Babylon.js Accessibility 包实战用 HTML Twin 渲染器为 3D 场景提供屏幕阅读器与键盘导航支持 babylonjs/acc图形学游戏开发3D渲染Babylon.js 无障碍实战用 HTML Twin Renderer 让 3D 场景支持屏幕阅读器与键盘导航Babylon.js 无障碍实战用 HTML Twin Renderer 让 3D 场景支持屏幕阅读器与键盘导航 本指南以 packages/tools/ac图形学游戏开发3D渲染ContextMenu无障碍支持键盘导航与屏幕阅读器适配ContextMenu无障碍支持键盘导航与屏幕阅读器适配 引言 无障碍设计Accessibility简称a11y确保所有用户包括使用键盘导航和屏幕阅读前端UI组件低代码上一篇FaceFusion 完整指南3 步跑通第一次 AI 换脸下一篇抖音自动上传工具完整使用指南从零开始实现视频自动化发布创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考