Babylon.js es un framework completo para crear juegos 3D con la ayuda de HTML5 y WebGL basado 100% en JavaScript, desarrollado por programadores de Microsoft. Funciona adecuadamente en Firefox y Chrome y es compatible con las siguientes características:
- Gráficas completas de escenas, luz, cámaras, materiales y texturas
- Motor de colisiones
- Selección de escenas
- Antialiasing
- Motor de animaciones
- Sistemas de partículas
- Sprites y capas 2D
- Motores de optimización
- Materiales estándar a nivel pixel
- Niebla
- Blending alpha
- Pruebas alpha
- Billboarding
- Modo de pantalla completa
- Mapas de sombras y mapas de variación de sombras
- Rendereo de texturas
- Texturas dinámicas (canvas)
- Texturas de video
- Cámaras (perspectivas y ortogonalidad)
- Clonación de mesh
- Meshes dinámicos
- Mapas de altura
- Las escenas de Babylon puede convertirse en .OBJ, .FBX, .MXB
- Exporta a Blender
A continuación tenéis un vídeo curso bien completo muy bien explicado en español de Oscar Uh Pérez (Develoteca) que nos da todos los conocimientos necesarios para meter las manos en la masa.
Tambien os dejo unos tutoriales interesantes de Julian Chenard para empezar con Balylon.js en el siguiente enlace: http://www.pixelcodr.com/
Más tutoriales: http://www.babylonjs-playground.com/
Repository
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
https://github.com/BabylonJS/Babylon.js
3,675 forks.
25,901 stars.
19 open issues.
Recent commits:
- Feat: Stream Gaussian Splatting LOD as a part of a compound mesh (#18774)This PR lets a PlayCanvas-style SOG LOD stream(`GaussianSplattingStream`) live as a **part of a`GaussianSplattingCompoundMesh`**, so streamed splats are depth-sortedand drawn together with the compound's static parts in a **singleinterleaved pass** — instead of as a separate mesh, worker, and drawcall. The streaming engine keeps running its own LOD/eviction/relayoutloop against a reserved region of the compound's shared atlas.## What's included- **Hosted streaming** — `compound.reserveStreamingPart(…)` reserves arow-aligned region of the shared atlas; the stream GPU-decodes into itat a base offset. Added via `AddGaussianSplattingStreamPart(Async)`,returning the same `GaussianSplattingPartProxyMesh` as a static part(place / frame / gizmo / `removePart` all work identically).- **Single sort/draw** — per-part active-LOD ranges feed one globalinterval union; no sort-worker or render-shader changes were needed.- **Full parity** — multiple streaming parts, in-atlas memory-budgetedeviction, GPU defrag/relayout, and coexistence with static parts, allrow-band-scoped so a shared static part is byte-identical across arelayout.- **Voxel-IBL shadows** for streamed splats (rotation/scale decoded intoa shared half-float MRT).- **Higher-order SH** for streamed splats (baked into a sharedpacked-u32 SH atlas; reuses the existing draw path). Includes a WGSLprocessor fix to allow integer render targets on WebGPU.- **Memory reclamation** — `removePart` tombstones a streaming region(cheap); `compactAtlas()` relocates survivors and frees the reclaimed rows.## Implementation highlights- Shared MRT atlas is simultaneously an FBO attachment andCPU-sub-uploadable on WebGL2 + WebGPU (no engine usage-flag changeneeded).- SOG up-axis lives on the part proxy's world matrix, so it composeswith the compound transform.- Streaming regions are GPU-authoritative: atlas grow/compaction backsup and restores their texels and CPU sort positions via the workbuffer's copy shaders.## Testing- **Unit** (NullEngine): reservation/row-alignment, interval-union math,capacity + SH validation, tombstone/compaction (incl. stale-rangeregression), removed-handle invalidation, WGSL integer detection.- **Visualization** (WebGL2 + WebGPU): `Gaussian Splatting LODCOMPOUND`, `Gaussian Splatting LOD SH and IBL Shadows` with committedreference images.- Cross-backend GPU spikes for Sigma reconstruction, relayout/compactionbyte-consistency, IBL shadows, and SH; downstream viewer Playwrightsuite green.## Notes`GaussianSplattingStream` remains usable standalone (unchanged publicAPI); hosted mode is the new path. Requires WebGL2/WebGPU (float/integerrender targets).———Co-authored-by: Raymond Fei <[email protected]>Co-authored-by: Claude Opus 4.8 <[email protected]>, GitHub
- Fix: texture view leak on WebGPU backend (#18784)We observed this issue during profiling:`_startRenderTargetRenderPass` called raw `GPUTexture.createView()` onevery render-target bind (~1,800/sec), with no caching, forcolor/MSAA/depth attachments, and with no `destroy()`. The native viewobjects (subresource descriptors, not pixel data) pile up faster thanthey're reclaimed: an unbounded, GC-shaped leak in Dawn/driver's memory.## FixAdded `WebGPUCacheTextureView`: a `WeakMap<GPUTexture,Map<descriptorKey, GPUTextureView>>` cache. Keying on the live textureobject makes invalidation automatic (old texture → unreachable → cacheentry collected with it). Wired into the 6 attachment call sites in`_startRenderTargetRenderPass`. Mirrors the existingsampler/bind-group/pipeline cache pattern.## Testing- New unit tests for the cache (hit/miss, invalidation, per-textureisolation) — passing———Co-authored-by: Raymond Fei <[email protected]>, GitHub
- Enable Babylon Lite device-lost recovery in the Lite Viewer (#18785)## WhatWires the Lite Viewer into Babylon Lite's WebGPU device-lost recovery,and bumps `@babylonjs/lite` to `1.18.0`.## WhyWhen the WebGPU device is lost — GPU reset, driver update, or the tabbeing backgrounded under memory pressure — every GPU resource in thescene is invalidated. Until now the Lite Viewer had no response to this:rendering continued against the dead device, so the canvas froze on itslast frame or went blank, and the only way out was a full page reload.## HowBabylon Lite owns the recovery machinery, so the Viewer side isdeliberately tiny:- **`enableDeviceLostSceneRecovery(engine, …)` in the constructor**,immediately after `super()` and before `createSceneContext`. This is theearliest point at which the engine exists and no Viewer-owned GPUresources have been created yet, so recovery is armed before anything itwould need to rebuild can be allocated. Putting it in the constructorrather than in `CreateViewerForCanvas` also covers callers thatconstruct `new Viewer(engine, options)` directly.- **`handle.disable()` at the start of `dispose()`**, before`stopEngine` and scene teardown, so a loss racing disposal can't kickoff a rebuild against resources that are being torn down.- **`onRecoveryFailed` routes to the existing`ViewerBaseOptions.onFaulted`**, so an unrecoverable loss surfacesthrough the same path as other fatal viewer errors. Falls back to`Logger.Error` when no handler is supplied.Recovery itself is entirely Lite-side: it acquires the replacementdevice, reconfigures the surface, rebuilds scene-owned GPU resources(materials, textures, environment, shadows, and loader-owned backgroundrenderables), and resumes rendering. The Viewer holds no recovery stateand does no teardown or sequencing of its own.## Why 1.18.0 specifically`1.18.0` adds the rebuild path for loader-owned `.env` backgroundrenderables (skybox/ground) —[BabylonJS/Babylon-Lite#535](https://github.com/BabylonJS/Babylon-Lite/pull/535).Without it, recovery in a Viewer scene using `environment-skybox` failswith:> Device-lost Scene recovery does not support loadEnvironmentbackgrounds## VerificationTested in-browser against the published `1.18.0` with an environment-litPBR model plus ESM directional shadows, forcing a real device loss:| Check | Result || — | — || Replacement device installed | ✅ || Post-recovery frames rendered | 60 || Uncaptured WebGPU validation errors | 0 || `onFaulted` invoked | never || Environment + shadow generator after recovery | preserved || Post-recovery frame vs. pre-loss frame | pixel-identical (mean absdiff `0`) |The loader-env background renderable — the exact resource `1.18.0` fixes— is present both before and after recovery, confirming the rebuild pathis exercised rather than skipped.`tsc -b` and ESLint are clean on the merged tree.## NotesNo new tests here: device-lost recovery is covered by Lite's own testsuite, and forcing a real device loss in Viewer CI would risk flakinessdepending on the test GPU.———Co-authored-by: Copilot App <[email protected]>Copilot-Session: c8b37e98-7f0c-4991-ad1e-1440e390d37d, GitHub
- KHR_interactivity: importer update to the latest spec (refs, events, pointer selection, math ops) (#18615)# KHR_interactivity: importer update to the latest spec (refs, events,pointer selection, math ops)## SummaryThis PR brings the `KHR_interactivity` glTF importer up to date with thelatest Khronos specification and substantially expands the Babylon.jsFlowGraph runtime that backs it. It implements the opaque-reference(`ref`) value type and the read-only object-model accessors, adds theevent-reference and event-cancellation features, wires up node **pointerselection / hover / visibility** events, and adds several new `math/*`operations. It also fixes a number of FlowGraph runtime issues uncoveredwhile validating against the Khronos `glTF-Test-Assets-Interactivity`suite.The importer parses the glTF interactivity JSON into a serializedFlowGraph description, which the FlowGraph system then instantiates.Work spans both sides: the loader-side mapper/parser **and** the coreFlowGraph blocks/runtime.> Draft: opened for visibility and early review. See **Status /remaining work** at the bottom for what is still in progress.## Object model & the reference (`ref`) system- **Opaque references (`ref`)**: implemented the spec's opaque-referencevalue type end-to-end. References are represented as JSON-Pointer-shapedstrings (empty string = null) and flow through `ref/eq`, `pointer/get`,and the event/selection outputs.- **`ref/eq`**: reference equality with trailing-slash normalization so`/nodes/3` and `/nodes/3/` compare equal.- **Read-only object-model accessors** (`objectModelMapping.ts`): theread-only glTF tree accessors return `ref` strings, and Babylon-objectreferences are resolved back to scene objects when used in pointertemplates.- **Composite path converter**: a new `compositePathToObjectConverter`resolves both the glTF namespace (`/nodes/…`, `/materials/…`,`/animations/…`) and the new Babylon scene namespace(`babylonScenePathToObjectConverter`).- **Relative pointer templates**: `flowGraphPathConverterComponent` nowbakes the static ref prefix into relative pointer templates and supportsdynamic refs (e.g. `/nodes/{nodeRef}/translation`), includingtrailing-slash and animation-pointer resolution.- Ref-typed **animation** refs are handled in `pointer/get` and thearray-index block.## Events- **Event references**: `event/onStart`, `event/onTick`, and`event/receive` now expose the spec's `event` (`ref`) output socket viaa shared `flowGraphEventReference` helper. References are stable perevent so two nodes referring to the same event compare equal.- **`event/stopPropagation`**: new `FlowGraphStopEventPropagationBlock`plus a cancellable dispatch path on `FlowGraphCoordinator` (anevent-dispatch stack that bridges the in-flight `EventState`), so areceiver can cancel the remaining handlers of the custom event it iscurrently handling.- **`event/onSelect`** (`KHR_node_selectability`): node click/selectionnow drives interactivity. The configured `nodeIndex` is resolved to aBabylon mesh through the glTF data provider + array-index composition(the same pattern `animation/start` uses) and fed into`FlowGraphMeshPickEventBlock`. Outputs map `selectedNode`→picked mesh,`selectionPoint`→picked point, `selectionRayOrigin`→pick origin,`controllerIndex`→pointer id.- **`event/onHoverIn` / `event/onHoverOut`** (`KHR_node_hoverability`):expose the `hoveredNode` ref output.- **`KHR_node_visibility`**: `visible: false` is now applied toprimitive child meshes as well, not just the parent transform node.## Math operations- **`math/rgbToOkLCh` / `math/rgbFromOkLCh`**: linear sRGB ↔ OkLChconversion using Björn Ottosson's Oklab matrices (the conversion adoptedby CSS Color Level 4), with the OkLCh polar form (`C = hypot(a,b)`, `h =atan2(b,a)`, hue in radians). New `FlowGraphRGBToOkLChBlock` /`FlowGraphRGBFromOkLChBlock` (3 scalar inputs → 3 scalar outputs).- **`math/Tau`**: the `2π` constant.- **`math/smoothStep`**: component-wise smooth interpolation.- **`math/quatSlerp`**: quaternion spherical-linear interpolation.## FlowGraph runtime fixes- **`math/random` freshness**: per the spec, an output value socket mustbe re-evaluated on a new flow-socket activation but retained betweenaccesses within the same activation. The execution-id is now advanced**before** a node executes (in `flowGraphSignalConnection`) so each flowactivation — including loop self-activations — observes a fresh frame,while value caching within a single block execution still holds.- **`flow/for` bound**: the loop now caps on the iteration **count**(not the index value), so large bounded loops run to completion; the capwas raised accordingly.- **`FlowGraphArrayIndexBlock`**: parses JSON-Pointer-shaped `ref`strings as indices, and accepts an optional `config.index` so theimporter can route a static configuration value (e.g. a selectability`nodeIndex`) into it. Backward compatible with callers that feed `index`as a value input.- **`type/intToFloat`**: tolerates plain-number inputs in addition to`FlowGraphInteger`.- **Unsupported operations** (spec §3.2.4): unknown ops are turned intono-op nodes and their dangling connections are dropped with a warninginstead of throwing, so a single unsupported op no longer fails thewhole graph.## Sandbox- Register the glTF 2.0 loader + all extensions as side-effect imports,and pull in the `InstancedMesh` side-effect, so interactivity glTFs(which instance a shared mesh from multiple nodes) load correctly in thetree-shaken dev build.## Tests- Core unit coverage for the OkLCh conversion blocks(`flowGraphDataNodes.test.ts`).- Loader unit coverage for `event/onSelect` (fires on the configurednode's pick, not on other meshes) and custom event send/receive (`eventnodes.test.ts`).- Existing FlowGraph + Interactivity unit suites pass (516 tests).## Status / remaining workThis is a draft; the following are known follow-ups:- `event/send_and_receive`: default event-data values are not yetapplied when an event is received without that data (explicit valueswork).- `KHR_node_selectability`: the `selectable` toggle is not yet honored(selection fires on any pick of the node).- A few `math/*` precision/coverage gaps remain (e.g. `math/slerp` is a**vector** slerp distinct from the quaternion `math/quatSlerp`; somematrix/quaternion conformance cases).- The `/extensions/KHR_interactivity/events/{}` `pointer/get` validityaccessor is not yet wired (no current asset requires it).## Notes- Dev-only Playwright runners (which depend on a local`glTF-Test-Assets-Interactivity` checkout) and development notes areintentionally kept out of this PR.Co-authored-by: Copilot <[email protected]>———Co-authored-by: Copilot <[email protected]>Copilot-Session: 2c252e3d-3b9b-4e29-90c1-a603ac658882Copilot-Session: 11c81e0e-fb65-41ec-9ded-01cb3eb9ab34, GitHub
- feat(XR): support CPU depth sensing on WebGPU (#18782)> 🤖 *This PR was created by the create-pr skill.*## Summary- Supports WebXR depth sensing on WebGPU when the session negotiates`cpu-optimized` depth, reusing the existing material plugin with WGSLocclusion injection.- Intentionally disables attachment with one actionable warning whenWebGPU negotiates `gpu-optimized`, because `XRGPUBinding` has noenvironment-depth equivalent.- Preserves WebGL CPU/GPU behavior, caller preference order, nativemetadata, wrapped textures, and the existing GLSL injection.## Correctness follow-ups- Compares XR axial depth in meters with handedness-correct lineareye-space depth, including `worldScalingFactor`.- Aligns CPU depth rows with Babylon's assembled WGSL `yFactor_`preprocessing.- Keeps distinct depth buffers, transforms, scales, and view matricesper eye, including missing-eye and multiview handling.- Uses explicit-LOD sampling in the multiview-varying path.- Resets GPU fallback per session while preserving caller auto-attachpolicy, invalidates stale depth when the viewer pose is unavailable, andrestores state across detach/reattach.- Treats raw depth `0` as unavailable in both discard and tolerancemodes.- Releases Babylon wrappers without deleting runtime-owned`XRWebGLDepthInformation.texture` resources.## Device result and limitationQuest negotiated only `gpu-optimized` depth with `unsigned-short` data.The real-device fallback passed: attachment returned `false`,`disableAutoAttach` changed `false → true`, exactly one warning wasemitted, and XR projection remained healthy with the test boxes visible.CPU depth negotiation was unavailable on the tested Quest runtime, sothe CPU XR path could not be exercised with live device depth.## Shared manager overlapThe small `WebXRAbstractFeature.ts` and `webXRFeaturesManager.ts`changes pass the caller's pre-attach auto-attach policy through themanager's temporary `disableAutoAttach` clearing. This is required sothe WebGPU GPU-depth fallback can reset per session without losing acaller-disabled policy.PR #18780 has separate warning-registry and `enableFeature` work in thesame shared manager area, so the PRs are likely to overlap or requirerestacking/conflict resolution even though their behavioral changes areadditive.## CPU-path validation- Strict real-WebGPU pixel/readback oracle with asymmetric 2D depth,distinct left/right-eye buffers, and invalid zero-depth coverage in bothdiscard and tolerance modes.- Negative mutations for nonlinear device depth, missing Y compensation,shared-eye state, and zero-depth gating all fail as expected.- Babylon-assembled multiview fragment WGSL compiles with explicit-levelper-eye sampling; the local compile harness supplies a vertex eye-indexstub because current WebGPU WGSL has no `view_index` builtin.- Focused depth tests: 15 passed.- Full XR tests: 309 passed.- Full unit suite: 4,368 passed with 1 expected failure.- Core TypeScript/UMD build, formatting, lint, tree-shaking, andside-effect synchronization pass.Closes #18771Related: #18636———Co-authored-by: Copilot App <[email protected]>, GitHub