From 594835863000a82028ab157eac21dd8d80d72d29 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Thu, 11 Jun 2026 15:25:02 +0100
Subject: [PATCH 1/6] docs: restructure Cameras section into multi-page,
 workflow-agnostic docs

Following the pattern established by the shadows page rewrite (#1037),
this restructures the Cameras section from a single Editor-focused page
into a full multi-page section with Engine/Editor/React/Web Components
tabs throughout:

- index.md: rewritten as a section overview covering camera creation,
  render target clearing, and links to all subpages
- projection.md (new): perspective vs orthographic, FOV, clip planes,
  aspect ratio, and frustum culling
- tone-mapping.md (new): per-camera tone mapping curves, gamma
  correction, and physically based exposure
- multiple-cameras.md (new): priority, viewports, layers, camera
  stacking, and render targets
- camera-controls.md (new): the engine's camera-controls.mjs script
  (orbit/fly/pan) across all workflows
- screen-and-world.md (new): screenToWorld/worldToScreen patterns

All engine facts verified against engine source. Japanese translations
mirrored for all pages. Sidebar updated with the new pages.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../graphics/cameras/camera-controls.md       | 112 ++++++++++++++++++
 docs/user-manual/graphics/cameras/index.md    |  91 +++++++++++---
 .../graphics/cameras/multiple-cameras.md      | 103 ++++++++++++++++
 .../graphics/cameras/projection.md            |  94 +++++++++++++++
 .../graphics/cameras/screen-and-world.md      |  50 ++++++++
 .../graphics/cameras/tone-mapping.md          |  95 +++++++++++++++
 .../graphics/cameras/camera-controls.md       | 112 ++++++++++++++++++
 .../user-manual/graphics/cameras/index.md     |  91 +++++++++++---
 .../graphics/cameras/multiple-cameras.md      | 103 ++++++++++++++++
 .../graphics/cameras/projection.md            |  94 +++++++++++++++
 .../graphics/cameras/screen-and-world.md      |  50 ++++++++
 .../graphics/cameras/tone-mapping.md          |  95 +++++++++++++++
 sidebars.js                                   |   7 +-
 13 files changed, 1062 insertions(+), 35 deletions(-)
 create mode 100644 docs/user-manual/graphics/cameras/camera-controls.md
 create mode 100644 docs/user-manual/graphics/cameras/multiple-cameras.md
 create mode 100644 docs/user-manual/graphics/cameras/projection.md
 create mode 100644 docs/user-manual/graphics/cameras/screen-and-world.md
 create mode 100644 docs/user-manual/graphics/cameras/tone-mapping.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/screen-and-world.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md

diff --git a/docs/user-manual/graphics/cameras/camera-controls.md b/docs/user-manual/graphics/cameras/camera-controls.md
new file mode 100644
index 00000000000..9ab831e0499
--- /dev/null
+++ b/docs/user-manual/graphics/cameras/camera-controls.md
@@ -0,0 +1,112 @@
+---
+title: Camera Controls
+description: Add orbit, fly, and pan navigation to any camera with the engine's ready-made camera-controls script, with mouse, touch, and gamepad support.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Most applications need some way for the user to move the camera. Rather than writing this from scratch, you can use the `CameraControls` script that ships with the engine at [`scripts/esm/camera-controls.mjs`](https://github.com/playcanvas/engine/blob/main/scripts/esm/camera-controls.mjs). It provides production-quality navigation with a single script:
+
+* **Orbit** — left mouse drag rotates around a focus point, right mouse drag pans, and the mouse wheel zooms.
+* **Fly** — WASD keys move the camera freely while the mouse looks around.
+* **Touch and gamepad** — multi-touch gestures and gamepad input are supported out of the box.
+
+Attach the script to a camera entity:
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// Load the script (here from the CDN; you can also bundle it with your app)
+const asset = new pc.Asset('camera-controls', 'script', {
+    url: 'https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs'
+});
+app.assets.add(asset);
+app.assets.load(asset);
+
+asset.ready(() => {
+    // Attach it to the camera entity
+    camera.addComponent('script');
+    camera.script.create('cameraControls', {
+        properties: {
+            focusPoint: new pc.Vec3(0, 1, 0)
+        }
+    });
+});
+```
+
+If you build your app with a bundler, you can import the script class directly instead:
+
+```javascript
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+
+camera.addComponent('script');
+camera.script.create(CameraControls);
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Add `camera-controls.mjs` to your project as a script asset (copy it from the [engine repository](https://github.com/playcanvas/engine/blob/main/scripts/esm/camera-controls.mjs)). Then select your camera entity, add a [Script Component](/user-manual/editor/scenes/components/script) and add the **cameraControls** script to it. The script's attributes can then be tuned in the Inspector.
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Script } from '@playcanvas/react/components';
+
+<Entity name="camera" position={[0, 1, 4]}>
+  <Camera />
+  <Script script={CameraControls} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<pc-app>
+  <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
+  <pc-scene>
+    <pc-entity name="camera" position="0 1 4">
+      <pc-camera></pc-camera>
+      <pc-scripts>
+        <pc-script name="cameraControls"></pc-script>
+      </pc-scripts>
+    </pc-entity>
+  </pc-scene>
+</pc-app>
+```
+
+</TabItem>
+</Tabs>
+
+## Configuration {#configuration}
+
+The script exposes a rich set of attributes. The most commonly used are:
+
+| Attribute | Default | Description |
+| --- | --- | --- |
+| `enableOrbit` | `true` | Enable orbit controls |
+| `enableFly` | `true` | Enable fly controls |
+| `enablePan` | `true` | Enable panning |
+| `focusPoint` | `[0, 0, 0]` | The point the camera orbits around |
+| `rotateSpeed` | `0.2` | Rotation sensitivity |
+| `moveSpeed` | `10` | Fly movement speed (with `moveFastSpeed` and `moveSlowSpeed` variants) |
+| `zoomSpeed` | `0.001` | Zoom sensitivity |
+| `pitchRange` | `[-360, 360]` | Limits for the camera's pitch angle in degrees |
+| `zoomRange` | `[0.01, 0]` | Min/max zoom distance (a max of 0 means unlimited) |
+
+Damping attributes (`rotateDamping`, `moveDamping`, `zoomDamping`, `focusDamping`, all defaulting to `0.98`) control how smoothly motion eases out — 0 stops instantly. To create a pure orbit camera, disable fly; for a pure fly camera, disable orbit.
+
+## Examples {#examples}
+
+See the script in action in the engine examples:
+
+<EngineExample id="camera/orbit" title="Orbit Camera" />
+
+<EngineExample id="camera/fly" title="Fly Camera" />
+
+For building your own custom camera logic instead, the [Orbit Camera tutorial](/tutorials/orbit-camera) walks through a complete implementation.
diff --git a/docs/user-manual/graphics/cameras/index.md b/docs/user-manual/graphics/cameras/index.md
index 15628dc02f7..74f71c07929 100644
--- a/docs/user-manual/graphics/cameras/index.md
+++ b/docs/user-manual/graphics/cameras/index.md
@@ -1,38 +1,95 @@
 ---
 title: Cameras
-description: Add cameras, choose orthographic or perspective projection, and configure viewports for split-screen and picture-in-picture.
+description: Create cameras, control how they clear the screen, and explore projection, tone mapping, multi-camera rendering, and camera controls.
 ---
 
-Cameras are responsible for rendering a scene to the screen. You need at least one camera in your scene to see anything. When you create a new scene in PlayCanvas, it is automatically populated with a single camera (along with a directional light).
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
-## Creating a Camera
+Cameras render your scene to the screen. A camera is simply an entity with a [CameraComponent](https://api.playcanvas.com/engine/classes/CameraComponent.html) attached — the scene is drawn from the entity's position and orientation, so you aim a camera by moving and rotating its entity just like any other. Cameras look down their local negative Z axis.
 
-In the Editor's 3D View, an unselected camera is represented with the following icon:
+You need at least one enabled camera in your scene to see anything. Beyond that single camera, there is a lot you can control: the [projection](projection.md) that maps the 3D scene to a 2D image, the [tone mapping](tone-mapping.md) that shapes the final colors, and how [multiple cameras](multiple-cameras.md) compose views for split-screen, overlays, and render-to-texture.
 
-![Camera icon](/img/user-manual/graphics/cameras/camera-icon.png)
+## Creating a Camera {#creating-a-camera}
 
-To create a new camera, simply create a new entity and add a camera component to it. For convenience, the Editor menu has an item that does this in a single step:
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// Create an entity with a camera component
+const camera = new pc.Entity('Camera');
+camera.addComponent('camera', {
+    clearColor: new pc.Color(0.3, 0.3, 0.7)
+});
+app.root.addChild(camera);
+
+// Aim the camera by transforming its entity
+camera.setPosition(0, 5, 10);
+camera.lookAt(0, 0, 0);
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+New scenes are automatically populated with a camera entity. To create another, use the Entity menu, which creates an entity with a [Camera Component](/user-manual/editor/scenes/components/camera) in a single step:
 
 ![Camera creation](/img/user-manual/graphics/cameras/camera-create.png)
 
-## Orthographic vs Perspective Projection
+All camera properties can then be edited in the Inspector.
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+<Entity name="camera" position={[0, 5, 10]}>
+  <Camera clearColor="#4d4db3" />
+</Entity>
+```
+
+See the [`<Camera/>` component reference](/user-manual/react/api/camera) for all available props.
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<pc-entity name="camera" position="0 5 10">
+  <pc-camera clear-color="0.3 0.3 0.7 1"></pc-camera>
+</pc-entity>
+```
+
+See the [`<pc-camera>` tag reference](/user-manual/web-components/tags/pc-camera) for all available attributes.
 
-Cameras can have one of two types of projection: orthographic or perspective. Orthographic cameras define a parallel projection and are often used for 2D or isometric games.
+</TabItem>
+</Tabs>
 
-![Orthographic camera](/img/user-manual/graphics/cameras/camera-orthographic.png)
+## Clearing the Render Target {#clearing}
 
-More commonly used is the perspective projection. It more closely mimics how our eyes or cameras work.
+Before a camera renders the scene, it clears its render target. You can control what gets cleared and to what color:
 
-![Perspective camera](/img/user-manual/graphics/cameras/camera-perspective.png)
+```javascript
+camera.camera.clearColor = new pc.Color(0, 0, 0);
 
-## Controlling the Viewport
+camera.camera.clearColorBuffer = true;   // clear the color buffer (default: true)
+camera.camera.clearDepthBuffer = true;   // clear the depth buffer (default: true)
+camera.camera.clearStencilBuffer = true; // clear the stencil buffer (default: true)
+```
 
-By default, a camera will render to the full width and height of its render target. However, there are circumstances where you might want to change this behavior. For example, perhaps you are writing a game that has a local multiplayer mode that requires split-screen rendering to show each player's viewpoint.
+If your scene has a skybox, it covers the clear color entirely. Disabling the clear flags becomes useful when stacking several cameras on top of each other — see [Multiple Cameras](multiple-cameras.md#camera-stacking).
 
-For 2-player horizontal split screen, you would create two cameras and configure their viewports as follows:
+## In This Section
 
-![Horizontal splitscreen](/img/user-manual/graphics/cameras/camera-horizontal-splitscreen.png)
+* [Projection](projection.md) — perspective vs orthographic projection, field of view, clip planes and frustum culling.
+* [Tone Mapping & Exposure](tone-mapping.md) — map HDR scene lighting to your display, with optional physical exposure controls.
+* [Multiple Cameras](multiple-cameras.md) — compose views with priorities, viewports, layers and render targets.
+* [Camera Controls](camera-controls.md) — add orbit, fly and first-person navigation with the engine's ready-made script.
+* [Screen and World Coordinates](screen-and-world.md) — convert between 2D screen positions and 3D world positions.
+* [Scene Picker](scene-picker.md) — accurately select the objects under a screen coordinate.
+* [Depth Layer](depth-layer.md) — give shaders access to the scene's color and depth buffers.
 
-And for vertical split screen, you would configure the viewports as follows:
+## Going Further
 
-![Vertical splitscreen](/img/user-manual/graphics/cameras/camera-vertical-splitscreen.png)
+* **Post-processing** — bloom, depth of field, SSAO, TAA, vignette and more are applied per camera. See [Post Effects](/user-manual/graphics/posteffects/).
+* **AR and VR** — a camera can drive an immersive WebXR session via [`startXr()`](https://api.playcanvas.com/engine/classes/CameraComponent.html#startxr). See the [XR section](/user-manual/xr/).
+* **Per-camera fog** — override the scene's fog settings on an individual camera with [`fog`](https://api.playcanvas.com/engine/classes/CameraComponent.html#fog).
+* **Custom projections** — supply [`calculateProjection`](https://api.playcanvas.com/engine/classes/CameraComponent.html#calculateprojection) and [`calculateTransform`](https://api.playcanvas.com/engine/classes/CameraComponent.html#calculatetransform) callbacks for advanced effects such as oblique projections and planar reflections.
+* **Tutorials** — try [Camera Following a Path](/tutorials/camera-following-a-path) and [Orbit Camera](/tutorials/orbit-camera).
diff --git a/docs/user-manual/graphics/cameras/multiple-cameras.md b/docs/user-manual/graphics/cameras/multiple-cameras.md
new file mode 100644
index 00000000000..fa90a7b8c55
--- /dev/null
+++ b/docs/user-manual/graphics/cameras/multiple-cameras.md
@@ -0,0 +1,103 @@
+---
+title: Multiple Cameras
+description: Compose views from several cameras using priorities, viewports, layers, and render targets for split-screen, overlays, and more.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+A scene can contain any number of cameras, and they compose into the final image according to a simple model: every enabled camera renders its [layers](#layers) into its [viewport](#viewports) of its render target (the screen, unless a [render target](#render-targets) is set), in order of `priority` — lower values render first.
+
+This model supports a wide range of setups: split-screen multiplayer, picture-in-picture overlays such as minimaps and rear-view mirrors, UI rendered over the 3D scene, and live render-to-texture surfaces like security monitors and portals.
+
+<EngineExample id="camera/multi" title="Multi Camera" />
+
+## Viewports {#viewports}
+
+By default, a camera renders to the full width and height of its render target. The `rect` property restricts rendering to a rectangle, specified as `[x, y, width, height]` in normalized 0–1 coordinates (the origin is the bottom-left corner).
+
+For 2-player horizontal split-screen, two cameras each take half the screen:
+
+![Horizontal splitscreen](/img/user-manual/graphics/cameras/camera-horizontal-splitscreen.png)
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// Player 1: left half of the screen
+camera1.camera.rect = new pc.Vec4(0, 0, 0.5, 1);
+
+// Player 2: right half of the screen, rendered after camera1
+camera2.camera.rect = new pc.Vec4(0.5, 0, 0.5, 1);
+camera2.camera.priority = 1;
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Select each camera in the Hierarchy and set its **Viewport** (X, Y, Width, Height) and **Priority** in the [Camera Component](/user-manual/editor/scenes/components/camera).
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+<Entity name="player1Camera">
+  <Camera rect={[0, 0, 0.5, 1]} />
+</Entity>
+<Entity name="player2Camera">
+  <Camera rect={[0.5, 0, 0.5, 1]} priority={1} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<pc-entity name="player1-camera">
+  <pc-camera rect="0 0 0.5 1"></pc-camera>
+</pc-entity>
+<pc-entity name="player2-camera">
+  <pc-camera rect="0.5 0 0.5 1" priority="1"></pc-camera>
+</pc-entity>
+```
+
+</TabItem>
+</Tabs>
+
+For vertical split-screen, stack the viewports instead — `[0, 0.5, 1, 0.5]` on top and `[0, 0, 1, 0.5]` below:
+
+![Vertical splitscreen](/img/user-manual/graphics/cameras/camera-vertical-splitscreen.png)
+
+A related property, `scissorRect`, clips rendering to a rectangle in the same normalized format without changing how the image is projected into the viewport.
+
+## Layers {#layers}
+
+Each camera renders only the [layers](/user-manual/graphics/layers) listed in its `layers` property, so different cameras can see entirely different subsets of the scene. Typical uses include a UI camera that renders only a UI layer over the game, a minimap camera that skips effects layers, and first-person weapon rendering. See the [Camera Model Masking tutorial](/tutorials/camera-model-masking) for a worked example.
+
+## Camera Stacking {#camera-stacking}
+
+When one camera renders on top of another — a picture-in-picture overlay, or a full-screen camera drawing a different set of layers — the later camera (higher `priority`) must not wipe out the earlier camera's image. Disable its clear flags as appropriate:
+
+```javascript
+// Render an overlay camera on top of the main view, in the bottom-right corner
+overlay.camera.priority = 1;
+overlay.camera.rect = new pc.Vec4(0.7, 0, 0.3, 0.3);
+overlay.camera.clearColorBuffer = true;  // overlay has its own background
+overlay.camera.clearDepthBuffer = true;  // don't depth-test against the main view
+
+// For a full-screen overlay that composites over the main view instead:
+// overlay.camera.clearColorBuffer = false;
+```
+
+## Render Targets {#render-targets}
+
+Instead of the screen, a camera can render into an offscreen texture by assigning a [RenderTarget](https://api.playcanvas.com/engine/classes/RenderTarget.html) to its `renderTarget` property. The resulting texture can then be applied to a material — for in-world screens, mirrors and portals — or processed further. See the engine's render-to-texture example:
+
+<EngineExample id="graphics/render-to-texture" title="Render to Texture" />
+
+## Performance Considerations {#performance-considerations}
+
+* Every enabled camera renders its layers again — draw calls scale with the number of cameras. Restrict each camera's `layers` to the minimum it actually needs.
+* Reducing a camera's `rect` reduces the pixels it fills, but not the per-draw-call CPU cost of the objects it renders.
+* Per-camera [post-processing](/user-manual/graphics/posteffects/) runs once per camera, so effects on split-screen views multiply their GPU cost.
+* Render targets that are only needed occasionally (e.g. a static mirror) don't have to be updated every frame — disable the camera and enable it on demand.
diff --git a/docs/user-manual/graphics/cameras/projection.md b/docs/user-manual/graphics/cameras/projection.md
new file mode 100644
index 00000000000..3523fced8a6
--- /dev/null
+++ b/docs/user-manual/graphics/cameras/projection.md
@@ -0,0 +1,94 @@
+---
+title: Projection
+description: Choose perspective or orthographic projection, set the field of view, and tune clip planes, aspect ratio, and frustum culling.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+A camera's projection defines how the 3D scene is flattened onto a 2D image. PlayCanvas cameras support two projection types: perspective and orthographic.
+
+## Perspective Projection {#perspective}
+
+Perspective projection, the default, mimics how our eyes and physical cameras work: objects appear smaller the further away they are. The volume of space the camera can see — its frustum — is a truncated pyramid.
+
+![Perspective camera](/img/user-manual/graphics/cameras/camera-perspective.png)
+
+The shape of the frustum is controlled by the field of view (`fov`), an angle in degrees that defaults to 45. By default this angle is measured vertically; set `horizontalFov` to `true` to measure it horizontally instead. Larger values take in more of the scene, with a fisheye look at the extreme; smaller values have a zoomed-in, telephoto effect.
+
+## Orthographic Projection {#orthographic}
+
+Orthographic projection is a parallel projection: objects keep the same size on screen regardless of their distance from the camera. The frustum is a cuboid. It is often used for 2D and isometric games, as well as CAD-style visualizations.
+
+![Orthographic camera](/img/user-manual/graphics/cameras/camera-orthographic.png)
+
+Since field of view does not apply, the size of the view is set with `orthoHeight`: half the height of the view volume in world units (defaults to 10). The width is derived from the aspect ratio.
+
+Set the projection type as follows:
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// pc.PROJECTION_PERSPECTIVE (default) | pc.PROJECTION_ORTHOGRAPHIC
+camera.camera.projection = pc.PROJECTION_ORTHOGRAPHIC;
+camera.camera.orthoHeight = 5; // half-height of the view in world units
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Select the camera in the Hierarchy and set **Projection** to **Perspective** or **Orthographic** in the [Camera Component](/user-manual/editor/scenes/components/camera). The **Field of View** or **Ortho Height** field is shown accordingly.
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import { PROJECTION_ORTHOGRAPHIC } from 'playcanvas';
+
+<Entity name="camera">
+  <Camera projection={PROJECTION_ORTHOGRAPHIC} orthoHeight={5} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<!-- perspective is the default; add the orthographic flag to switch -->
+<pc-entity name="camera">
+  <pc-camera orthographic ortho-height="5"></pc-camera>
+</pc-entity>
+```
+
+</TabItem>
+</Tabs>
+
+## Clip Planes {#clip-planes}
+
+The near and far clip planes cap the frustum at both ends, bounding the range of distances the camera can see. Anything closer than `nearClip` (default 0.1) or further than `farClip` (default 1000) is not rendered:
+
+```javascript
+camera.camera.nearClip = 0.5;
+camera.camera.farClip = 500;
+```
+
+:::note
+
+The ratio between the far and near clip planes determines how depth buffer precision is distributed across the scene. If the near plane is very small relative to the far plane, distant surfaces can be left with too little precision to be separated reliably, causing flickering known as z-fighting. To avoid it, set the near plane as large as your scene can tolerate and the far plane no larger than necessary.
+
+:::
+
+## Aspect Ratio {#aspect-ratio}
+
+By default, a camera's aspect ratio is computed automatically every frame from its render target and [viewport](multiple-cameras.md#viewports) (`aspectRatioMode` of `pc.ASPECT_AUTO`), so the image is never stretched as the canvas resizes. For special cases — such as rendering for a display with non-square pixels — set `aspectRatioMode` to `pc.ASPECT_MANUAL` and assign `aspectRatio` yourself.
+
+## Frustum Culling {#frustum-culling}
+
+When frustum culling is enabled (`frustumCulling`, the default), the engine skips rendering any mesh instance whose bounding box falls completely outside the camera's frustum, which can dramatically reduce the number of draw calls in large scenes. Disable it only if you need everything submitted to the GPU regardless of visibility.
+
+The frustum itself is exposed as a [Frustum](https://api.playcanvas.com/engine/classes/Frustum.html) via the read-only `frustum` property, which you can query for custom visibility logic:
+
+```javascript
+const visible = camera.camera.frustum.containsPoint(entity.getPosition());
+```
diff --git a/docs/user-manual/graphics/cameras/screen-and-world.md b/docs/user-manual/graphics/cameras/screen-and-world.md
new file mode 100644
index 00000000000..d2242b3f705
--- /dev/null
+++ b/docs/user-manual/graphics/cameras/screen-and-world.md
@@ -0,0 +1,50 @@
+---
+title: Screen and World Coordinates
+description: Convert between 2D screen positions and 3D world positions with screenToWorld and worldToScreen for picking, placement, and UI.
+---
+
+A camera defines the mapping between the 3D world and the 2D screen, and the [CameraComponent](https://api.playcanvas.com/engine/classes/CameraComponent.html) exposes that mapping in both directions. This is the foundation for mouse picking, placing objects under the cursor, and anchoring 2D UI to 3D objects. The same code works in every workflow — these are runtime API calls made from your scripts.
+
+## Screen to World {#screen-to-world}
+
+[`screenToWorld(x, y, z)`](https://api.playcanvas.com/engine/classes/CameraComponent.html#screentoworld) converts a 2D screen position into a 3D world position. Since a single screen point corresponds to an entire ray of world positions, you also pass `z` — the distance from the camera at which you want the point.
+
+A common pattern is casting a ray from the mouse cursor into the scene, for example to intersect with physics or geometry:
+
+```javascript
+const from = camera.camera.screenToWorld(event.x, event.y, camera.camera.nearClip);
+const to = camera.camera.screenToWorld(event.x, event.y, camera.camera.farClip);
+
+// e.g. raycast against the physics world
+const result = app.systems.rigidbody.raycastFirst(from, to);
+if (result) {
+    console.log(`Hit: ${result.entity.name}`);
+}
+```
+
+Or placing an object at a fixed distance under the cursor:
+
+```javascript
+const pos = camera.camera.screenToWorld(event.x, event.y, 10); // 10 units from the camera
+entity.setPosition(pos);
+```
+
+## World to Screen {#world-to-screen}
+
+[`worldToScreen(worldCoord)`](https://api.playcanvas.com/engine/classes/CameraComponent.html#worldtoscreen) does the reverse: it projects a 3D world position to 2D screen coordinates. This is useful for positioning HTML elements or 2D UI over objects in the scene — name tags, health bars, waypoint markers:
+
+```javascript
+const screenPos = camera.camera.worldToScreen(entity.getPosition());
+
+// Position an absolutely-positioned HTML element over the entity,
+// accounting for the device pixel ratio
+const dpr = window.devicePixelRatio;
+htmlElement.style.left = `${screenPos.x / dpr}px`;
+htmlElement.style.top = `${screenPos.y / dpr}px`;
+```
+
+The returned `z` component holds the depth of the point. For perspective cameras, a negative `z` means the point is behind the camera — check it before showing the element.
+
+## Picking Objects {#picking}
+
+For selecting the exact mesh under the cursor, a ray cast is not always enough — it requires physics colliders and ignores per-pixel detail. The engine's [Picker](https://api.playcanvas.com/engine/classes/Picker.html) renders the scene to determine precisely which mesh instance occupies a screen coordinate. See [Scene Picker](scene-picker.md).
diff --git a/docs/user-manual/graphics/cameras/tone-mapping.md b/docs/user-manual/graphics/cameras/tone-mapping.md
new file mode 100644
index 00000000000..4538f150cc7
--- /dev/null
+++ b/docs/user-manual/graphics/cameras/tone-mapping.md
@@ -0,0 +1,95 @@
+---
+title: Tone Mapping & Exposure
+description: Map HDR scene lighting to your display with per-camera tone mapping and gamma, plus optional physically based exposure controls.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Lighting calculations happen in high dynamic range: the intensity of a pixel can far exceed what a standard display can show. Tone mapping is the final transform that compresses this HDR range into displayable colors, and it has a major impact on the look of your scene. In PlayCanvas, tone mapping is set per camera.
+
+## Tone Mapping {#tone-mapping}
+
+The available tone mapping curves are:
+
+* `TONEMAP_LINEAR` — no compression; bright values simply clip at white. The default.
+* `TONEMAP_FILMIC` — a classic filmic curve with gentle roll-off in the highlights.
+* `TONEMAP_HEJL` — a punchy, contrasty filmic approximation.
+* `TONEMAP_ACES` — the Academy Color Encoding System curve, widely used for cinematic, photorealistic rendering.
+* `TONEMAP_ACES2` — a variant of ACES with a different balance of contrast and saturation.
+* `TONEMAP_NEUTRAL` — compresses highlights while keeping hue and saturation shifts minimal; a good choice when accurate colors matter (e.g. product configurators).
+
+For physically based scenes with HDR lighting, `TONEMAP_ACES` or `TONEMAP_NEUTRAL` are usually the best starting points.
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+camera.camera.toneMapping = pc.TONEMAP_ACES;
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Select the camera in the Hierarchy and set **Tonemapping** in the [Camera Component](/user-manual/editor/scenes/components/camera).
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import { TONEMAP_ACES } from 'playcanvas';
+
+<Entity name="camera">
+  <Camera toneMapping={TONEMAP_ACES} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<!-- tonemap: none | linear | filmic | hejl | aces | aces2 | neutral -->
+<pc-entity name="camera">
+  <pc-camera tonemap="aces"></pc-camera>
+</pc-entity>
+```
+
+</TabItem>
+</Tabs>
+
+:::note
+
+When post-processing is active via [CameraFrame](/user-manual/graphics/posteffects/), tone mapping is applied by the post-processing pipeline instead — set it on the `CameraFrame`'s rendering options rather than the camera.
+
+:::
+
+## Gamma Correction {#gamma-correction}
+
+After tone mapping, the camera's output is gamma-encoded for display on standard sRGB screens. This is controlled by `gammaCorrection`:
+
+* `GAMMA_SRGB` — output is encoded for sRGB displays. The default and recommended setting for all normal rendering.
+* `GAMMA_NONE` — output remains in linear space. This is only intended for advanced HDR pipelines where the output is rendered to an intermediate HDR texture that is tone mapped and gamma-corrected in a subsequent pass. On a standard display, it makes the scene appear too dark.
+
+To understand why rendering is performed in linear space and gamma-encoded at the end, see [Linear Workflow](/user-manual/graphics/linear-workflow/).
+
+## Physical Exposure {#physical-exposure}
+
+By default, scene brightness is controlled by a simple `scene.exposure` multiplier. Alternatively, the camera can model the exposure of a physical camera using three properties familiar to photographers:
+
+```javascript
+app.scene.physicalUnits = true; // light intensities are now in physical units (lux)
+
+camera.camera.aperture = 16;        // f-stops — higher means less exposure (default: 16)
+camera.camera.shutter = 1 / 1000;   // seconds — longer means more exposure (default: 1/1000)
+camera.camera.sensitivity = 1000;   // ISO — higher means more exposure (default: 1000)
+```
+
+:::note
+
+`aperture`, `shutter` and `sensitivity` only take effect when `scene.physicalUnits` is `true`. When it is `false` (the default), `scene.exposure` is used instead.
+
+:::
+
+See it in action in the engine's physical units example:
+
+<EngineExample id="graphics/light-physical-units" title="Physical Light Units" />
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md
new file mode 100644
index 00000000000..22a6ae9b3c2
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md
@@ -0,0 +1,112 @@
+---
+title: カメラコントロール
+description: エンジン付属のcamera-controlsスクリプトで、マウス・タッチ・ゲームパッド対応のオービット、フライ、パンのナビゲーションを任意のカメラに追加します。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+ほとんどのアプリケーションでは、ユーザーがカメラを動かす手段が必要です。これを一から書く代わりに、エンジンに付属する [`scripts/esm/camera-controls.mjs`](https://github.com/playcanvas/engine/blob/main/scripts/esm/camera-controls.mjs) の `CameraControls` スクリプトを使用できます。1つのスクリプトで、プロダクション品質のナビゲーションが手に入ります:
+
+* **オービット** — マウスの左ドラッグでフォーカスポイントを中心に回転、右ドラッグでパン、マウスホイールでズームします。
+* **フライ** — WASDキーでカメラを自由に移動しながら、マウスで視点を動かします。
+* **タッチとゲームパッド** — マルチタッチジェスチャーとゲームパッド入力を標準でサポートします。
+
+スクリプトをカメラエンティティにアタッチします:
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// スクリプトを読み込む（ここではCDNから。アプリにバンドルすることも可能）
+const asset = new pc.Asset('camera-controls', 'script', {
+    url: 'https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs'
+});
+app.assets.add(asset);
+app.assets.load(asset);
+
+asset.ready(() => {
+    // カメラエンティティにアタッチする
+    camera.addComponent('script');
+    camera.script.create('cameraControls', {
+        properties: {
+            focusPoint: new pc.Vec3(0, 1, 0)
+        }
+    });
+});
+```
+
+バンドラーを使用してアプリをビルドする場合は、代わりにスクリプトクラスを直接インポートできます:
+
+```javascript
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+
+camera.addComponent('script');
+camera.script.create(CameraControls);
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+`camera-controls.mjs` をスクリプトアセットとしてプロジェクトに追加します（[エンジンリポジトリ](https://github.com/playcanvas/engine/blob/main/scripts/esm/camera-controls.mjs)からコピーしてください）。次に、カメラエンティティを選択して[Scriptコンポーネント](/user-manual/editor/scenes/components/script)を追加し、**cameraControls** スクリプトを追加します。スクリプトの属性はインスペクターで調整できます。
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Script } from '@playcanvas/react/components';
+
+<Entity name="camera" position={[0, 1, 4]}>
+  <Camera />
+  <Script script={CameraControls} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<pc-app>
+  <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
+  <pc-scene>
+    <pc-entity name="camera" position="0 1 4">
+      <pc-camera></pc-camera>
+      <pc-scripts>
+        <pc-script name="cameraControls"></pc-script>
+      </pc-scripts>
+    </pc-entity>
+  </pc-scene>
+</pc-app>
+```
+
+</TabItem>
+</Tabs>
+
+## 設定 {#configuration}
+
+このスクリプトは豊富な属性を公開しています。よく使われるものは次のとおりです:
+
+| 属性 | デフォルト | 説明 |
+| --- | --- | --- |
+| `enableOrbit` | `true` | オービットコントロールを有効にする |
+| `enableFly` | `true` | フライコントロールを有効にする |
+| `enablePan` | `true` | パンを有効にする |
+| `focusPoint` | `[0, 0, 0]` | カメラが周回する中心点 |
+| `rotateSpeed` | `0.2` | 回転の感度 |
+| `moveSpeed` | `10` | フライの移動速度（`moveFastSpeed` と `moveSlowSpeed` のバリエーションあり） |
+| `zoomSpeed` | `0.001` | ズームの感度 |
+| `pitchRange` | `[-360, 360]` | カメラのピッチ角の制限（度単位） |
+| `zoomRange` | `[0.01, 0]` | ズーム距離の最小/最大（最大が0の場合は無制限） |
+
+ダンピング属性（`rotateDamping`、`moveDamping`、`zoomDamping`、`focusDamping`、すべてデフォルトは `0.98`）は、動きがどれだけ滑らかに減速するかを制御します。0にすると即座に停止します。純粋なオービットカメラを作るにはフライを無効に、純粋なフライカメラを作るにはオービットを無効にしてください。
+
+## サンプル {#examples}
+
+エンジンのサンプルでスクリプトの動作を確認できます:
+
+<EngineExample id="camera/orbit" title="Orbit Camera" />
+
+<EngineExample id="camera/fly" title="Fly Camera" />
+
+独自のカメラロジックを構築したい場合は、[Orbit Cameraチュートリアル](/tutorials/orbit-camera)で完全な実装を解説しています。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
index ebb1484d2a5..3b660fd0457 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
@@ -1,38 +1,95 @@
 ---
 title: カメラ
-description: カメラの追加、正射影と透視投影の選択、分割画面とピクチャインピクチャ向けビューポートの設定です。
+description: カメラの作成、画面クリアの制御に加え、投影、トーンマッピング、マルチカメラレンダリング、カメラコントロールを解説します。
 ---
 
-カメラは、シーンを画面にレンダリングする役割を担っています。何かを見るためには、シーンに少なくとも1つのカメラが必要です。PlayCanvasで新しいシーンを作成すると、1つのカメラ(および方向性のライト)が自動的に配置されます。
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
-## カメラの作成
+カメラはシーンを画面にレンダリングします。カメラは [CameraComponent](https://api.playcanvas.com/engine/classes/CameraComponent.html) がアタッチされた単なるエンティティであり、シーンはそのエンティティの位置と向きからレンダリングされます。そのため、他のエンティティと同じように、エンティティを移動・回転させることでカメラの向きを変えられます。カメラはローカルの負のZ軸方向を向いています。
 
-エディタの3Dビューでは、選択されていないカメラは次のアイコンで表されます:
+何かを表示するには、シーンに少なくとも1つの有効なカメラが必要です。さらに、カメラでは多くのことを制御できます。3Dシーンを2D画像にマッピングする[投影](projection.md)、最終的な色を決定づける[トーンマッピング](tone-mapping.md)、そして分割画面・オーバーレイ・レンダーターゲットへの描画のために[複数のカメラ](multiple-cameras.md)でビューを合成する方法などです。
 
-![Camera icon](/img/user-manual/graphics/cameras/camera-icon.png)
+## カメラの作成 {#creating-a-camera}
 
-新しいカメラを作成するには、単に新しいエンティティを作成し、Cameraコンポーネントを追加してください。便利なため、エディタのメニューには1つのステップでこれを行う項目があります。
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// Cameraコンポーネントを持つエンティティを作成する
+const camera = new pc.Entity('Camera');
+camera.addComponent('camera', {
+    clearColor: new pc.Color(0.3, 0.3, 0.7)
+});
+app.root.addChild(camera);
+
+// エンティティを変換してカメラの向きを定める
+camera.setPosition(0, 5, 10);
+camera.lookAt(0, 0, 0);
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+新しいシーンには自動的にカメラエンティティが配置されます。別のカメラを作成するには、Entityメニューを使用します。これにより、[Cameraコンポーネント](/user-manual/editor/scenes/components/camera)を持つエンティティが1ステップで作成されます。
 
 ![Camera creation](/img/user-manual/graphics/cameras/camera-create.png)
 
-## 正投影と透視投影
+カメラのすべてのプロパティはインスペクターで編集できます。
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+<Entity name="camera" position={[0, 5, 10]}>
+  <Camera clearColor="#4d4db3" />
+</Entity>
+```
+
+利用可能なすべてのpropsは [`<Camera/>` コンポーネントリファレンス](/user-manual/react/api/camera)を参照してください。
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<pc-entity name="camera" position="0 5 10">
+  <pc-camera clear-color="0.3 0.3 0.7 1"></pc-camera>
+</pc-entity>
+```
+
+利用可能なすべての属性は [`<pc-camera>` タグリファレンス](/user-manual/web-components/tags/pc-camera)を参照してください。
 
-カメラには2つの投影タイプ、正投影と透視投影があります。正射法カメラは平行投影を定義し、2Dまたはアイソメトリックゲームによく使用されます。
+</TabItem>
+</Tabs>
 
-![Orthographic camera](/img/user-manual/graphics/cameras/camera-orthographic.png)
+## レンダーターゲットのクリア {#clearing}
 
-より一般的に使用されるのは透視投影です。これは、私たちの目やカメラがどのように機能するかをより近似します。
+カメラはシーンをレンダリングする前に、レンダーターゲットをクリアします。何をどの色でクリアするかは制御できます:
 
-![Perspective camera](/img/user-manual/graphics/cameras/camera-perspective.png)
+```javascript
+camera.camera.clearColor = new pc.Color(0, 0, 0);
 
-## ビューポートの制御
+camera.camera.clearColorBuffer = true;   // カラーバッファをクリア（デフォルト: true）
+camera.camera.clearDepthBuffer = true;   // 深度バッファをクリア（デフォルト: true）
+camera.camera.clearStencilBuffer = true; // ステンシルバッファをクリア（デフォルト: true）
+```
 
-デフォルトでは、カメラはレンダリングターゲットの全幅と全高にレンダリングします。しかし、この振る舞いを変更したい場合もあります。たとえば、ローカルマルチプレイヤーモードがあるゲームを作成していて、各プレイヤーの視点を表示するために分割画面レンダリングが必要な場合などです。
+シーンにスカイボックスがある場合、クリアカラーは完全に覆われます。クリアフラグの無効化は、複数のカメラを重ねて描画する際に役立ちます。詳細は[複数のカメラ](multiple-cameras.md#camera-stacking)を参照してください。
 
-2プレイヤーの水平分割画面の場合、2つのカメラを作成し、それらのビューポートを次のように設定します。
+## このセクションの内容
 
-![Horizontal splitscreen](/img/user-manual/graphics/cameras/camera-horizontal-splitscreen.png)
+* [投影](projection.md) — 透視投影と正投影、視野角、クリップ面とフラスタムカリング。
+* [トーンマッピングと露出](tone-mapping.md) — HDRのシーンライティングをディスプレイにマッピングし、必要に応じて物理ベースの露出を制御します。
+* [複数のカメラ](multiple-cameras.md) — 優先度、ビューポート、レイヤー、レンダーターゲットでビューを合成します。
+* [カメラコントロール](camera-controls.md) — エンジン付属のスクリプトで、オービット・フライ・一人称のナビゲーションを追加します。
+* [スクリーン座標とワールド座標](screen-and-world.md) — 2Dスクリーン位置と3Dワールド位置を相互に変換します。
+* [Scene Picker](scene-picker.md) — スクリーン座標の下にあるオブジェクトを正確に選択します。
+* [Depthレイヤー](depth-layer.md) — シーンのカラーバッファと深度バッファにシェーダーからアクセスします。
 
-そして、垂直分割画面の場合は、次のようにビューポートを設定します。
+## さらに先へ
 
-![Vertical splitscreen](/img/user-manual/graphics/cameras/camera-vertical-splitscreen.png)
+* **ポストプロセッシング** — ブルーム、被写界深度、SSAO、TAA、ビネットなどはカメラごとに適用されます。[ポストエフェクト](/user-manual/graphics/posteffects/)を参照してください。
+* **ARとVR** — カメラは [`startXr()`](https://api.playcanvas.com/engine/classes/CameraComponent.html#startxr) で没入型WebXRセッションを開始できます。[XRセクション](/user-manual/xr/)を参照してください。
+* **カメラごとのフォグ** — [`fog`](https://api.playcanvas.com/engine/classes/CameraComponent.html#fog) でシーンのフォグ設定を個々のカメラで上書きできます。
+* **カスタム投影** — [`calculateProjection`](https://api.playcanvas.com/engine/classes/CameraComponent.html#calculateprojection) と [`calculateTransform`](https://api.playcanvas.com/engine/classes/CameraComponent.html#calculatetransform) のコールバックを指定すると、斜投影や平面反射などの高度なエフェクトを実現できます。
+* **チュートリアル** — [Camera Following a Path](/tutorials/camera-following-a-path) と [Orbit Camera](/tutorials/orbit-camera) を試してみてください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
new file mode 100644
index 00000000000..17053cbf004
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
@@ -0,0 +1,103 @@
+---
+title: 複数のカメラ
+description: 優先度、ビューポート、レイヤー、レンダーターゲットを使い、分割画面やオーバーレイなどに向けて複数カメラのビューを合成します。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+シーンには任意の数のカメラを配置でき、それらはシンプルなモデルに従って最終的な画像へ合成されます。有効なすべてのカメラは、自身の[レイヤー](#layers)を、自身のレンダーターゲット（[レンダーターゲット](#render-targets)が設定されていなければ画面）の[ビューポート](#viewports)に、`priority` の順（小さい値が先）でレンダリングします。
+
+このモデルは幅広い構成をサポートします。分割画面のマルチプレイヤー、ミニマップやバックミラーのようなピクチャインピクチャのオーバーレイ、3Dシーンの上に描画されるUI、監視モニターやポータルのようなレンダーテクスチャのサーフェスなどです。
+
+<EngineExample id="camera/multi" title="Multi Camera" />
+
+## ビューポート {#viewports}
+
+デフォルトでは、カメラはレンダーターゲットの全幅と全高にレンダリングします。`rect` プロパティを使うと、レンダリングを矩形範囲に制限できます。矩形は0〜1の正規化座標で `[x, y, width, height]` として指定します（原点は左下隅です）。
+
+2プレイヤーの水平分割画面では、2つのカメラがそれぞれ画面の半分を使用します:
+
+![Horizontal splitscreen](/img/user-manual/graphics/cameras/camera-horizontal-splitscreen.png)
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// プレイヤー1: 画面の左半分
+camera1.camera.rect = new pc.Vec4(0, 0, 0.5, 1);
+
+// プレイヤー2: 画面の右半分。camera1 の後にレンダリング
+camera2.camera.rect = new pc.Vec4(0.5, 0, 0.5, 1);
+camera2.camera.priority = 1;
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Hierarchyで各カメラを選択し、[Cameraコンポーネント](/user-manual/editor/scenes/components/camera)で **Viewport**（X、Y、Width、Height）と **Priority** を設定します。
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+<Entity name="player1Camera">
+  <Camera rect={[0, 0, 0.5, 1]} />
+</Entity>
+<Entity name="player2Camera">
+  <Camera rect={[0.5, 0, 0.5, 1]} priority={1} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<pc-entity name="player1-camera">
+  <pc-camera rect="0 0 0.5 1"></pc-camera>
+</pc-entity>
+<pc-entity name="player2-camera">
+  <pc-camera rect="0.5 0 0.5 1" priority="1"></pc-camera>
+</pc-entity>
+```
+
+</TabItem>
+</Tabs>
+
+垂直分割画面の場合は、代わりにビューポートを縦に積み重ねます。上が `[0, 0.5, 1, 0.5]`、下が `[0, 0, 1, 0.5]` です:
+
+![Vertical splitscreen](/img/user-manual/graphics/cameras/camera-vertical-splitscreen.png)
+
+関連するプロパティとして `scissorRect` があります。これは同じ正規化形式の矩形でレンダリングをクリップしますが、ビューポートへの投影方法は変更しません。
+
+## レイヤー {#layers}
+
+各カメラは、自身の `layers` プロパティにリストされた[レイヤー](/user-manual/graphics/layers)のみをレンダリングするため、カメラごとにシーンのまったく異なるサブセットを表示できます。典型的な用途としては、ゲームの上にUIレイヤーだけをレンダリングするUIカメラ、エフェクトレイヤーをスキップするミニマップカメラ、一人称視点での武器のレンダリングなどがあります。実例は[Camera Model Maskingチュートリアル](/tutorials/camera-model-masking)を参照してください。
+
+## カメラスタッキング {#camera-stacking}
+
+あるカメラを別のカメラの上にレンダリングする場合（ピクチャインピクチャのオーバーレイや、異なるレイヤーセットを描画するフルスクリーンカメラなど）、後のカメラ（`priority` が大きい方）が先のカメラの画像を消してしまわないようにする必要があります。必要に応じてクリアフラグを無効にします:
+
+```javascript
+// メインビューの上、右下隅にオーバーレイカメラをレンダリングする
+overlay.camera.priority = 1;
+overlay.camera.rect = new pc.Vec4(0.7, 0, 0.3, 0.3);
+overlay.camera.clearColorBuffer = true;  // オーバーレイは独自の背景を持つ
+overlay.camera.clearDepthBuffer = true;  // メインビューと深度テストしない
+
+// メインビューに重ねて合成するフルスクリーンオーバーレイの場合:
+// overlay.camera.clearColorBuffer = false;
+```
+
+## レンダーターゲット {#render-targets}
+
+カメラは画面の代わりに、`renderTarget` プロパティに [RenderTarget](https://api.playcanvas.com/engine/classes/RenderTarget.html) を割り当てることで、オフスクリーンテクスチャにレンダリングできます。生成されたテクスチャはマテリアルに適用して、ゲーム内のスクリーン、鏡、ポータルなどに使ったり、さらに加工したりできます。エンジンのレンダーテクスチャのサンプルを参照してください:
+
+<EngineExample id="graphics/render-to-texture" title="Render to Texture" />
+
+## パフォーマンスに関する考慮事項 {#performance-considerations}
+
+* 有効なカメラはそれぞれ自身のレイヤーを再度レンダリングします。ドローコールはカメラの数に比例して増加します。各カメラの `layers` は、実際に必要な最小限に制限してください。
+* カメラの `rect` を小さくすると塗りつぶすピクセル数は減りますが、レンダリングするオブジェクトのドローコールごとのCPUコストは減りません。
+* カメラごとの[ポストプロセッシング](/user-manual/graphics/posteffects/)はカメラ単位で実行されるため、分割画面ビューにエフェクトを適用するとGPUコストが倍増します。
+* たまにしか更新が必要ないレンダーターゲット（静的な鏡など）は、毎フレーム更新する必要はありません。カメラを無効にしておき、必要なときに有効にしてください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md
new file mode 100644
index 00000000000..115e6814ef1
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md
@@ -0,0 +1,94 @@
+---
+title: 投影
+description: 透視投影または正投影の選択、視野角の設定、クリップ面・アスペクト比・フラスタムカリングの調整を解説します。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+カメラの投影は、3Dシーンをどのように2D画像へ平面化するかを定義します。PlayCanvasのカメラは、透視投影と正投影の2つの投影タイプをサポートしています。
+
+## 透視投影 {#perspective}
+
+デフォルトである透視投影は、私たちの目や実際のカメラの仕組みを模倣します。遠くにあるオブジェクトほど小さく見えます。カメラが見ることのできる空間の体積（フラスタム）は、四角錐台の形になります。
+
+![Perspective camera](/img/user-manual/graphics/cameras/camera-perspective.png)
+
+フラスタムの形状は視野角（`fov`）で制御します。これは度単位の角度で、デフォルトは45です。デフォルトではこの角度は垂直方向に測られますが、`horizontalFov` を `true` に設定すると水平方向で測られます。値を大きくするとより広い範囲が映り、極端な場合は魚眼レンズのような見た目になります。値を小さくすると、ズームインした望遠レンズのような効果になります。
+
+## 正投影 {#orthographic}
+
+正投影は平行投影です。オブジェクトはカメラからの距離に関係なく、画面上で同じ大きさを保ちます。フラスタムは直方体になります。2Dゲームやアイソメトリックゲーム、CADスタイルのビジュアライゼーションでよく使用されます。
+
+![Orthographic camera](/img/user-manual/graphics/cameras/camera-orthographic.png)
+
+視野角は適用されないため、ビューのサイズは `orthoHeight` で設定します。これはワールド単位でのビューボリュームの高さの半分です（デフォルトは10）。幅はアスペクト比から導出されます。
+
+投影タイプは次のように設定します:
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+// pc.PROJECTION_PERSPECTIVE（デフォルト） | pc.PROJECTION_ORTHOGRAPHIC
+camera.camera.projection = pc.PROJECTION_ORTHOGRAPHIC;
+camera.camera.orthoHeight = 5; // ワールド単位でのビューの高さの半分
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Hierarchyでカメラを選択し、[Cameraコンポーネント](/user-manual/editor/scenes/components/camera)で **Projection** を **Perspective** または **Orthographic** に設定します。それに応じて **Field of View** または **Ortho Height** フィールドが表示されます。
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import { PROJECTION_ORTHOGRAPHIC } from 'playcanvas';
+
+<Entity name="camera">
+  <Camera projection={PROJECTION_ORTHOGRAPHIC} orthoHeight={5} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<!-- デフォルトは透視投影。orthographic フラグを追加すると切り替わります -->
+<pc-entity name="camera">
+  <pc-camera orthographic ortho-height="5"></pc-camera>
+</pc-entity>
+```
+
+</TabItem>
+</Tabs>
+
+## クリップ面 {#clip-planes}
+
+ニアクリップ面とファークリップ面はフラスタムの両端を区切り、カメラが見ることのできる距離の範囲を制限します。`nearClip`（デフォルト 0.1）より近いもの、または `farClip`（デフォルト 1000）より遠いものはレンダリングされません:
+
+```javascript
+camera.camera.nearClip = 0.5;
+camera.camera.farClip = 500;
+```
+
+:::note
+
+ファークリップ面とニアクリップ面の比率は、深度バッファの精度がシーン全体にどのように分配されるかを決定します。ニア面がファー面に対して非常に小さい場合、遠くのサーフェスを確実に区別するための精度が不足し、Zファイティングと呼ばれるちらつきが発生することがあります。これを避けるには、ニア面はシーンが許容できる範囲でできるだけ大きく、ファー面は必要以上に大きくしないように設定してください。
+
+:::
+
+## アスペクト比 {#aspect-ratio}
+
+デフォルトでは、カメラのアスペクト比はレンダーターゲットと[ビューポート](multiple-cameras.md#viewports)から毎フレーム自動的に計算されるため（`aspectRatioMode` が `pc.ASPECT_AUTO`）、キャンバスのサイズが変わっても画像が引き伸ばされることはありません。非正方形ピクセルのディスプレイ向けにレンダリングするなどの特殊なケースでは、`aspectRatioMode` を `pc.ASPECT_MANUAL` に設定し、`aspectRatio` を自分で指定してください。
+
+## フラスタムカリング {#frustum-culling}
+
+フラスタムカリングが有効な場合（`frustumCulling`、デフォルトで有効）、エンジンはバウンディングボックスがカメラのフラスタムの完全に外側にあるメッシュインスタンスのレンダリングをスキップします。これにより、大規模なシーンではドローコール数を大幅に削減できます。可視性に関係なくすべてをGPUに送信する必要がある場合にのみ無効にしてください。
+
+フラスタム自体は読み取り専用の `frustum` プロパティから [Frustum](https://api.playcanvas.com/engine/classes/Frustum.html) として公開されており、カスタムの可視性判定に利用できます:
+
+```javascript
+const visible = camera.camera.frustum.containsPoint(entity.getPosition());
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/screen-and-world.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/screen-and-world.md
new file mode 100644
index 00000000000..24ed6253b49
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/screen-and-world.md
@@ -0,0 +1,50 @@
+---
+title: スクリーン座標とワールド座標
+description: ピッキング、オブジェクト配置、UIのためにscreenToWorldとworldToScreenで2Dスクリーン位置と3Dワールド位置を相互変換します。
+---
+
+カメラは3Dワールドと2Dスクリーンの間のマッピングを定義しており、[CameraComponent](https://api.playcanvas.com/engine/classes/CameraComponent.html) はそのマッピングを双方向で公開しています。これは、マウスピッキング、カーソル下へのオブジェクト配置、3Dオブジェクトへの2D UIの追従の基礎となります。これらはスクリプトから呼び出すランタイムAPIなので、どのワークフローでも同じコードが動作します。
+
+## スクリーンからワールドへ {#screen-to-world}
+
+[`screenToWorld(x, y, z)`](https://api.playcanvas.com/engine/classes/CameraComponent.html#screentoworld) は、2Dスクリーン位置を3Dワールド位置に変換します。1つのスクリーン上の点はワールド空間のレイ（光線）全体に対応するため、その点が欲しいカメラからの距離 `z` も渡します。
+
+よくあるパターンは、マウスカーソルからシーンへレイをキャストし、物理やジオメトリと交差させるものです:
+
+```javascript
+const from = camera.camera.screenToWorld(event.x, event.y, camera.camera.nearClip);
+const to = camera.camera.screenToWorld(event.x, event.y, camera.camera.farClip);
+
+// 例: 物理ワールドに対するレイキャスト
+const result = app.systems.rigidbody.raycastFirst(from, to);
+if (result) {
+    console.log(`Hit: ${result.entity.name}`);
+}
+```
+
+また、カーソルの下の固定距離にオブジェクトを配置することもできます:
+
+```javascript
+const pos = camera.camera.screenToWorld(event.x, event.y, 10); // カメラから10ユニット
+entity.setPosition(pos);
+```
+
+## ワールドからスクリーンへ {#world-to-screen}
+
+[`worldToScreen(worldCoord)`](https://api.playcanvas.com/engine/classes/CameraComponent.html#worldtoscreen) はその逆を行います。3Dワールド位置を2Dスクリーン座標に投影します。これは、シーン内のオブジェクトの上にHTML要素や2D UIを配置する場合に便利です。ネームタグ、ヘルスバー、ウェイポイントマーカーなどに使えます:
+
+```javascript
+const screenPos = camera.camera.worldToScreen(entity.getPosition());
+
+// デバイスピクセル比を考慮しながら、絶対配置のHTML要素を
+// エンティティの上に配置する
+const dpr = window.devicePixelRatio;
+htmlElement.style.left = `${screenPos.x / dpr}px`;
+htmlElement.style.top = `${screenPos.y / dpr}px`;
+```
+
+戻り値の `z` 成分には、その点の深度が格納されます。透視投影カメラでは、`z` が負の場合はその点がカメラの後ろにあることを意味するため、要素を表示する前に確認してください。
+
+## オブジェクトのピッキング {#picking}
+
+カーソル下の正確なメッシュを選択するには、レイキャストだけでは不十分なことがあります。レイキャストには物理コライダーが必要で、ピクセル単位のディテールも無視されます。エンジンの [Picker](https://api.playcanvas.com/engine/classes/Picker.html) はシーンをレンダリングして、スクリーン座標を占めているメッシュインスタンスを正確に判定します。[Scene Picker](scene-picker.md)を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
new file mode 100644
index 00000000000..96ba4886ce6
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
@@ -0,0 +1,95 @@
+---
+title: トーンマッピングと露出
+description: カメラごとのトーンマッピングとガンマでHDRのシーンライティングをディスプレイにマッピングし、物理ベースの露出も制御します。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+ライティングの計算はハイダイナミックレンジ（HDR）で行われます。ピクセルの明るさは、標準的なディスプレイで表示できる範囲を大きく超えることがあります。トーンマッピングは、このHDRの範囲を表示可能な色に圧縮する最終的な変換であり、シーンの見た目に大きな影響を与えます。PlayCanvasでは、トーンマッピングはカメラごとに設定します。
+
+## トーンマッピング {#tone-mapping}
+
+利用可能なトーンマッピングカーブは次のとおりです:
+
+* `TONEMAP_LINEAR` — 圧縮なし。明るい値は単純に白でクリップされます。デフォルトです。
+* `TONEMAP_FILMIC` — ハイライトが緩やかにロールオフする、クラシックなフィルミックカーブ。
+* `TONEMAP_HEJL` — パンチが効いてコントラストの強いフィルミック近似。
+* `TONEMAP_ACES` — Academy Color Encoding Systemのカーブで、映画的でフォトリアルなレンダリングに広く使用されています。
+* `TONEMAP_ACES2` — コントラストと彩度のバランスが異なるACESのバリエーション。
+* `TONEMAP_NEUTRAL` — 色相と彩度の変化を最小限に抑えながらハイライトを圧縮します。正確な色再現が重要な場合（製品コンフィギュレーターなど）に適しています。
+
+HDRライティングを使用する物理ベースのシーンでは、通常 `TONEMAP_ACES` または `TONEMAP_NEUTRAL` が最適な出発点です。
+
+<Tabs groupId="workflow" defaultValue="engine">
+<TabItem value="engine" label="Engine">
+
+```javascript
+camera.camera.toneMapping = pc.TONEMAP_ACES;
+```
+
+</TabItem>
+<TabItem value="editor" label="Editor">
+
+Hierarchyでカメラを選択し、[Cameraコンポーネント](/user-manual/editor/scenes/components/camera)で **Tonemapping** を設定します。
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import { TONEMAP_ACES } from 'playcanvas';
+
+<Entity name="camera">
+  <Camera toneMapping={TONEMAP_ACES} />
+</Entity>
+```
+
+</TabItem>
+<TabItem value="web-components" label="Web Components">
+
+```html
+<!-- tonemap: none | linear | filmic | hejl | aces | aces2 | neutral -->
+<pc-entity name="camera">
+  <pc-camera tonemap="aces"></pc-camera>
+</pc-entity>
+```
+
+</TabItem>
+</Tabs>
+
+:::note
+
+[CameraFrame](/user-manual/graphics/posteffects/) によるポストプロセッシングが有効な場合、トーンマッピングはポストプロセッシングパイプライン側で適用されます。カメラではなく `CameraFrame` のレンダリングオプションで設定してください。
+
+:::
+
+## ガンマ補正 {#gamma-correction}
+
+トーンマッピングの後、カメラの出力は標準的なsRGBディスプレイ向けにガンマエンコードされます。これは `gammaCorrection` で制御します:
+
+* `GAMMA_SRGB` — 出力はsRGBディスプレイ向けにエンコードされます。デフォルトであり、通常のレンダリングすべてに推奨される設定です。
+* `GAMMA_NONE` — 出力はリニア空間のままになります。これは、出力を中間HDRテクスチャにレンダリングし、後続のパスでトーンマッピングとガンマ補正を行う高度なHDRパイプラインのみを対象としています。標準的なディスプレイでは、シーンが暗く見えすぎてしまいます。
+
+レンダリングがリニア空間で行われ、最後にガンマエンコードされる理由については、[リニアワークフロー](/user-manual/graphics/linear-workflow/)を参照してください。
+
+## 物理ベースの露出 {#physical-exposure}
+
+デフォルトでは、シーンの明るさはシンプルな `scene.exposure` の乗数で制御されます。代わりに、写真家にはおなじみの3つのプロパティを使って、物理カメラの露出をモデル化することもできます:
+
+```javascript
+app.scene.physicalUnits = true; // ライトの強度が物理単位（ルクス）になります
+
+camera.camera.aperture = 16;        // f値 — 大きいほど露出は少なくなります（デフォルト: 16）
+camera.camera.shutter = 1 / 1000;   // 秒 — 長いほど露出は多くなります（デフォルト: 1/1000）
+camera.camera.sensitivity = 1000;   // ISO — 高いほど露出は多くなります（デフォルト: 1000）
+```
+
+:::note
+
+`aperture`、`shutter`、`sensitivity` は `scene.physicalUnits` が `true` の場合にのみ効果があります。`false`（デフォルト）の場合は、代わりに `scene.exposure` が使用されます。
+
+:::
+
+エンジンの物理ライト単位のサンプルで実際の動作を確認できます:
+
+<EngineExample id="graphics/light-physical-units" title="Physical Light Units" />
diff --git a/sidebars.js b/sidebars.js
index 25566ec27e9..a6cb3ba2b24 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -714,8 +714,13 @@ const sidebars = {
             id: 'user-manual/graphics/cameras/index',
           },
           items: [
-            'user-manual/graphics/cameras/depth-layer',
+            'user-manual/graphics/cameras/projection',
+            'user-manual/graphics/cameras/tone-mapping',
+            'user-manual/graphics/cameras/multiple-cameras',
+            'user-manual/graphics/cameras/camera-controls',
+            'user-manual/graphics/cameras/screen-and-world',
             'user-manual/graphics/cameras/scene-picker',
+            'user-manual/graphics/cameras/depth-layer',
           ],
         },
         {

From 35b6f10eb04c3c66415ee9bc5fd93728d74373cb Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Fri, 12 Jun 2026 14:03:34 +0100
Subject: [PATCH 2/6] docs: move render target clearing from Cameras landing
 page to Multiple Cameras

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/user-manual/graphics/cameras/index.md       | 16 +---------------
 .../graphics/cameras/multiple-cameras.md         | 14 ++++++++++++++
 .../user-manual/graphics/cameras/index.md        | 16 +---------------
 .../graphics/cameras/multiple-cameras.md         | 14 ++++++++++++++
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/docs/user-manual/graphics/cameras/index.md b/docs/user-manual/graphics/cameras/index.md
index 74f71c07929..b2fde0d3114 100644
--- a/docs/user-manual/graphics/cameras/index.md
+++ b/docs/user-manual/graphics/cameras/index.md
@@ -1,6 +1,6 @@
 ---
 title: Cameras
-description: Create cameras, control how they clear the screen, and explore projection, tone mapping, multi-camera rendering, and camera controls.
+description: Create cameras and explore projection, tone mapping, multi-camera rendering, camera controls, and coordinate conversion.
 ---
 
 import Tabs from '@theme/Tabs';
@@ -62,20 +62,6 @@ See the [`<pc-camera>` tag reference](/user-manual/web-components/tags/pc-camera
 </TabItem>
 </Tabs>
 
-## Clearing the Render Target {#clearing}
-
-Before a camera renders the scene, it clears its render target. You can control what gets cleared and to what color:
-
-```javascript
-camera.camera.clearColor = new pc.Color(0, 0, 0);
-
-camera.camera.clearColorBuffer = true;   // clear the color buffer (default: true)
-camera.camera.clearDepthBuffer = true;   // clear the depth buffer (default: true)
-camera.camera.clearStencilBuffer = true; // clear the stencil buffer (default: true)
-```
-
-If your scene has a skybox, it covers the clear color entirely. Disabling the clear flags becomes useful when stacking several cameras on top of each other — see [Multiple Cameras](multiple-cameras.md#camera-stacking).
-
 ## In This Section
 
 * [Projection](projection.md) — perspective vs orthographic projection, field of view, clip planes and frustum culling.
diff --git a/docs/user-manual/graphics/cameras/multiple-cameras.md b/docs/user-manual/graphics/cameras/multiple-cameras.md
index fa90a7b8c55..8ea0e644355 100644
--- a/docs/user-manual/graphics/cameras/multiple-cameras.md
+++ b/docs/user-manual/graphics/cameras/multiple-cameras.md
@@ -74,6 +74,20 @@ A related property, `scissorRect`, clips rendering to a rectangle in the same no
 
 Each camera renders only the [layers](/user-manual/graphics/layers) listed in its `layers` property, so different cameras can see entirely different subsets of the scene. Typical uses include a UI camera that renders only a UI layer over the game, a minimap camera that skips effects layers, and first-person weapon rendering. See the [Camera Model Masking tutorial](/tutorials/camera-model-masking) for a worked example.
 
+## Clearing the Render Target {#clearing}
+
+Before a camera renders the scene, it clears its render target. You can control what gets cleared and to what color:
+
+```javascript
+camera.camera.clearColor = new pc.Color(0, 0, 0);
+
+camera.camera.clearColorBuffer = true;   // clear the color buffer (default: true)
+camera.camera.clearDepthBuffer = true;   // clear the depth buffer (default: true)
+camera.camera.clearStencilBuffer = true; // clear the stencil buffer (default: true)
+```
+
+If your scene has a skybox, it covers the clear color entirely. Disabling the clear flags is the building block for camera stacking, described next.
+
 ## Camera Stacking {#camera-stacking}
 
 When one camera renders on top of another — a picture-in-picture overlay, or a full-screen camera drawing a different set of layers — the later camera (higher `priority`) must not wipe out the earlier camera's image. Disable its clear flags as appropriate:
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
index 3b660fd0457..1a316c35479 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
@@ -1,6 +1,6 @@
 ---
 title: カメラ
-description: カメラの作成、画面クリアの制御に加え、投影、トーンマッピング、マルチカメラレンダリング、カメラコントロールを解説します。
+description: カメラの作成に加え、投影、トーンマッピング、マルチカメラレンダリング、カメラコントロール、座標変換を解説します。
 ---
 
 import Tabs from '@theme/Tabs';
@@ -62,20 +62,6 @@ camera.lookAt(0, 0, 0);
 </TabItem>
 </Tabs>
 
-## レンダーターゲットのクリア {#clearing}
-
-カメラはシーンをレンダリングする前に、レンダーターゲットをクリアします。何をどの色でクリアするかは制御できます:
-
-```javascript
-camera.camera.clearColor = new pc.Color(0, 0, 0);
-
-camera.camera.clearColorBuffer = true;   // カラーバッファをクリア（デフォルト: true）
-camera.camera.clearDepthBuffer = true;   // 深度バッファをクリア（デフォルト: true）
-camera.camera.clearStencilBuffer = true; // ステンシルバッファをクリア（デフォルト: true）
-```
-
-シーンにスカイボックスがある場合、クリアカラーは完全に覆われます。クリアフラグの無効化は、複数のカメラを重ねて描画する際に役立ちます。詳細は[複数のカメラ](multiple-cameras.md#camera-stacking)を参照してください。
-
 ## このセクションの内容
 
 * [投影](projection.md) — 透視投影と正投影、視野角、クリップ面とフラスタムカリング。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
index 17053cbf004..9ff7bab575d 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
@@ -74,6 +74,20 @@ Hierarchyで各カメラを選択し、[Cameraコンポーネント](/user-manua
 
 各カメラは、自身の `layers` プロパティにリストされた[レイヤー](/user-manual/graphics/layers)のみをレンダリングするため、カメラごとにシーンのまったく異なるサブセットを表示できます。典型的な用途としては、ゲームの上にUIレイヤーだけをレンダリングするUIカメラ、エフェクトレイヤーをスキップするミニマップカメラ、一人称視点での武器のレンダリングなどがあります。実例は[Camera Model Maskingチュートリアル](/tutorials/camera-model-masking)を参照してください。
 
+## レンダーターゲットのクリア {#clearing}
+
+カメラはシーンをレンダリングする前に、レンダーターゲットをクリアします。何をどの色でクリアするかは制御できます:
+
+```javascript
+camera.camera.clearColor = new pc.Color(0, 0, 0);
+
+camera.camera.clearColorBuffer = true;   // カラーバッファをクリア（デフォルト: true）
+camera.camera.clearDepthBuffer = true;   // 深度バッファをクリア（デフォルト: true）
+camera.camera.clearStencilBuffer = true; // ステンシルバッファをクリア（デフォルト: true）
+```
+
+シーンにスカイボックスがある場合、クリアカラーは完全に覆われます。クリアフラグの無効化は、次に説明するカメラスタッキングの基礎となります。
+
 ## カメラスタッキング {#camera-stacking}
 
 あるカメラを別のカメラの上にレンダリングする場合（ピクチャインピクチャのオーバーレイや、異なるレイヤーセットを描画するフルスクリーンカメラなど）、後のカメラ（`priority` が大きい方）が先のカメラの画像を消してしまわないようにする必要があります。必要に応じてクリアフラグを無効にします:

From 044853cb6792e61beec166360f227f6e6fc73c17 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Fri, 12 Jun 2026 14:06:24 +0100
Subject: [PATCH 3/6] docs: give render target clearing its own Cameras subpage

Clearing applies to single-camera setups too (background color,
transparent canvases), so it doesn't belong on the Multiple Cameras
page. Promote it to a dedicated Clearing page, adding coverage of
transparent backgrounds over the web page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/user-manual/graphics/cameras/clearing.md | 29 +++++++++++++++++++
 docs/user-manual/graphics/cameras/index.md    |  1 +
 .../graphics/cameras/multiple-cameras.md      | 16 +---------
 .../user-manual/graphics/cameras/clearing.md  | 29 +++++++++++++++++++
 .../user-manual/graphics/cameras/index.md     |  1 +
 .../graphics/cameras/multiple-cameras.md      | 16 +---------
 sidebars.js                                   |  1 +
 7 files changed, 63 insertions(+), 30 deletions(-)
 create mode 100644 docs/user-manual/graphics/cameras/clearing.md
 create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/clearing.md

diff --git a/docs/user-manual/graphics/cameras/clearing.md b/docs/user-manual/graphics/cameras/clearing.md
new file mode 100644
index 00000000000..42ee90198e2
--- /dev/null
+++ b/docs/user-manual/graphics/cameras/clearing.md
@@ -0,0 +1,29 @@
+---
+title: Clearing
+description: Control how a camera clears its render target — set the background color, make the canvas transparent, or disable clearing entirely.
+---
+
+Before a camera renders the scene, it clears its render target — the screen, unless a [render target](multiple-cameras.md#render-targets) is assigned. You can control what gets cleared and to what color:
+
+```javascript
+camera.camera.clearColor = new pc.Color(0, 0, 0);
+
+camera.camera.clearColorBuffer = true;   // clear the color buffer (default: true)
+camera.camera.clearDepthBuffer = true;   // clear the depth buffer (default: true)
+camera.camera.clearStencilBuffer = true; // clear the stencil buffer (default: true)
+```
+
+The clear color is effectively the background color of your scene — though if your scene has a skybox, it covers the clear color entirely.
+
+## Transparent Backgrounds {#transparent-backgrounds}
+
+The clear color has an alpha channel, and the application's canvas supports transparency by default. This means a single camera can render the scene over the surrounding web page — useful for 3D product views, headers, and other embedded content:
+
+```javascript
+// The web page shows through wherever nothing is drawn
+camera.camera.clearColor = new pc.Color(0, 0, 0, 0);
+```
+
+## Disabling Clearing {#disabling-clearing}
+
+Disabling the clear flags keeps the existing contents of the render target, which is the building block for compositing several cameras into one image — see [Camera Stacking](multiple-cameras.md#camera-stacking).
diff --git a/docs/user-manual/graphics/cameras/index.md b/docs/user-manual/graphics/cameras/index.md
index b2fde0d3114..ee26e30a083 100644
--- a/docs/user-manual/graphics/cameras/index.md
+++ b/docs/user-manual/graphics/cameras/index.md
@@ -65,6 +65,7 @@ See the [`<pc-camera>` tag reference](/user-manual/web-components/tags/pc-camera
 ## In This Section
 
 * [Projection](projection.md) — perspective vs orthographic projection, field of view, clip planes and frustum culling.
+* [Clearing](clearing.md) — set the background color, make the canvas transparent, or disable clearing.
 * [Tone Mapping & Exposure](tone-mapping.md) — map HDR scene lighting to your display, with optional physical exposure controls.
 * [Multiple Cameras](multiple-cameras.md) — compose views with priorities, viewports, layers and render targets.
 * [Camera Controls](camera-controls.md) — add orbit, fly and first-person navigation with the engine's ready-made script.
diff --git a/docs/user-manual/graphics/cameras/multiple-cameras.md b/docs/user-manual/graphics/cameras/multiple-cameras.md
index 8ea0e644355..d2d5c7c0393 100644
--- a/docs/user-manual/graphics/cameras/multiple-cameras.md
+++ b/docs/user-manual/graphics/cameras/multiple-cameras.md
@@ -74,23 +74,9 @@ A related property, `scissorRect`, clips rendering to a rectangle in the same no
 
 Each camera renders only the [layers](/user-manual/graphics/layers) listed in its `layers` property, so different cameras can see entirely different subsets of the scene. Typical uses include a UI camera that renders only a UI layer over the game, a minimap camera that skips effects layers, and first-person weapon rendering. See the [Camera Model Masking tutorial](/tutorials/camera-model-masking) for a worked example.
 
-## Clearing the Render Target {#clearing}
-
-Before a camera renders the scene, it clears its render target. You can control what gets cleared and to what color:
-
-```javascript
-camera.camera.clearColor = new pc.Color(0, 0, 0);
-
-camera.camera.clearColorBuffer = true;   // clear the color buffer (default: true)
-camera.camera.clearDepthBuffer = true;   // clear the depth buffer (default: true)
-camera.camera.clearStencilBuffer = true; // clear the stencil buffer (default: true)
-```
-
-If your scene has a skybox, it covers the clear color entirely. Disabling the clear flags is the building block for camera stacking, described next.
-
 ## Camera Stacking {#camera-stacking}
 
-When one camera renders on top of another — a picture-in-picture overlay, or a full-screen camera drawing a different set of layers — the later camera (higher `priority`) must not wipe out the earlier camera's image. Disable its clear flags as appropriate:
+When one camera renders on top of another — a picture-in-picture overlay, or a full-screen camera drawing a different set of layers — the later camera (higher `priority`) must not wipe out the earlier camera's image. Disable its [clear flags](clearing.md) as appropriate:
 
 ```javascript
 // Render an overlay camera on top of the main view, in the bottom-right corner
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/clearing.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/clearing.md
new file mode 100644
index 00000000000..8ef10617d0b
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/clearing.md
@@ -0,0 +1,29 @@
+---
+title: クリア
+description: カメラがレンダーターゲットをクリアする方法を制御します。背景色の設定、キャンバスの透明化、クリアの無効化を解説します。
+---
+
+カメラはシーンをレンダリングする前に、レンダーターゲットをクリアします。レンダーターゲットは、[レンダーターゲット](multiple-cameras.md#render-targets)が割り当てられていない限り、画面です。何をどの色でクリアするかは制御できます:
+
+```javascript
+camera.camera.clearColor = new pc.Color(0, 0, 0);
+
+camera.camera.clearColorBuffer = true;   // カラーバッファをクリア（デフォルト: true）
+camera.camera.clearDepthBuffer = true;   // 深度バッファをクリア（デフォルト: true）
+camera.camera.clearStencilBuffer = true; // ステンシルバッファをクリア（デフォルト: true）
+```
+
+クリアカラーは、実質的にシーンの背景色です。ただし、シーンにスカイボックスがある場合は、クリアカラーは完全に覆われます。
+
+## 透明な背景 {#transparent-backgrounds}
+
+クリアカラーにはアルファチャンネルがあり、アプリケーションのキャンバスはデフォルトで透明度をサポートしています。つまり、1つのカメラだけでも、シーンを周囲のWebページの上にレンダリングできます。3D製品ビュー、ヘッダーなどの埋め込みコンテンツに便利です:
+
+```javascript
+// 何も描画されていない部分にはWebページが透けて見える
+camera.camera.clearColor = new pc.Color(0, 0, 0, 0);
+```
+
+## クリアの無効化 {#disabling-clearing}
+
+クリアフラグを無効にすると、レンダーターゲットの既存の内容が保持されます。これは複数のカメラを1つの画像に合成する際の基礎となります。[カメラスタッキング](multiple-cameras.md#camera-stacking)を参照してください。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
index 1a316c35479..2a84bc4a3a0 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/index.md
@@ -65,6 +65,7 @@ camera.lookAt(0, 0, 0);
 ## このセクションの内容
 
 * [投影](projection.md) — 透視投影と正投影、視野角、クリップ面とフラスタムカリング。
+* [クリア](clearing.md) — 背景色の設定、キャンバスの透明化、クリアの無効化。
 * [トーンマッピングと露出](tone-mapping.md) — HDRのシーンライティングをディスプレイにマッピングし、必要に応じて物理ベースの露出を制御します。
 * [複数のカメラ](multiple-cameras.md) — 優先度、ビューポート、レイヤー、レンダーターゲットでビューを合成します。
 * [カメラコントロール](camera-controls.md) — エンジン付属のスクリプトで、オービット・フライ・一人称のナビゲーションを追加します。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
index 9ff7bab575d..8c9743ef5f0 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
@@ -74,23 +74,9 @@ Hierarchyで各カメラを選択し、[Cameraコンポーネント](/user-manua
 
 各カメラは、自身の `layers` プロパティにリストされた[レイヤー](/user-manual/graphics/layers)のみをレンダリングするため、カメラごとにシーンのまったく異なるサブセットを表示できます。典型的な用途としては、ゲームの上にUIレイヤーだけをレンダリングするUIカメラ、エフェクトレイヤーをスキップするミニマップカメラ、一人称視点での武器のレンダリングなどがあります。実例は[Camera Model Maskingチュートリアル](/tutorials/camera-model-masking)を参照してください。
 
-## レンダーターゲットのクリア {#clearing}
-
-カメラはシーンをレンダリングする前に、レンダーターゲットをクリアします。何をどの色でクリアするかは制御できます:
-
-```javascript
-camera.camera.clearColor = new pc.Color(0, 0, 0);
-
-camera.camera.clearColorBuffer = true;   // カラーバッファをクリア（デフォルト: true）
-camera.camera.clearDepthBuffer = true;   // 深度バッファをクリア（デフォルト: true）
-camera.camera.clearStencilBuffer = true; // ステンシルバッファをクリア（デフォルト: true）
-```
-
-シーンにスカイボックスがある場合、クリアカラーは完全に覆われます。クリアフラグの無効化は、次に説明するカメラスタッキングの基礎となります。
-
 ## カメラスタッキング {#camera-stacking}
 
-あるカメラを別のカメラの上にレンダリングする場合（ピクチャインピクチャのオーバーレイや、異なるレイヤーセットを描画するフルスクリーンカメラなど）、後のカメラ（`priority` が大きい方）が先のカメラの画像を消してしまわないようにする必要があります。必要に応じてクリアフラグを無効にします:
+あるカメラを別のカメラの上にレンダリングする場合（ピクチャインピクチャのオーバーレイや、異なるレイヤーセットを描画するフルスクリーンカメラなど）、後のカメラ（`priority` が大きい方）が先のカメラの画像を消してしまわないようにする必要があります。必要に応じて[クリアフラグ](clearing.md)を無効にします:
 
 ```javascript
 // メインビューの上、右下隅にオーバーレイカメラをレンダリングする
diff --git a/sidebars.js b/sidebars.js
index a6cb3ba2b24..639c0897b3f 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -715,6 +715,7 @@ const sidebars = {
           },
           items: [
             'user-manual/graphics/cameras/projection',
+            'user-manual/graphics/cameras/clearing',
             'user-manual/graphics/cameras/tone-mapping',
             'user-manual/graphics/cameras/multiple-cameras',
             'user-manual/graphics/cameras/camera-controls',

From 3ad2f080912871d9cf6ad3cb592f3cd0a134cfcc Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Fri, 12 Jun 2026 14:10:51 +0100
Subject: [PATCH 4/6] docs: swap misplaced engine example embeds on camera
 pages

camera/multi demonstrates the combined CameraControls scheme, not
multi-camera rendering - move it to the Camera Controls page and use
graphics/multi-view (two cameras with separate rects and layers) on
the Multiple Cameras page instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/user-manual/graphics/cameras/camera-controls.md            | 2 ++
 docs/user-manual/graphics/cameras/multiple-cameras.md           | 2 +-
 .../current/user-manual/graphics/cameras/camera-controls.md     | 2 ++
 .../current/user-manual/graphics/cameras/multiple-cameras.md    | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/user-manual/graphics/cameras/camera-controls.md b/docs/user-manual/graphics/cameras/camera-controls.md
index 9ab831e0499..7c0fff3d9eb 100644
--- a/docs/user-manual/graphics/cameras/camera-controls.md
+++ b/docs/user-manual/graphics/cameras/camera-controls.md
@@ -109,4 +109,6 @@ See the script in action in the engine examples:
 
 <EngineExample id="camera/fly" title="Fly Camera" />
 
+<EngineExample id="camera/multi" title="Multi Camera" />
+
 For building your own custom camera logic instead, the [Orbit Camera tutorial](/tutorials/orbit-camera) walks through a complete implementation.
diff --git a/docs/user-manual/graphics/cameras/multiple-cameras.md b/docs/user-manual/graphics/cameras/multiple-cameras.md
index d2d5c7c0393..0a6205a18ae 100644
--- a/docs/user-manual/graphics/cameras/multiple-cameras.md
+++ b/docs/user-manual/graphics/cameras/multiple-cameras.md
@@ -10,7 +10,7 @@ A scene can contain any number of cameras, and they compose into the final image
 
 This model supports a wide range of setups: split-screen multiplayer, picture-in-picture overlays such as minimaps and rear-view mirrors, UI rendered over the 3D scene, and live render-to-texture surfaces like security monitors and portals.
 
-<EngineExample id="camera/multi" title="Multi Camera" />
+<EngineExample id="graphics/multi-view" title="Multi View" />
 
 ## Viewports {#viewports}
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md
index 22a6ae9b3c2..4bb0ed567ac 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/camera-controls.md
@@ -109,4 +109,6 @@ import { Script } from '@playcanvas/react/components';
 
 <EngineExample id="camera/fly" title="Fly Camera" />
 
+<EngineExample id="camera/multi" title="Multi Camera" />
+
 独自のカメラロジックを構築したい場合は、[Orbit Cameraチュートリアル](/tutorials/orbit-camera)で完全な実装を解説しています。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
index 8c9743ef5f0..f7db18f8de1 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/multiple-cameras.md
@@ -10,7 +10,7 @@ import TabItem from '@theme/TabItem';
 
 このモデルは幅広い構成をサポートします。分割画面のマルチプレイヤー、ミニマップやバックミラーのようなピクチャインピクチャのオーバーレイ、3Dシーンの上に描画されるUI、監視モニターやポータルのようなレンダーテクスチャのサーフェスなどです。
 
-<EngineExample id="camera/multi" title="Multi Camera" />
+<EngineExample id="graphics/multi-view" title="Multi View" />
 
 ## ビューポート {#viewports}
 

From 04b2e1caf48cc481c73cb3ff2f8cdfabc80f2193 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Fri, 12 Jun 2026 14:19:02 +0100
Subject: [PATCH 5/6] docs: link engine constants to API reference in cameras
 prose

Drop the pc. prefix from constants mentioned in prose and link them to
their api.playcanvas.com variable pages (ASPECT_*, TONEMAP_*, GAMMA_*),
matching the convention used elsewhere in the manual.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/user-manual/graphics/cameras/projection.md  |  2 +-
 .../user-manual/graphics/cameras/tone-mapping.md | 16 ++++++++--------
 .../user-manual/graphics/cameras/projection.md   |  2 +-
 .../user-manual/graphics/cameras/tone-mapping.md | 16 ++++++++--------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/user-manual/graphics/cameras/projection.md b/docs/user-manual/graphics/cameras/projection.md
index 3523fced8a6..909701305dd 100644
--- a/docs/user-manual/graphics/cameras/projection.md
+++ b/docs/user-manual/graphics/cameras/projection.md
@@ -81,7 +81,7 @@ The ratio between the far and near clip planes determines how depth buffer preci
 
 ## Aspect Ratio {#aspect-ratio}
 
-By default, a camera's aspect ratio is computed automatically every frame from its render target and [viewport](multiple-cameras.md#viewports) (`aspectRatioMode` of `pc.ASPECT_AUTO`), so the image is never stretched as the canvas resizes. For special cases — such as rendering for a display with non-square pixels — set `aspectRatioMode` to `pc.ASPECT_MANUAL` and assign `aspectRatio` yourself.
+By default, a camera's aspect ratio is computed automatically every frame from its render target and [viewport](multiple-cameras.md#viewports) (`aspectRatioMode` of [`ASPECT_AUTO`](https://api.playcanvas.com/engine/variables/ASPECT_AUTO.html)), so the image is never stretched as the canvas resizes. For special cases — such as rendering for a display with non-square pixels — set `aspectRatioMode` to [`ASPECT_MANUAL`](https://api.playcanvas.com/engine/variables/ASPECT_MANUAL.html) and assign `aspectRatio` yourself.
 
 ## Frustum Culling {#frustum-culling}
 
diff --git a/docs/user-manual/graphics/cameras/tone-mapping.md b/docs/user-manual/graphics/cameras/tone-mapping.md
index 4538f150cc7..ae8d20ed549 100644
--- a/docs/user-manual/graphics/cameras/tone-mapping.md
+++ b/docs/user-manual/graphics/cameras/tone-mapping.md
@@ -12,12 +12,12 @@ Lighting calculations happen in high dynamic range: the intensity of a pixel can
 
 The available tone mapping curves are:
 
-* `TONEMAP_LINEAR` — no compression; bright values simply clip at white. The default.
-* `TONEMAP_FILMIC` — a classic filmic curve with gentle roll-off in the highlights.
-* `TONEMAP_HEJL` — a punchy, contrasty filmic approximation.
-* `TONEMAP_ACES` — the Academy Color Encoding System curve, widely used for cinematic, photorealistic rendering.
-* `TONEMAP_ACES2` — a variant of ACES with a different balance of contrast and saturation.
-* `TONEMAP_NEUTRAL` — compresses highlights while keeping hue and saturation shifts minimal; a good choice when accurate colors matter (e.g. product configurators).
+* [`TONEMAP_LINEAR`](https://api.playcanvas.com/engine/variables/TONEMAP_LINEAR.html) — no compression; bright values simply clip at white. The default.
+* [`TONEMAP_FILMIC`](https://api.playcanvas.com/engine/variables/TONEMAP_FILMIC.html) — a classic filmic curve with gentle roll-off in the highlights.
+* [`TONEMAP_HEJL`](https://api.playcanvas.com/engine/variables/TONEMAP_HEJL.html) — a punchy, contrasty filmic approximation.
+* [`TONEMAP_ACES`](https://api.playcanvas.com/engine/variables/TONEMAP_ACES.html) — the Academy Color Encoding System curve, widely used for cinematic, photorealistic rendering.
+* [`TONEMAP_ACES2`](https://api.playcanvas.com/engine/variables/TONEMAP_ACES2.html) — a variant of ACES with a different balance of contrast and saturation.
+* [`TONEMAP_NEUTRAL`](https://api.playcanvas.com/engine/variables/TONEMAP_NEUTRAL.html) — compresses highlights while keeping hue and saturation shifts minimal; a good choice when accurate colors matter (e.g. product configurators).
 
 For physically based scenes with HDR lighting, `TONEMAP_ACES` or `TONEMAP_NEUTRAL` are usually the best starting points.
 
@@ -67,8 +67,8 @@ When post-processing is active via [CameraFrame](/user-manual/graphics/posteffec
 
 After tone mapping, the camera's output is gamma-encoded for display on standard sRGB screens. This is controlled by `gammaCorrection`:
 
-* `GAMMA_SRGB` — output is encoded for sRGB displays. The default and recommended setting for all normal rendering.
-* `GAMMA_NONE` — output remains in linear space. This is only intended for advanced HDR pipelines where the output is rendered to an intermediate HDR texture that is tone mapped and gamma-corrected in a subsequent pass. On a standard display, it makes the scene appear too dark.
+* [`GAMMA_SRGB`](https://api.playcanvas.com/engine/variables/GAMMA_SRGB.html) — output is encoded for sRGB displays. The default and recommended setting for all normal rendering.
+* [`GAMMA_NONE`](https://api.playcanvas.com/engine/variables/GAMMA_NONE.html) — output remains in linear space. This is only intended for advanced HDR pipelines where the output is rendered to an intermediate HDR texture that is tone mapped and gamma-corrected in a subsequent pass. On a standard display, it makes the scene appear too dark.
 
 To understand why rendering is performed in linear space and gamma-encoded at the end, see [Linear Workflow](/user-manual/graphics/linear-workflow/).
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md
index 115e6814ef1..644fbe9d49b 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/projection.md
@@ -81,7 +81,7 @@ camera.camera.farClip = 500;
 
 ## アスペクト比 {#aspect-ratio}
 
-デフォルトでは、カメラのアスペクト比はレンダーターゲットと[ビューポート](multiple-cameras.md#viewports)から毎フレーム自動的に計算されるため（`aspectRatioMode` が `pc.ASPECT_AUTO`）、キャンバスのサイズが変わっても画像が引き伸ばされることはありません。非正方形ピクセルのディスプレイ向けにレンダリングするなどの特殊なケースでは、`aspectRatioMode` を `pc.ASPECT_MANUAL` に設定し、`aspectRatio` を自分で指定してください。
+デフォルトでは、カメラのアスペクト比はレンダーターゲットと[ビューポート](multiple-cameras.md#viewports)から毎フレーム自動的に計算されるため（`aspectRatioMode` が [`ASPECT_AUTO`](https://api.playcanvas.com/engine/variables/ASPECT_AUTO.html)）、キャンバスのサイズが変わっても画像が引き伸ばされることはありません。非正方形ピクセルのディスプレイ向けにレンダリングするなどの特殊なケースでは、`aspectRatioMode` を [`ASPECT_MANUAL`](https://api.playcanvas.com/engine/variables/ASPECT_MANUAL.html) に設定し、`aspectRatio` を自分で指定してください。
 
 ## フラスタムカリング {#frustum-culling}
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
index 96ba4886ce6..1948ca0a919 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
@@ -12,12 +12,12 @@ import TabItem from '@theme/TabItem';
 
 利用可能なトーンマッピングカーブは次のとおりです:
 
-* `TONEMAP_LINEAR` — 圧縮なし。明るい値は単純に白でクリップされます。デフォルトです。
-* `TONEMAP_FILMIC` — ハイライトが緩やかにロールオフする、クラシックなフィルミックカーブ。
-* `TONEMAP_HEJL` — パンチが効いてコントラストの強いフィルミック近似。
-* `TONEMAP_ACES` — Academy Color Encoding Systemのカーブで、映画的でフォトリアルなレンダリングに広く使用されています。
-* `TONEMAP_ACES2` — コントラストと彩度のバランスが異なるACESのバリエーション。
-* `TONEMAP_NEUTRAL` — 色相と彩度の変化を最小限に抑えながらハイライトを圧縮します。正確な色再現が重要な場合（製品コンフィギュレーターなど）に適しています。
+* [`TONEMAP_LINEAR`](https://api.playcanvas.com/engine/variables/TONEMAP_LINEAR.html) — 圧縮なし。明るい値は単純に白でクリップされます。デフォルトです。
+* [`TONEMAP_FILMIC`](https://api.playcanvas.com/engine/variables/TONEMAP_FILMIC.html) — ハイライトが緩やかにロールオフする、クラシックなフィルミックカーブ。
+* [`TONEMAP_HEJL`](https://api.playcanvas.com/engine/variables/TONEMAP_HEJL.html) — パンチが効いてコントラストの強いフィルミック近似。
+* [`TONEMAP_ACES`](https://api.playcanvas.com/engine/variables/TONEMAP_ACES.html) — Academy Color Encoding Systemのカーブで、映画的でフォトリアルなレンダリングに広く使用されています。
+* [`TONEMAP_ACES2`](https://api.playcanvas.com/engine/variables/TONEMAP_ACES2.html) — コントラストと彩度のバランスが異なるACESのバリエーション。
+* [`TONEMAP_NEUTRAL`](https://api.playcanvas.com/engine/variables/TONEMAP_NEUTRAL.html) — 色相と彩度の変化を最小限に抑えながらハイライトを圧縮します。正確な色再現が重要な場合（製品コンフィギュレーターなど）に適しています。
 
 HDRライティングを使用する物理ベースのシーンでは、通常 `TONEMAP_ACES` または `TONEMAP_NEUTRAL` が最適な出発点です。
 
@@ -67,8 +67,8 @@ import { TONEMAP_ACES } from 'playcanvas';
 
 トーンマッピングの後、カメラの出力は標準的なsRGBディスプレイ向けにガンマエンコードされます。これは `gammaCorrection` で制御します:
 
-* `GAMMA_SRGB` — 出力はsRGBディスプレイ向けにエンコードされます。デフォルトであり、通常のレンダリングすべてに推奨される設定です。
-* `GAMMA_NONE` — 出力はリニア空間のままになります。これは、出力を中間HDRテクスチャにレンダリングし、後続のパスでトーンマッピングとガンマ補正を行う高度なHDRパイプラインのみを対象としています。標準的なディスプレイでは、シーンが暗く見えすぎてしまいます。
+* [`GAMMA_SRGB`](https://api.playcanvas.com/engine/variables/GAMMA_SRGB.html) — 出力はsRGBディスプレイ向けにエンコードされます。デフォルトであり、通常のレンダリングすべてに推奨される設定です。
+* [`GAMMA_NONE`](https://api.playcanvas.com/engine/variables/GAMMA_NONE.html) — 出力はリニア空間のままになります。これは、出力を中間HDRテクスチャにレンダリングし、後続のパスでトーンマッピングとガンマ補正を行う高度なHDRパイプラインのみを対象としています。標準的なディスプレイでは、シーンが暗く見えすぎてしまいます。
 
 レンダリングがリニア空間で行われ、最後にガンマエンコードされる理由については、[リニアワークフロー](/user-manual/graphics/linear-workflow/)を参照してください。
 

From 6d10cbd6ee6ce858de4bdbae0c5aae137f8e8759 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Fri, 12 Jun 2026 14:33:39 +0100
Subject: [PATCH 6/6] docs: link CameraFrame note directly to CameraFrame docs

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/user-manual/graphics/cameras/tone-mapping.md               | 2 +-
 .../current/user-manual/graphics/cameras/tone-mapping.md        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/user-manual/graphics/cameras/tone-mapping.md b/docs/user-manual/graphics/cameras/tone-mapping.md
index ae8d20ed549..dc9c381d2c5 100644
--- a/docs/user-manual/graphics/cameras/tone-mapping.md
+++ b/docs/user-manual/graphics/cameras/tone-mapping.md
@@ -59,7 +59,7 @@ import { TONEMAP_ACES } from 'playcanvas';
 
 :::note
 
-When post-processing is active via [CameraFrame](/user-manual/graphics/posteffects/), tone mapping is applied by the post-processing pipeline instead — set it on the `CameraFrame`'s rendering options rather than the camera.
+When post-processing is active via [CameraFrame](/user-manual/graphics/posteffects/cameraframe/), tone mapping is applied by the post-processing pipeline instead — set it on the `CameraFrame`'s rendering options rather than the camera.
 
 :::
 
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
index 1948ca0a919..570a9b93409 100644
--- a/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/user-manual/graphics/cameras/tone-mapping.md
@@ -59,7 +59,7 @@ import { TONEMAP_ACES } from 'playcanvas';
 
 :::note
 
-[CameraFrame](/user-manual/graphics/posteffects/) によるポストプロセッシングが有効な場合、トーンマッピングはポストプロセッシングパイプライン側で適用されます。カメラではなく `CameraFrame` のレンダリングオプションで設定してください。
+[CameraFrame](/user-manual/graphics/posteffects/cameraframe/) によるポストプロセッシングが有効な場合、トーンマッピングはポストプロセッシングパイプライン側で適用されます。カメラではなく `CameraFrame` のレンダリングオプションで設定してください。
 
 :::