diff --git a/docs/user-manual/engine/index.md b/docs/user-manual/engine/index.md index 766f91fd8f3..cfaaefdcc3c 100644 --- a/docs/user-manual/engine/index.md +++ b/docs/user-manual/engine/index.md @@ -3,7 +3,9 @@ title: PlayCanvas Engine description: Open source JavaScript/TypeScript 3D engine published on npm with full TypeScript declarations and comprehensive examples. --- -The PlayCanvas Engine is the run-time framework that powers your PlayCanvas applications. It is written in JavaScript and is open sourced under an MIT license on [GitHub](https://github.com/playcanvas/engine). It is published on the [NPM registry](https://www.npmjs.com/package/playcanvas) and ships with full TypeScript declarations. It also comes with a comprehensive set of [code examples](https://playcanvas.github.io/). +The PlayCanvas Engine is the run-time framework that powers your PlayCanvas applications. It is written in JavaScript and is open sourced under an MIT license on [GitHub](https://github.com/playcanvas/engine). It is published on the [NPM registry](https://www.npmjs.com/package/playcanvas) and ships with full TypeScript declarations. It also comes with a comprehensive set of code examples. + + As a developer, you have complete freedom as to how you use the Engine. The two options are: diff --git a/docs/user-manual/gaussian-splatting/building/custom-shaders.md b/docs/user-manual/gaussian-splatting/building/custom-shaders.md index f02a5886416..c817333b4fb 100644 --- a/docs/user-manual/gaussian-splatting/building/custom-shaders.md +++ b/docs/user-manual/gaussian-splatting/building/custom-shaders.md @@ -17,7 +17,9 @@ For **unified rendering**, see [Work Buffer Rendering](/user-manual/gaussian-spl Override the `gsplatModifyVS` shader chunk to customize splat position, size, and color. This allows you to override only the relevant parts of the shader while leaving the core shader functionality intact. -**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/multi-splat)** - See shader chunk customization in action with animated splats. +**View Live Example** - See shader chunk customization in action with animated splats. + + ## API Reference @@ -294,4 +296,4 @@ Here are some examples demonstrating custom shader techniques: ### Animation Effects -[**Simple Sinusoidal Animation**](https://playcanvas.github.io/#/gaussian-splatting/multi-splat) - Applies a simple shader to animate Gaussian color and position using a sine wave. This example demonstrates how to create dynamic, procedural motion effects by modifying splat properties in real-time. +**Simple Sinusoidal Animation** - Applies a simple shader to animate Gaussian color and position using a sine wave. This example demonstrates how to create dynamic, procedural motion effects by modifying splat properties in real-time. diff --git a/docs/user-manual/gaussian-splatting/building/fisheye.md b/docs/user-manual/gaussian-splatting/building/fisheye.md index 282e856c592..6b257289eee 100644 --- a/docs/user-manual/gaussian-splatting/building/fisheye.md +++ b/docs/user-manual/gaussian-splatting/building/fisheye.md @@ -7,7 +7,9 @@ PlayCanvas supports a fisheye (barrel distortion) projection for Gaussian splats ![Gaussian splat scene rendered with a strong fisheye projection](/img/user-manual/gaussian-splatting/fisheye-ultra-wide.png) -**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming)** - Open the Settings panel and drag the `fisheye` slider from `0` to `1`. Try combining it with higher `cameraFov` values and different HDRI environments to reproduce the skydome and tiny-planet looks. +**View Live Example** - Open the Settings panel and drag the `fisheye` slider from `0` to `1`. Try combining it with higher `cameraFov` values and different HDRI environments to reproduce the skydome and tiny-planet looks. + + ## What Is It? diff --git a/docs/user-manual/gaussian-splatting/building/picking.md b/docs/user-manual/gaussian-splatting/building/picking.md index ba0a28a0e71..ce03a150ec6 100644 --- a/docs/user-manual/gaussian-splatting/building/picking.md +++ b/docs/user-manual/gaussian-splatting/building/picking.md @@ -5,7 +5,9 @@ description: "Use the PlayCanvas Picker with splats in unified and non-unified m The PlayCanvas Engine provides a [Picker API](https://api.playcanvas.com/engine/classes/Picker.html) which can query the object rendered at a specified pixel. The picker works with splats in the same way that it does for meshes. -**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/picking)** - See splat picking in action with interactive selection and world position detection. +**View Live Example** - See splat picking in action with interactive selection and world position detection. + + ## Unified vs Non-Unified Mode diff --git a/docs/user-manual/gaussian-splatting/building/shadows.md b/docs/user-manual/gaussian-splatting/building/shadows.md index 2d2578e4be1..66283bb7b1a 100644 --- a/docs/user-manual/gaussian-splatting/building/shadows.md +++ b/docs/user-manual/gaussian-splatting/building/shadows.md @@ -5,7 +5,9 @@ description: "Enable shadow casting from Gaussian splats onto meshes: API proper Gaussian Splats can cast shadows onto meshes and other surfaces in your scene. -**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/simple)** - See splat shadows in action. +**View Live Example** - See splat shadows in action. + + ![Splat Shadows](/img/user-manual/gaussian-splatting/splat-shadows.png) diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/index.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/index.md index 538c0b2456f..a4c471ded80 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/index.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/index.md @@ -33,15 +33,15 @@ flowchart LR Loaded[Loaded Splats
ply/sog/LOD] Container[GSplatContainer
procedural] end - + Copy([Copy]) - + WorkBuffer[Work Buffer
per camera/layer] - + Sort([Sort]) - + Render([Render]) - + Loaded --> Copy Container --> Copy Copy --> WorkBuffer @@ -74,7 +74,9 @@ When a camera renders a layer containing unified GSplat components, it draws the ## Live Example -Check out the [Global Sorting example](https://playcanvas.github.io/#/gaussian-splatting/global-sorting) which demonstrates the difference between unified and non-unified rendering. The example allows you to toggle unified mode on and off to observe how it eliminates artifacts when rendering multiple overlapping splat components. +Check out the Global Sorting example which demonstrates the difference between unified and non-unified rendering. The example allows you to toggle unified mode on and off to observe how it eliminates artifacts when rendering multiple overlapping splat components. + + ## Benefits @@ -97,4 +99,4 @@ The following features are available when using unified mode: - [GSplatComponent API](https://api.playcanvas.com/engine/classes/GSplatComponent.html) - [Draw Order and Sorting](/user-manual/gaussian-splatting/building/draw-order) - [Splat Rendering Architecture](/user-manual/gaussian-splatting/building/rendering-architecture) -- [Global Sorting Example](https://playcanvas.github.io/#/gaussian-splatting/global-sorting) +- Global Sorting Example diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md index e7fbf7379bf..82a82096e68 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md @@ -38,8 +38,13 @@ You must create the different LOD levels yourself (LOD 0 = highest detail, highe Explore these live examples to see LOD streaming in action: -- [LOD Streaming (Basic)](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming) - Demonstrates basic LOD streaming with different detail levels -- [LOD Streaming with Spherical Harmonics](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming-sh) - Shows LOD streaming with spherical harmonic data +- LOD Streaming (Basic) - Demonstrates basic LOD streaming with different detail levels + + + +- LOD Streaming with Spherical Harmonics - Shows LOD streaming with spherical harmonic data + + ## Enabling LOD Streaming diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md index b068ad1b168..4150814433a 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md @@ -90,7 +90,9 @@ The number of splats equals the number of non-transparent pixels in the image. F ## Live Example -See the [Procedural Shapes example](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes) which demonstrates using `GsplatImage` to display textures as ground and wall decorations. +See the Procedural Shapes example which demonstrates using `GsplatImage` to display textures as ground and wall decorations. + + ## Script Location diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md index 38f738e7f24..596789d7123 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md @@ -270,7 +270,9 @@ These scripts handle the container creation and data population for you. ## Live Example -See the [Procedural Instanced example](https://playcanvas.github.io/#/gaussian-splatting/procedural-instanced) which demonstrates creating a custom `GSplatContainer` with a custom format and per-instance shader uniforms. +See the Procedural Instanced example which demonstrates creating a custom `GSplatContainer` with a custom format and per-instance shader uniforms. + + ## See Also diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md index 52a30882415..87417180ff9 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md @@ -147,7 +147,9 @@ Lines are rendered as a series of splats placed along the line path: ## Live Example -See the [Procedural Shapes example](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes) which demonstrates CAD-style dimension annotations on a Gaussian splat scene. +See the Procedural Shapes example which demonstrates CAD-style dimension annotations on a Gaussian splat scene. + + ## Script Location diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md index 20cb5158280..b5a87fef7e4 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md @@ -120,7 +120,9 @@ anotherEntity.addComponent('gsplat', { ## Live Example -See the [Procedural Mesh example](https://playcanvas.github.io/#/gaussian-splatting/procedural-mesh) which demonstrates converting a terrain scene with animated clouds to splat representation. +See the Procedural Mesh example which demonstrates converting a terrain scene with animated clouds to splat representation. + + ## Script Location diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md index ff407f76da9..45e7f42bda2 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md @@ -119,7 +119,9 @@ For labels with many characters or large font sizes, the splat count can be sign ## Live Example -See the [Procedural Shapes example](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes) which demonstrates using `GsplatText` for dimension labels in a CAD-style visualization. +See the Procedural Shapes example which demonstrates using `GsplatText` for dimension labels in a CAD-style visualization. + + ## Script Location diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md index cf90c98c93e..415264b879f 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md @@ -130,12 +130,12 @@ The source and destination resources can have different numbers of splats. The ` ```glsl void process() { uint destIndex = splat.index; // Current destination splat index - + // Calculate which source splat to read from uint sourceIndex = destIndex * 2; // Example: sample every other splat setSplat(sourceIndex); vec3 srcPos = getCenter(); - + // Write to destination writePosition(vec4(srcPos, 1.0)); } @@ -286,8 +286,13 @@ void process() { ## Live Examples -- [Paint example](https://playcanvas.github.io/#/gaussian-splatting/paint) - Demonstrates painting splats with a brush -- [Editor example](https://playcanvas.github.io/#/gaussian-splatting/editor) - Demonstrates selection, deletion, and cloning +- Paint example - Demonstrates painting splats with a brush + + + +- Editor example - Demonstrates selection, deletion, and cloning + + ## See Also diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md index 50872afe31d..b05f4580909 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md @@ -27,21 +27,21 @@ flowchart LR Loaded[Loaded Splats] Container[GSplatContainer] end - + Copy([Copy]) - + WorkBuffer[Work Buffer] - + Sort([Sort]) - + Render([Render]) - + Loaded --> Copy Container --> Copy Copy --> WorkBuffer WorkBuffer --> Sort Sort --> Render - + style Copy stroke:#f90,stroke-width:3px ``` @@ -72,7 +72,7 @@ entity.gsplat.setWorkBufferModifier({ // Offset all splats upward center.y += 1.0; } - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // Tint splats red @@ -83,7 +83,7 @@ entity.gsplat.setWorkBufferModifier({ fn modifySplatCenter(center: ptr) { (*center).y += 1.0; } - fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, + fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr, scale: ptr) {} fn modifySplatColor(center: vec3f, color: ptr) { *color = vec4f((*color).rgb * vec3f(1.0, 0.5, 0.5), (*color).a); @@ -132,7 +132,7 @@ entity.gsplat.setWorkBufferModifier({ uniform uint uComponentId; void modifySplatCenter(inout vec3 center) {} - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // Write component ID to the splatId stream @@ -143,7 +143,7 @@ entity.gsplat.setWorkBufferModifier({ uniform uComponentId: u32; fn modifySplatCenter(center: ptr) {} - fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, + fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr, scale: ptr) {} fn modifySplatColor(center: vec3f, color: ptr) { writeSplatId(vec4u(uniform.uComponentId, 0u, 0u, 0u)); @@ -205,7 +205,9 @@ See [Splat Data Format - Shader Access](/user-manual/gaussian-splatting/building ## Live Example -See the [LOD Instances example](https://playcanvas.github.io/#/gaussian-splatting/lod-instances) which demonstrates: +See the LOD Instances example which demonstrates: + + - Adding a `splatId` stream to the work buffer - Writing component IDs during copy using `setWorkBufferModifier()` diff --git a/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md b/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md index f532e56c294..571531b9523 100644 --- a/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md +++ b/docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md @@ -27,21 +27,21 @@ flowchart LR Loaded[Loaded Splats] Container[GSplatContainer] end - + Copy([Copy]) - + WorkBuffer[Work Buffer] - + Sort([Sort]) - + Render([Render]) - + Loaded --> Copy Container --> Copy Copy --> WorkBuffer WorkBuffer --> Sort Sort --> Render - + style Render stroke:#09f,stroke-width:3px ``` @@ -54,7 +54,7 @@ Use `getShaderChunks()` on the scene's gsplat material to set the `gsplatModifyV ```javascript const glslModifier = ` void modifySplatCenter(inout vec3 center) {} - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // Apply global color grading @@ -64,7 +64,7 @@ const glslModifier = ` const wgslModifier = ` fn modifySplatCenter(center: ptr) {} - fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, + fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr, scale: ptr) {} fn modifySplatColor(center: vec3f, color: ptr) { *color = vec4f(pow((*color).rgb, vec3f(0.8)), (*color).a); @@ -109,12 +109,12 @@ const glslModifier = ` uniform sampler2D uColorLookup; void modifySplatCenter(inout vec3 center) {} - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // Read component ID written during copy uint id = loadSplatId().r; - + // Look up color from texture based on component ID vec3 tintColor = texelFetch(uColorLookup, ivec2(int(id), 0), 0).rgb; color.rgb *= tintColor; @@ -187,7 +187,7 @@ const glslModifier = ` // Read ID from work buffer (can be used in other functions) componentId = loadSplatId().r; } - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // Look up color from texture based on component ID @@ -199,7 +199,9 @@ const glslModifier = ` ## Live Example -See the [LOD Instances example](https://playcanvas.github.io/#/gaussian-splatting/lod-instances) which demonstrates: +See the LOD Instances example which demonstrates: + + - Reading component IDs written during copy - Looking up colors from a texture diff --git a/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md b/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md index d14f831b871..6331e1b4bd1 100644 --- a/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md +++ b/docs/user-manual/graphics/advanced-rendering/hardware-instancing.md @@ -11,10 +11,21 @@ Note that all instances are submitted for rendering by the GPU with no camera fr ## Live Examples -- [Basic Instancing](https://playcanvas.github.io/#/graphics/instancing-basic) - Demonstrates default Mat4 instancing format with StandardMaterial -- [Custom Instancing](https://playcanvas.github.io/#/graphics/instancing-custom) - Shows custom vertex format with shader chunks override -- [GLB Instancing](https://playcanvas.github.io/#/graphics/instancing-glb) - Uses EXT_mesh_gpu_instancing extension in GLB files -- [Gooch Instancing](https://playcanvas.github.io/#/graphics/instancing-gooch) - Full custom ShaderMaterial with instancing support +- Basic Instancing - Demonstrates default Mat4 instancing format with StandardMaterial + + + +- Custom Instancing - Shows custom vertex format with shader chunks override + + + +- GLB Instancing - Uses EXT_mesh_gpu_instancing extension in GLB files + + + +- Gooch Instancing - Full custom ShaderMaterial with instancing support + + ## Basic Instancing with Default Format diff --git a/docs/user-manual/graphics/advanced-rendering/html-in-canvas.md b/docs/user-manual/graphics/advanced-rendering/html-in-canvas.md index 005ad5350f7..eac2eab31dd 100644 --- a/docs/user-manual/graphics/advanced-rendering/html-in-canvas.md +++ b/docs/user-manual/graphics/advanced-rendering/html-in-canvas.md @@ -108,13 +108,18 @@ Because the browser handles hit testing natively, `:hover` CSS pseudo-classes, f When `device.supportsHtmlTextures` is `false`, consider these approaches: -- **DOM overlay** — Render the HTML panel as a fixed-position `
` on top of the canvas. Click handling works via standard DOM events. This is the approach used by the [HTML Texture Configurator](https://playcanvas.github.io/#/misc/html-texture-configurator) example. -- **Canvas 2D rasterization** — Draw fallback content into a `` element using the 2D context and use that as the texture source. This is the approach used by the [HTML Texture](https://playcanvas.github.io/#/misc/html-texture) example. +- **DOM overlay** — Render the HTML panel as a fixed-position `
` on top of the canvas. Click handling works via standard DOM events. This is the approach used by the HTML Texture Configurator example. + + + +- **Canvas 2D rasterization** — Draw fallback content into a `` element using the 2D context and use that as the texture source. This is the approach used by the HTML Texture example. + + ## Examples -- [HTML Texture](https://playcanvas.github.io/#/misc/html-texture) — Renders live HTML content with CSS animations as a WebGL texture on a 3D cube. Falls back to a canvas-drawn placeholder when unsupported. -- [HTML Texture Configurator](https://playcanvas.github.io/#/misc/html-texture-configurator) — A 3D product configurator with an interactive HTML UI panel rendered as a texture. Uses `getElementTransform` for click and hover hit testing. Falls back to a DOM overlay when unsupported. +- HTML Texture — Renders live HTML content with CSS animations as a WebGL texture on a 3D cube. Falls back to a canvas-drawn placeholder when unsupported. +- HTML Texture Configurator — A 3D product configurator with an interactive HTML UI panel rendered as a texture. Uses `getElementTransform` for click and hover hit testing. Falls back to a DOM overlay when unsupported. ## API Reference diff --git a/docs/user-manual/graphics/advanced-rendering/indirect-drawing.md b/docs/user-manual/graphics/advanced-rendering/indirect-drawing.md index 8ef7ac626ee..1d02eac75c1 100644 --- a/docs/user-manual/graphics/advanced-rendering/indirect-drawing.md +++ b/docs/user-manual/graphics/advanced-rendering/indirect-drawing.md @@ -79,4 +79,6 @@ For detailed API documentation, refer to these PlayCanvas engine classes and met ## Live Example -See the [Indirect Draw example](https://playcanvas.github.io/#/compute/indirect-draw) for a complete demonstration of indirect drawing with animated instance counts. +See the Indirect Draw example for a complete demonstration of indirect drawing with animated instance counts. + + diff --git a/docs/user-manual/graphics/advanced-rendering/multi-draw.md b/docs/user-manual/graphics/advanced-rendering/multi-draw.md index 205a64ebf1f..5d84dbd830f 100644 --- a/docs/user-manual/graphics/advanced-rendering/multi-draw.md +++ b/docs/user-manual/graphics/advanced-rendering/multi-draw.md @@ -33,9 +33,17 @@ When `supportsMultiDraw` is false, the engine automatically falls back to an int ## Live Examples -- [Multi-Draw](https://playcanvas.github.io/#/graphics/multi-draw) - Terrain rendering with dynamic patch culling -- [Multi-Draw Instanced](https://playcanvas.github.io/#/graphics/multi-draw-instanced) - Different geometries with instancing (WebGPU only) -- [Multi-Draw Instanced Multi-Platform](https://playcanvas.github.io/#/graphics/multi-draw-instanced-multi-platform) - Cross-platform instanced multi-draw +- Multi-Draw - Terrain rendering with dynamic patch culling + + + +- Multi-Draw Instanced - Different geometries with instancing (WebGPU only) + + + +- Multi-Draw Instanced Multi-Platform - Cross-platform instanced multi-draw + + ## Basic Multi-Draw diff --git a/docs/user-manual/graphics/advanced-rendering/multiple-render-targets.md b/docs/user-manual/graphics/advanced-rendering/multiple-render-targets.md index 96b3cb7dc0f..57f58be8717 100644 --- a/docs/user-manual/graphics/advanced-rendering/multiple-render-targets.md +++ b/docs/user-manual/graphics/advanced-rendering/multiple-render-targets.md @@ -109,4 +109,6 @@ To restrict the modification to a specific camera, gate it behind the shader pas ## Example -A full working sample is available in the engine examples: [Multiple Render Targets](https://playcanvas.github.io/#/graphics/multi-render-targets) renders a chess board through a custom shader pass that writes its world normal and gloss into additional color targets, displayed on screen as separate textures. +A full working sample is available in the engine examples: Multiple Render Targets renders a chess board through a custom shader pass that writes its world normal and gloss into additional color targets, displayed on screen as separate textures. + + diff --git a/docs/user-manual/graphics/cameras/depth-layer.md b/docs/user-manual/graphics/cameras/depth-layer.md index 15ec2201690..fe38d298942 100644 --- a/docs/user-manual/graphics/cameras/depth-layer.md +++ b/docs/user-manual/graphics/cameras/depth-layer.md @@ -70,6 +70,14 @@ The color map in CameraFrame contains linear HDR values (no gamma correction nee These engine examples demonstrate the rendering of both the depth and the color map, and also custom shaders allowing their use: -- GrabPass demonstrates the use of the color buffer: [`GrabPass`](https://playcanvas.github.io/#/shaders/grab-pass) -- GroundFog demonstrates the use of the depth buffer: [`GroundFog`](https://playcanvas.github.io/#/shaders/ground-fog) -- Dispersion demonstrates refraction and chromatic dispersion using the scene color texture: [`Dispersion`](https://playcanvas.github.io/#/materials/dispersion) +- GrabPass demonstrates the use of the color buffer: `GrabPass` + + + +- GroundFog demonstrates the use of the depth buffer: `GroundFog` + + + +- Dispersion demonstrates refraction and chromatic dispersion using the scene color texture: `Dispersion` + + diff --git a/docs/user-manual/graphics/cameras/scene-picker.md b/docs/user-manual/graphics/cameras/scene-picker.md index 84d1199235e..a98861d7469 100644 --- a/docs/user-manual/graphics/cameras/scene-picker.md +++ b/docs/user-manual/graphics/cameras/scene-picker.md @@ -77,11 +77,16 @@ The trade-off is reduced precision - very small objects may be missed at lower r The picker fully supports Gaussian Splat instances with the same API as regular meshes. You can pick splat instances by their mesh instance ID and, with depth enabled, determine exact 3D positions on splat surfaces. -This enables interactive applications like placing markers on splats, measuring distances, or selecting individual splat entities in complex scenes. See the [Gaussian Splatting Picking example](https://playcanvas.github.io/#gaussian-splatting/picking) for a complete demonstration. +This enables interactive applications like placing markers on splats, measuring distances, or selecting individual splat entities in complex scenes. See the Gaussian Splatting Picking example for a complete demonstration. + + ## Examples These engine examples demonstrate the picker in action: -- [**Area Picker**](https://playcanvas.github.io/#/graphics/area-picker) - Shows how to pick mesh instances in rectangular screen regions with visual feedback -- [**Gaussian Splatting Picking**](https://playcanvas.github.io/#gaussian-splatting/picking) - Demonstrates picking splat instances and using world position picking to place markers on splat surfaces +- **Area Picker** - Shows how to pick mesh instances in rectangular screen regions with visual feedback + + + +- **Gaussian Splatting Picking** - Demonstrates picking splat instances and using world position picking to place markers on splat surfaces diff --git a/docs/user-manual/graphics/posteffects/cameraframe/compose-shader.md b/docs/user-manual/graphics/posteffects/cameraframe/compose-shader.md index 0b897131846..3b228bc77bf 100644 --- a/docs/user-manual/graphics/posteffects/cameraframe/compose-shader.md +++ b/docs/user-manual/graphics/posteffects/cameraframe/compose-shader.md @@ -62,7 +62,9 @@ app.on('update', () => { ## Resources -- [Custom Compose Shader Example](https://playcanvas.github.io/#/graphics/custom-compose-shader) - Complete working demonstration +- Custom Compose Shader Example - Complete working demonstration + + ## Use Cases diff --git a/docs/user-manual/graphics/posteffects/cameraframe/custom-passes.md b/docs/user-manual/graphics/posteffects/cameraframe/custom-passes.md index be4c593f571..0f99d310b76 100644 --- a/docs/user-manual/graphics/posteffects/cameraframe/custom-passes.md +++ b/docs/user-manual/graphics/posteffects/cameraframe/custom-passes.md @@ -30,33 +30,33 @@ class RenderPassTint extends RenderPassShaderQuad { super(device); this.sourceTexture = sourceTexture; this.tint = Color.WHITE.clone(); - + this.shader = this.createShader(); } - + createShader() { return ShaderUtils.createShader(this.device, { uniqueName: 'TintShader', attributes: { aPosition: SEMANTIC_POSITION }, vertexChunk: 'quadVS', - + fragmentGLSL: ` uniform sampler2D sourceTexture; uniform vec3 tint; varying vec2 uv0; - + void main() { vec4 color = texture2D(sourceTexture, uv0); gl_FragColor = vec4(color.rgb * tint, color.a); } `, - + fragmentWGSL: ` var sourceTexture: texture_2d; var sourceTextureSampler: sampler; uniform tint: vec3f; varying uv0: vec2f; - + @fragment fn fragmentMain(input: FragmentInput) -> FragmentOutput { var output: FragmentOutput; let color: vec4f = textureSample(sourceTexture, sourceTextureSampler, uv0); @@ -66,7 +66,7 @@ class RenderPassTint extends RenderPassShaderQuad { ` }); } - + execute() { this.device.scope.resolve('sourceTexture').setValue(this.sourceTexture); this.device.scope.resolve('tint').setValue([this.tint.r, this.tint.g, this.tint.b]); @@ -130,7 +130,9 @@ camera.framePasses = [scenePass, blurHPass, blurVPass]; ## Resources -- [Render Pass Example](https://playcanvas.github.io/#/graphics/render-pass) - Complete demonstration of custom render passes +- Render Pass Example - Complete demonstration of custom render passes + + ## Use Cases diff --git a/docs/user-manual/graphics/posteffects/cameraframe/index.md b/docs/user-manual/graphics/posteffects/cameraframe/index.md index 78f366af9fe..b703433fd18 100644 --- a/docs/user-manual/graphics/posteffects/cameraframe/index.md +++ b/docs/user-manual/graphics/posteffects/cameraframe/index.md @@ -28,11 +28,25 @@ For Editor users, a ready-to-use script is available. See [CameraFrame in the Ed ## Examples -- [HDR with Bloom and LUT](https://playcanvas.github.io/#/graphics/hdr) - Demonstrates HDR bloom and color lookup table effects -- [Post-Processing](https://playcanvas.github.io/#/graphics/post-processing) - Shows multiple effects including bloom, grading, vignette, fringing, and TAA -- [Ambient Occlusion](https://playcanvas.github.io/#/graphics/ambient-occlusion) - Demonstrates SSAO implementation -- [Depth of Field](https://playcanvas.github.io/#/graphics/depth-of-field) - Demonstrates depth of field effect -- [Temporal Anti-Aliasing](https://playcanvas.github.io/#/graphics/taa) - Demonstrates TAA implementation +- HDR with Bloom and LUT - Demonstrates HDR bloom and color lookup table effects + + + +- Post-Processing - Shows multiple effects including bloom, grading, vignette, fringing, and TAA + + + +- Ambient Occlusion - Demonstrates SSAO implementation + + + +- Depth of Field - Demonstrates depth of field effect + + + +- Temporal Anti-Aliasing - Demonstrates TAA implementation + + ## Custom Post Processing diff --git a/docs/user-manual/graphics/shaders/compute-shaders.md b/docs/user-manual/graphics/shaders/compute-shaders.md index 9a1eceb0a14..9b4ebdad43f 100644 --- a/docs/user-manual/graphics/shaders/compute-shaders.md +++ b/docs/user-manual/graphics/shaders/compute-shaders.md @@ -347,7 +347,7 @@ struct DispatchIndirectArgs { fn main() { // Compute workload size dynamically let workloadSize = calculateWorkload(); - + // Write dispatch parameters to the slot indirectBuffer[uniforms.slot].x = workloadSize; indirectBuffer[uniforms.slot].y = 1u; @@ -480,10 +480,30 @@ The `{WORKGROUP_SIZE}` placeholders are replaced with `64` before compilation. S Explore these live examples demonstrating various compute shader use cases: -- [Histogram](https://playcanvas.github.io/#/compute/histogram) - Compute image histogram using atomic operations -- [Texture Generation](https://playcanvas.github.io/#/compute/texture-gen) - Generate and modify textures with compute shaders -- [Particles](https://playcanvas.github.io/#/compute/particles) - GPU-based particle simulation with collision detection -- [Vertex Update](https://playcanvas.github.io/#/compute/vertex-update) - Modify mesh vertex buffers in real-time -- [Edge Detect](https://playcanvas.github.io/#/compute/edge-detect) - Image processing with edge detection -- [Indirect Draw](https://playcanvas.github.io/#/compute/indirect-draw) - GPU-driven rendering with indirect draw calls -- [Indirect Dispatch](https://playcanvas.github.io/#/compute/indirect-dispatch) - GPU-driven compute dispatch with depth-based tile classification +- Histogram - Compute image histogram using atomic operations + + + +- Texture Generation - Generate and modify textures with compute shaders + + + +- Particles - GPU-based particle simulation with collision detection + + + +- Vertex Update - Modify mesh vertex buffers in real-time + + + +- Edge Detect - Image processing with edge detection + + + +- Indirect Draw - GPU-driven rendering with indirect draw calls + + + +- Indirect Dispatch - GPU-driven compute dispatch with depth-based tile classification + + diff --git a/docs/user-manual/optimization/gpu-profiling.md b/docs/user-manual/optimization/gpu-profiling.md index 4498b7b8582..0347cbbd765 100644 --- a/docs/user-manual/optimization/gpu-profiling.md +++ b/docs/user-manual/optimization/gpu-profiling.md @@ -25,7 +25,7 @@ This is particularly challenging on the Web platform, as web applications typica * Start the MiniBrowser, specify url to your web application: ```bash - __XPC_METAL_CAPTURE_ENABLED=1 Tools/Scripts/run-minibrowser --release --url https://playcanvas.github.io/ + __XPC_METAL_CAPTURE_ENABLED=1 Tools/Scripts/run-minibrowser --release --url https://playcanvas.vercel.app/ ``` * Configure the number of frames to capture from a separate command-line interface window. This defaults to 1. diff --git a/docs/user-manual/optimization/mini-stats.md b/docs/user-manual/optimization/mini-stats.md index 2ae871ac5ac..200d8cded16 100644 --- a/docs/user-manual/optimization/mini-stats.md +++ b/docs/user-manual/optimization/mini-stats.md @@ -98,8 +98,10 @@ const miniStats = new pc.MiniStats(app, { }); ``` -For the complete API, refer to the [MiniStats API reference](https://api.playcanvas.com/engine/classes/MiniStats.html). See the [MiniStats example](https://playcanvas.github.io/#/misc/mini-stats) for a demonstration of customization options. +For the complete API, refer to the [MiniStats API reference](https://api.playcanvas.com/engine/classes/MiniStats.html). See the MiniStats example for a demonstration of customization options. + + ## See It In Action -Visit the [Engine Examples Browser](https://playcanvas.github.io/) to see MiniStats in action. Try clicking on the overlay to cycle through the different display sizes and observe the detailed timing breakdowns. +Visit the Engine Examples Browser to see MiniStats in action. Try clicking on the overlay to cycle through the different display sizes and observe the detailed timing breakdowns. diff --git a/docs/user-manual/xr/ar/depth-sensing.md b/docs/user-manual/xr/ar/depth-sensing.md index 0ae6cda1ff9..d61947440b2 100644 --- a/docs/user-manual/xr/ar/depth-sensing.md +++ b/docs/user-manual/xr/ar/depth-sensing.md @@ -171,4 +171,6 @@ void main (void) { ## Example -You can check out [this example](https://playcanvas.github.io/#/xr/ar-camera-depth) that renders a quad in front of a camera with depth sensing applied with a similar shader as described above. +You can check out this example that renders a quad in front of a camera with depth sensing applied with a similar shader as described above. + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/engine/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/engine/index.md index 3db4b3ded59..d36c006581e 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/engine/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/engine/index.md @@ -3,7 +3,9 @@ title: PlayCanvas Engine description: npmで公開されたオープンソースのJavaScript/TypeScript製3Dエンジンで、完全なTypeScript宣言と包括的なサンプルが付属します。 --- -PlayCanvas Engine は、PlayCanvasアプリケーションを動かすランタイムフレームワークです。JavaScriptで書かれており、[GitHub](https://github.com/playcanvas/engine)でMITライセンスの下でオープンソース化されています。[NPMレジストリ](https://www.npmjs.com/package/playcanvas)で公開されており、完全なTypeScript宣言が同梱されています。また、包括的な[コード例](https://playcanvas.github.io/)が付属しています。 +PlayCanvas Engine は、PlayCanvasアプリケーションを動かすランタイムフレームワークです。JavaScriptで書かれており、[GitHub](https://github.com/playcanvas/engine)でMITライセンスの下でオープンソース化されています。[NPMレジストリ](https://www.npmjs.com/package/playcanvas)で公開されており、完全なTypeScript宣言が同梱されています。また、包括的なコード例が付属しています。 + + 開発者として、Engineの利用方法については完全な自由があります。2つの選択肢があります。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/custom-shaders.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/custom-shaders.md index b71508b3530..3602b4bf819 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/custom-shaders.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/custom-shaders.md @@ -17,7 +17,9 @@ PlayCanvas Engineは、Gaussian Splats用のカスタムシェーダーをサポ `gsplatModifyVS`シェーダーチャンクをオーバーライドして、スプラットの位置、サイズ、色をカスタマイズします。これにより、コアシェーダー機能はそのままに、関連する部分のみをオーバーライドできます。 -**[ライブサンプルを見る](https://playcanvas.github.io/#/gaussian-splatting/multi-splat)** - アニメーションスプラットでシェーダーチャンクのカスタマイズを実際に見てください。 +**ライブサンプルを見る** - アニメーションスプラットでシェーダーチャンクのカスタマイズを実際に見てください。 + + ## APIリファレンス @@ -294,4 +296,4 @@ scale = vec3(0.0); ### アニメーションエフェクト -[**シンプルな正弦波アニメーション**](https://playcanvas.github.io/#/gaussian-splatting/multi-splat) - 正弦波を使用してGaussianの色と位置をアニメーションするシンプルなシェーダーを適用します。この例では、スプラットプロパティをリアルタイムで変更して動的なプロシージャルモーションエフェクトを作成する方法を示しています。 +**シンプルな正弦波アニメーション** - 正弦波を使用してGaussianの色と位置をアニメーションするシンプルなシェーダーを適用します。この例では、スプラットプロパティをリアルタイムで変更して動的なプロシージャルモーションエフェクトを作成する方法を示しています。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/fisheye.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/fisheye.md index 6abce54b086..b8cd4483a75 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/fisheye.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/fisheye.md @@ -7,7 +7,9 @@ PlayCanvas は、Gaussian スプラットと無限スカイボックスに対す ![強い魚眼プロジェクションでレンダリングされた Gaussian スプラットシーン](/img/user-manual/gaussian-splatting/fisheye-ultra-wide.png) -**[ライブデモを見る](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming)** - 設定パネルを開き、`fisheye` スライダーを `0` から `1` までドラッグしてください。`cameraFov` を高い値にしたり、異なる HDRI 環境と組み合わせたりして、スカイドームやタイニープラネットの見た目を再現してみてください。 +**ライブデモを見る** - 設定パネルを開き、`fisheye` スライダーを `0` から `1` までドラッグしてください。`cameraFov` を高い値にしたり、異なる HDRI 環境と組み合わせたりして、スカイドームやタイニープラネットの見た目を再現してみてください。 + + ## 概要 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/picking.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/picking.md index 408fe918c39..e9fef73561a 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/picking.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/picking.md @@ -5,7 +5,9 @@ description: "統合モードと非統合モードのスプラットでPlayCanva PlayCanvas Engine は、指定されたピクセルでレンダリングされたオブジェクトをクエリできる[Picker API](https://api.playcanvas.com/engine/classes/Picker.html)を提供します。ピッカーは、メッシュの場合と同じ方法でスプラットと連携します。 -**[ライブデモを見る](https://playcanvas.github.io/#/gaussian-splatting/picking)** - インタラクティブな選択とワールド位置検出によるスプラットピッキングの動作を確認できます。 +**ライブデモを見る** - インタラクティブな選択とワールド位置検出によるスプラットピッキングの動作を確認できます。 + + ## Unified モードと Non-Unified モード diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/shadows.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/shadows.md index 65d5cbe7fb0..e827ab707d4 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/shadows.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/shadows.md @@ -5,7 +5,9 @@ description: "Gaussian splatsからメッシュへのシャドウキャストを Gaussian Splatsは、シーン内のメッシュやその他のサーフェスに影を落とすことができます。 -**[ライブデモを見る](https://playcanvas.github.io/#/gaussian-splatting/simple)** - スプラットの影の動作を確認できます。 +**ライブデモを見る** - スプラットの影の動作を確認できます。 + + ![スプラットの影](/img/user-manual/gaussian-splatting/splat-shadows.png) diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/index.md index 8931f65b3aa..f6546cfc3df 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/index.md @@ -33,15 +33,15 @@ flowchart LR Loaded[ロードされたスプラット
ply/sog/LOD] Container[GSplatContainer
プロシージャル] end - + Copy([コピー]) - + WorkBuffer[ワークバッファ
カメラ/レイヤーごと] - + Sort([ソート]) - + Render([レンダリング]) - + Loaded --> Copy Container --> Copy Copy --> WorkBuffer @@ -74,7 +74,9 @@ GSplatリソースはスプラットのソースデータです。2つの形式 ## ライブサンプル -統合レンダリングと非統合レンダリングの違いを示す[Global Sortingサンプル](https://playcanvas.github.io/#/gaussian-splatting/global-sorting)をご覧ください。このサンプルでは、統合モードのオンとオフを切り替えて、複数の重なり合うスプラットコンポーネントをレンダリングする際にアーティファクトがどのように排除されるかを観察できます。 +統合レンダリングと非統合レンダリングの違いを示すGlobal Sortingサンプルをご覧ください。このサンプルでは、統合モードのオンとオフを切り替えて、複数の重なり合うスプラットコンポーネントをレンダリングする際にアーティファクトがどのように排除されるかを観察できます。 + + ## メリット @@ -97,4 +99,4 @@ GSplatリソースはスプラットのソースデータです。2つの形式 - [GSplatComponent API](https://api.playcanvas.com/engine/classes/GSplatComponent.html) - [描画順序とソート](/user-manual/gaussian-splatting/building/draw-order) - [スプラットレンダリングアーキテクチャ](/user-manual/gaussian-splatting/building/rendering-architecture) -- [Global Sortingサンプル](https://playcanvas.github.io/#/gaussian-splatting/global-sorting) +- Global Sortingサンプル diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md index fb66ddd7727..464e81666a8 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md @@ -38,8 +38,13 @@ LODストリーミングを使用するには、異なる詳細レベルを持 LODストリーミングの動作を確認するには、以下のライブサンプルを参照してください： -- [LODストリーミング（基本）](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming) - 異なる詳細レベルでの基本的なLODストリーミングを示します -- [球面調和関数付きLODストリーミング](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming-sh) - 球面調和データを含むLODストリーミングを示します +- LODストリーミング（基本） - 異なる詳細レベルでの基本的なLODストリーミングを示します + + + +- 球面調和関数付きLODストリーミング - 球面調和データを含むLODストリーミングを示します + + ## LODストリーミングの有効化 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md index 9ea857bdebd..bdc920673a7 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md @@ -90,7 +90,9 @@ imageSplat.imageAsset = anotherTextureAsset; ## ライブサンプル -`GsplatImage`を使用して地面や壁の装飾としてテクスチャを表示する方法を示す[Procedural Shapesサンプル](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes)を参照してください。 +`GsplatImage`を使用して地面や壁の装飾としてテクスチャを表示する方法を示すProcedural Shapesサンプルを参照してください。 + + ## スクリプトの場所 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md index 12ac9f98952..cea8eeba6aa 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md @@ -270,7 +270,9 @@ PlayCanvasは、一般的なユースケース用に`GSplatContainer`をラッ ## ライブサンプル -カスタム`GSplatContainer`をカスタムフォーマットとインスタンスごとのシェーダーユニフォームで作成する方法を示す[Procedural Instancedサンプル](https://playcanvas.github.io/#/gaussian-splatting/procedural-instanced)を参照してください。 +カスタム`GSplatContainer`をカスタムフォーマットとインスタンスごとのシェーダーユニフォームで作成する方法を示すProcedural Instancedサンプルを参照してください。 + + ## 関連項目 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md index ea50f13f919..2ca4ed85622 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md @@ -147,7 +147,9 @@ console.log(`${lines.primitiveCount} primitives`); ## ライブサンプル -Gaussian splatシーンでCADスタイルの寸法アノテーションを示す[Procedural Shapesサンプル](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes)を参照してください。 +Gaussian splatシーンでCADスタイルの寸法アノテーションを示すProcedural Shapesサンプルを参照してください。 + + ## スクリプトの場所 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md index 4af32eeede8..820f25edb7d 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md @@ -120,7 +120,9 @@ anotherEntity.addComponent('gsplat', { ## ライブサンプル -アニメーションする雲を持つ地形シーンをスプラット表現に変換する方法を示す[Procedural Meshサンプル](https://playcanvas.github.io/#/gaussian-splatting/procedural-mesh)を参照してください。 +アニメーションする雲を持つ地形シーンをスプラット表現に変換する方法を示すProcedural Meshサンプルを参照してください。 + + ## スクリプトの場所 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md index 7dac1e28abe..092510334cf 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md @@ -119,7 +119,9 @@ textSplat.text = 'New Score: 200'; ## ライブサンプル -CADスタイルの可視化で寸法ラベルに`GsplatText`を使用する方法を示す[Procedural Shapesサンプル](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes)を参照してください。 +CADスタイルの可視化で寸法ラベルに`GsplatText`を使用する方法を示すProcedural Shapesサンプルを参照してください。 + + ## スクリプトの場所 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md index 34408475fd8..f8edc8efda2 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md @@ -130,12 +130,12 @@ new pc.GSplatProcessor(device, source, destination, options) ```glsl void process() { uint destIndex = splat.index; // 現在の宛先スプラットインデックス - + // どのソーススプラットから読み取るかを計算 uint sourceIndex = destIndex * 2; // 例：1つおきのスプラットをサンプル setSplat(sourceIndex); vec3 srcPos = getCenter(); - + // 宛先に書き込む writePosition(vec4(srcPos, 1.0)); } @@ -286,8 +286,13 @@ void process() { ## ライブサンプル -- [Paintサンプル](https://playcanvas.github.io/#/gaussian-splatting/paint) - ブラシでスプラットをペイントするデモ -- [Editorサンプル](https://playcanvas.github.io/#/gaussian-splatting/editor) - 選択、削除、クローンのデモ +- Paintサンプル - ブラシでスプラットをペイントするデモ + + + +- Editorサンプル - 選択、削除、クローンのデモ + + ## 関連項目 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md index cddb5afb762..c3e4c838d95 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md @@ -27,21 +27,21 @@ flowchart LR Loaded[ロードされたスプラット] Container[GSplatContainer] end - + Copy([コピー]) - + WorkBuffer[ワークバッファ] - + Sort([ソート]) - + Render([レンダリング]) - + Loaded --> Copy Container --> Copy Copy --> WorkBuffer WorkBuffer --> Sort Sort --> Render - + style Copy stroke:#f90,stroke-width:3px ``` @@ -72,7 +72,7 @@ entity.gsplat.setWorkBufferModifier({ // すべてのスプラットを上にオフセット center.y += 1.0; } - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // スプラットを赤くティント @@ -83,7 +83,7 @@ entity.gsplat.setWorkBufferModifier({ fn modifySplatCenter(center: ptr) { (*center).y += 1.0; } - fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, + fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr, scale: ptr) {} fn modifySplatColor(center: vec3f, color: ptr) { *color = vec4f((*color).rgb * vec3f(1.0, 0.5, 0.5), (*color).a); @@ -132,7 +132,7 @@ entity.gsplat.setWorkBufferModifier({ uniform uint uComponentId; void modifySplatCenter(inout vec3 center) {} - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // splatIdストリームにコンポーネントIDを書き込む @@ -143,7 +143,7 @@ entity.gsplat.setWorkBufferModifier({ uniform uComponentId: u32; fn modifySplatCenter(center: ptr) {} - fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, + fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr, scale: ptr) {} fn modifySplatColor(center: vec3f, color: ptr) { writeSplatId(vec4u(uniform.uComponentId, 0u, 0u, 0u)); @@ -205,7 +205,9 @@ vec4 otherColor = getColor(); ## ライブサンプル -以下を示す[LOD Instancesサンプル](https://playcanvas.github.io/#/gaussian-splatting/lod-instances)を参照してください： +以下を示すLOD Instancesサンプルを参照してください： + + - ワークバッファへの`splatId`ストリームの追加 - `setWorkBufferModifier()`を使用したコピー中のコンポーネントIDの書き込み diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md index d15448f2a95..696a5220b4f 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md @@ -27,21 +27,21 @@ flowchart LR Loaded[ロードされたスプラット] Container[GSplatContainer] end - + Copy([コピー]) - + WorkBuffer[ワークバッファ] - + Sort([ソート]) - + Render([レンダリング]) - + Loaded --> Copy Container --> Copy Copy --> WorkBuffer WorkBuffer --> Sort Sort --> Render - + style Render stroke:#09f,stroke-width:3px ``` @@ -54,7 +54,7 @@ flowchart LR ```javascript const glslModifier = ` void modifySplatCenter(inout vec3 center) {} - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // グローバルカラーグレーディングを適用 @@ -64,7 +64,7 @@ const glslModifier = ` const wgslModifier = ` fn modifySplatCenter(center: ptr) {} - fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, + fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr, scale: ptr) {} fn modifySplatColor(center: vec3f, color: ptr) { *color = vec4f(pow((*color).rgb, vec3f(0.8)), (*color).a); @@ -109,12 +109,12 @@ const glslModifier = ` uniform sampler2D uColorLookup; void modifySplatCenter(inout vec3 center) {} - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // コピー中に書き込まれたコンポーネントIDを読み取る uint id = loadSplatId().r; - + // コンポーネントIDに基づいてテクスチャから色をルックアップ vec3 tintColor = texelFetch(uColorLookup, ivec2(int(id), 0), 0).rgb; color.rgb *= tintColor; @@ -187,7 +187,7 @@ const glslModifier = ` // ワークバッファからIDを読み取る（他の関数で使用可能） componentId = loadSplatId().r; } - void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, + void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {} void modifySplatColor(vec3 center, inout vec4 color) { // コンポーネントIDに基づいてテクスチャから色をルックアップ @@ -199,7 +199,9 @@ const glslModifier = ` ## ライブサンプル -以下を示す[LOD Instancesサンプル](https://playcanvas.github.io/#/gaussian-splatting/lod-instances)を参照してください： +以下を示すLOD Instancesサンプルを参照してください： + + - コピー中に書き込まれたコンポーネントIDの読み取り - テクスチャからの色のルックアップ diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/hardware-instancing.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/hardware-instancing.md index b9db14c7b2a..58fd86d7018 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/hardware-instancing.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/hardware-instancing.md @@ -11,10 +11,21 @@ PlayCanvasはWebGL2以上を必要とするため、インスタンシングは ## ライブサンプル -- [基本インスタンシング](https://playcanvas.github.io/#/graphics/instancing-basic) - デフォルトのMat4インスタンシングフォーマットとStandardMaterialのデモ -- [カスタムインスタンシング](https://playcanvas.github.io/#/graphics/instancing-custom) - カスタム頂点フォーマットとシェーダーチャンクのオーバーライド -- [GLBインスタンシング](https://playcanvas.github.io/#/graphics/instancing-glb) - GLBファイルのEXT_mesh_gpu_instancing拡張機能の使用 -- [Goochインスタンシング](https://playcanvas.github.io/#/graphics/instancing-gooch) - インスタンシングをサポートする完全なカスタムShaderMaterial +- 基本インスタンシング - デフォルトのMat4インスタンシングフォーマットとStandardMaterialのデモ + + + +- カスタムインスタンシング - カスタム頂点フォーマットとシェーダーチャンクのオーバーライド + + + +- GLBインスタンシング - GLBファイルのEXT_mesh_gpu_instancing拡張機能の使用 + + + +- Goochインスタンシング - インスタンシングをサポートする完全なカスタムShaderMaterial + + ## デフォルトフォーマットを使用した基本インスタンシング diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/html-in-canvas.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/html-in-canvas.md index 12bf55bdad1..ea0a0799286 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/html-in-canvas.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/html-in-canvas.md @@ -108,13 +108,18 @@ Because the browser handles hit testing natively, `:hover` CSS pseudo-classes, f When `device.supportsHtmlTextures` is `false`, consider these approaches: -- **DOM overlay** — Render the HTML panel as a fixed-position `
` on top of the canvas. Click handling works via standard DOM events. This is the approach used by the [HTML Texture Configurator](https://playcanvas.github.io/#/misc/html-texture-configurator) example. -- **Canvas 2D rasterization** — Draw fallback content into a `` element using the 2D context and use that as the texture source. This is the approach used by the [HTML Texture](https://playcanvas.github.io/#/misc/html-texture) example. +- **DOM overlay** — Render the HTML panel as a fixed-position `
` on top of the canvas. Click handling works via standard DOM events. This is the approach used by the HTML Texture Configurator example. + + + +- **Canvas 2D rasterization** — Draw fallback content into a `` element using the 2D context and use that as the texture source. This is the approach used by the HTML Texture example. + + ## Examples -- [HTML Texture](https://playcanvas.github.io/#/misc/html-texture) — Renders live HTML content with CSS animations as a WebGL texture on a 3D cube. Falls back to a canvas-drawn placeholder when unsupported. -- [HTML Texture Configurator](https://playcanvas.github.io/#/misc/html-texture-configurator) — A 3D product configurator with an interactive HTML UI panel rendered as a texture. Uses `getElementTransform` for click and hover hit testing. Falls back to a DOM overlay when unsupported. +- HTML Texture — Renders live HTML content with CSS animations as a WebGL texture on a 3D cube. Falls back to a canvas-drawn placeholder when unsupported. +- HTML Texture Configurator — A 3D product configurator with an interactive HTML UI panel rendered as a texture. Uses `getElementTransform` for click and hover hit testing. Falls back to a DOM overlay when unsupported. ## API Reference diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/indirect-drawing.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/indirect-drawing.md index cdcfdae32d0..206066c98e9 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/indirect-drawing.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/indirect-drawing.md @@ -79,4 +79,6 @@ device.computeDispatch([compute], 'GenerateIndirectDraw'); ## ライブサンプル -アニメーションするインスタンス数での間接描画の完全なデモンストレーションについては、[間接描画のサンプル](https://playcanvas.github.io/#/compute/indirect-draw) を参照してください。 +アニメーションするインスタンス数での間接描画の完全なデモンストレーションについては、間接描画のサンプル を参照してください。 + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multi-draw.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multi-draw.md index 7f9ab1c0721..0493f2d5bca 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multi-draw.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multi-draw.md @@ -33,9 +33,17 @@ if (app.graphicsDevice.supportsMultiDraw) { ## ライブサンプル -- [マルチドロー](https://playcanvas.github.io/#/graphics/multi-draw) - 動的パッチカリングを使用した地形レンダリング -- [マルチドローインスタンス](https://playcanvas.github.io/#/graphics/multi-draw-instanced) - インスタンシングを使用した異なるジオメトリ（WebGPUのみ） -- [マルチドローインスタンス マルチプラットフォーム](https://playcanvas.github.io/#/graphics/multi-draw-instanced-multi-platform) - クロスプラットフォームのインスタンス化マルチドロー +- マルチドロー - 動的パッチカリングを使用した地形レンダリング + + + +- マルチドローインスタンス - インスタンシングを使用した異なるジオメトリ（WebGPUのみ） + + + +- マルチドローインスタンス マルチプラットフォーム - クロスプラットフォームのインスタンス化マルチドロー + + ## 基本的なマルチドロー diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multiple-render-targets.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multiple-render-targets.md index 26ffb2b6b57..82a9566ebc7 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multiple-render-targets.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/advanced-rendering/multiple-render-targets.md @@ -109,4 +109,6 @@ renders.forEach((render) => { ## 例 -完全に動作するサンプルがエンジンの例にあります: [Multiple Render Targets](https://playcanvas.github.io/#/graphics/multi-render-targets) は、カスタムシェーダーパスを通してチェス盤をレンダリングし、ワールド法線とグロスを追加のカラーターゲットに書き込んで、それぞれを画面上に別々のテクスチャとして表示します。 +完全に動作するサンプルがエンジンの例にあります: Multiple Render Targets は、カスタムシェーダーパスを通してチェス盤をレンダリングし、ワールド法線とグロスを追加のカラーターゲットに書き込んで、それぞれを画面上に別々のテクスチャとして表示します。 + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/scene-picker.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/scene-picker.md index 6b5714564ab..f0f52287aa8 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/scene-picker.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/scene-picker.md @@ -77,11 +77,16 @@ const picker = new pc.Picker( Picker は通常のメッシュと同じ API で Gaussian Splat インスタンスを完全にサポートします。メッシュインスタンス ID でスプラットインスタンスをピックでき、深度を有効にすればスプラット表面の正確な 3D 位置も求められます。 -これにより、スプラット上にマーカーを置く、距離を測る、複雑なシーンで個々のスプラット Entity を選択するなどのインタラクティブな用途が可能になります。完全なデモは [Gaussian Splatting Picking の例](https://playcanvas.github.io/#gaussian-splatting/picking)を参照してください。 +これにより、スプラット上にマーカーを置く、距離を測る、複雑なシーンで個々のスプラット Entity を選択するなどのインタラクティブな用途が可能になります。完全なデモは Gaussian Splatting Picking の例を参照してください。 + + ## 例 次の Engine の例で Picker の動作を確認できます。 -- [**Area Picker**](https://playcanvas.github.io/#/graphics/area-picker) — 矩形の画面領域でメッシュインスタンスをピックし、視覚的フィードバックを表示します。 -- [**Gaussian Splatting Picking**](https://playcanvas.github.io/#gaussian-splatting/picking) — スプラットインスタンスのピッキングと、ワールド位置ピッキングでスプラット表面にマーカーを置く方法を示します。 +- **Area Picker** — 矩形の画面領域でメッシュインスタンスをピックし、視覚的フィードバックを表示します。 + + + +- **Gaussian Splatting Picking** — スプラットインスタンスのピッキングと、ワールド位置ピッキングでスプラット表面にマーカーを置く方法を示します。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/compose-shader.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/compose-shader.md index ab009319ef3..4d595ded2ce 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/compose-shader.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/compose-shader.md @@ -62,7 +62,9 @@ app.on('update', () => { ## 参考資料 -- [Custom Compose Shader の例](https://playcanvas.github.io/#/graphics/custom-compose-shader) — 動作する完全なデモ +- Custom Compose Shader の例 — 動作する完全なデモ + + ## 用途 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/custom-passes.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/custom-passes.md index d73e0dd72f5..ae064198aaf 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/custom-passes.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/custom-passes.md @@ -30,33 +30,33 @@ class RenderPassTint extends RenderPassShaderQuad { super(device); this.sourceTexture = sourceTexture; this.tint = Color.WHITE.clone(); - + this.shader = this.createShader(); } - + createShader() { return ShaderUtils.createShader(this.device, { uniqueName: 'TintShader', attributes: { aPosition: SEMANTIC_POSITION }, vertexChunk: 'quadVS', - + fragmentGLSL: ` uniform sampler2D sourceTexture; uniform vec3 tint; varying vec2 uv0; - + void main() { vec4 color = texture2D(sourceTexture, uv0); gl_FragColor = vec4(color.rgb * tint, color.a); } `, - + fragmentWGSL: ` var sourceTexture: texture_2d; var sourceTextureSampler: sampler; uniform tint: vec3f; varying uv0: vec2f; - + @fragment fn fragmentMain(input: FragmentInput) -> FragmentOutput { var output: FragmentOutput; let color: vec4f = textureSample(sourceTexture, sourceTextureSampler, uv0); @@ -66,7 +66,7 @@ class RenderPassTint extends RenderPassShaderQuad { ` }); } - + execute() { this.device.scope.resolve('sourceTexture').setValue(this.sourceTexture); this.device.scope.resolve('tint').setValue([this.tint.r, this.tint.g, this.tint.b]); @@ -130,7 +130,9 @@ camera.framePasses = [scenePass, blurHPass, blurVPass]; ## 参考資料 -- [Render Pass の例](https://playcanvas.github.io/#/graphics/render-pass) — カスタムレンダーパスの完全なデモ +- Render Pass の例 — カスタムレンダーパスの完全なデモ + + ## 用途 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/index.md index f12ca200ca4..e023fa1a5fb 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/posteffects/cameraframe/index.md @@ -28,11 +28,25 @@ Editor 利用者向けには、すぐ使える Script があります。設定 ## 例 -- [HDR と Bloom、LUT](https://playcanvas.github.io/#/graphics/hdr) — HDR ブルームとカラールックアップテーブルをデモ -- [ポストプロセス](https://playcanvas.github.io/#/graphics/post-processing) — ブルーム、グレーディング、ビネット、フリンジ、TAA など複数のエフェクトを表示 -- [アンビエントオクルージョン](https://playcanvas.github.io/#/graphics/ambient-occlusion) — SSAO の実装をデモ -- [被写界深度](https://playcanvas.github.io/#/graphics/depth-of-field) — 被写界深度エフェクトをデモ -- [時間的反エイリアシング](https://playcanvas.github.io/#/graphics/taa) — TAA の実装をデモ +- HDR と Bloom、LUT — HDR ブルームとカラールックアップテーブルをデモ + + + +- ポストプロセス — ブルーム、グレーディング、ビネット、フリンジ、TAA など複数のエフェクトを表示 + + + +- アンビエントオクルージョン — SSAO の実装をデモ + + + +- 被写界深度 — 被写界深度エフェクトをデモ + + + +- 時間的反エイリアシング — TAA の実装をデモ + + ## カスタムポストプロセス diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/shaders/compute-shaders.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/shaders/compute-shaders.md index 43b54992564..6adcc31fb3e 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/shaders/compute-shaders.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/shaders/compute-shaders.md @@ -347,7 +347,7 @@ struct DispatchIndirectArgs { fn main() { // ワークロードサイズを動的に計算 let workloadSize = calculateWorkload(); - + // ディスパッチパラメータをスロットに書き込み indirectBuffer[uniforms.slot].x = workloadSize; indirectBuffer[uniforms.slot].y = 1u; @@ -480,10 +480,30 @@ const shader = new pc.Shader(device, { 様々なコンピュートシェーダーのユースケースを示すライブサンプルを探索してください： -- [Histogram](https://playcanvas.github.io/#/compute/histogram) - アトミック操作を使用した画像ヒストグラムの計算 -- [Texture Generation](https://playcanvas.github.io/#/compute/texture-gen) - コンピュートシェーダーでテクスチャを生成・変更 -- [Particles](https://playcanvas.github.io/#/compute/particles) - 衝突検出付きGPUベースのパーティクルシミュレーション -- [Vertex Update](https://playcanvas.github.io/#/compute/vertex-update) - メッシュ頂点バッファのリアルタイム変更 -- [Edge Detect](https://playcanvas.github.io/#/compute/edge-detect) - エッジ検出による画像処理 -- [Indirect Draw](https://playcanvas.github.io/#/compute/indirect-draw) - 間接描画呼び出しによるGPU駆動レンダリング -- [Indirect Dispatch](https://playcanvas.github.io/#/compute/indirect-dispatch) - 深度ベースのタイル分類によるGPU駆動コンピュートディスパッチ +- Histogram - アトミック操作を使用した画像ヒストグラムの計算 + + + +- Texture Generation - コンピュートシェーダーでテクスチャを生成・変更 + + + +- Particles - 衝突検出付きGPUベースのパーティクルシミュレーション + + + +- Vertex Update - メッシュ頂点バッファのリアルタイム変更 + + + +- Edge Detect - エッジ検出による画像処理 + + + +- Indirect Draw - 間接描画呼び出しによるGPU駆動レンダリング + + + +- Indirect Dispatch - 深度ベースのタイル分類によるGPU駆動コンピュートディスパッチ + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/gpu-profiling.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/gpu-profiling.md index c72efa2c5ef..78cf265edad 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/gpu-profiling.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/gpu-profiling.md @@ -25,7 +25,7 @@ description: デスクトップと Android のネイティブ GPU プロファ * MiniBrowserを起動し、WebアプリケーションのURLを指定します: ```bash - __XPC_METAL_CAPTURE_ENABLED=1 Tools/Scripts/run-minibrowser --release --url https://playcanvas.github.io/ + __XPC_METAL_CAPTURE_ENABLED=1 Tools/Scripts/run-minibrowser --release --url https://playcanvas.vercel.app/ ``` * 別のコマンドラインインターフェースウィンドウから、キャプチャするフレーム数を設定します。デフォルトは1です。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/mini-stats.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/mini-stats.md index d0abb0ed47c..24d662a4e99 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/mini-stats.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/optimization/mini-stats.md @@ -34,4 +34,6 @@ const miniStats = new pc.MiniStats(app); 利用可能なメソッドとプロパティの詳細については、[MiniStats APIリファレンス](https://api.playcanvas.com/engine/classes/MiniStats.html)を参照してください。 -Engine単独のコンテキストでMiniStatsが動作している様子を見るには、[Engine Examples Browser](https://playcanvas.github.io/)をご覧ください。 +Engine単独のコンテキストでMiniStatsが動作している様子を見るには、Engine Examples Browserをご覧ください。 + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/xr/ar/depth-sensing.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/xr/ar/depth-sensing.md index f12214b6892..7c889b6413f 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/xr/ar/depth-sensing.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/xr/ar/depth-sensing.md @@ -173,4 +173,6 @@ void main (void) { ## 例 -上記で説明したものと同様のシェーダーで深度センシングを適用して、カメラの前にクアッドをレンダリングする[この例](https://playcanvas.github.io/#/xr/ar-camera-depth)を確認できます。 +上記で説明したものと同様のシェーダーで深度センシングを適用して、カメラの前にクアッドをレンダリングするこの例を確認できます。 + + diff --git a/src/components/EngineExample/index.js b/src/components/EngineExample/index.js new file mode 100644 index 00000000000..349084fe95f --- /dev/null +++ b/src/components/EngineExample/index.js @@ -0,0 +1,56 @@ +import React, { useState } from 'react'; + +const BASE = 'https://playcanvas.vercel.app'; +const GENERIC_TITLES = new Set([ + 'live demo', + 'this example', + 'view live demo', + 'view live example', + 'watch live demo', + 'ライブデモを見る', + 'この例' +]); +const ACRONYMS = /\b(Ar|Glb|Gpu|Hdr|Html|Lod|Lut|Taa|Vr|Webgl|Webgpu|Xr)\b/g; + +export default function EngineExample({ id, title = 'PlayCanvas engine example', buttonLabel = 'Click to load' }) { + const [loaded, setLoaded] = useState(false); + const path = id?.replace(/^#?\//, '').replace(/^#/, ''); + + if (!path) { + return {title}; + } + + const name = path.replace('/', '_'); + const src = `${BASE}/iframe/${name}.html`; + const thumbnail = `${BASE}/thumbnails/${name}_large.webp`; + const slug = path.split('/').pop(); + const label = GENERIC_TITLES.has(title.toLowerCase()) + ? slug.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()).replace(ACRONYMS, (v) => v.toUpperCase()) + : title; + + return ( +
+ {loaded ? ( +