Skip to content

Eliminate all direct calls to WebGL from the Editor codebase #1675

@willeastcott

Description

@willeastcott

Goal

Remove all direct WebGL API calls (device.gl.*) from the Editor codebase to enable WebGPU support. The Editor should use the PlayCanvas Engine's abstraction layer exclusively.

Background

The Editor currently contains several places that bypass the Engine's graphics abstraction and call WebGL APIs directly (e.g., gl.readPixels, gl.bindFramebuffer). This prevents the Editor from working with WebGPU, which has no equivalent synchronous APIs.

Migration Path

Replace direct WebGL calls with the Engine's cross-platform APIs:

Direct WebGL Pattern Engine API Replacement
gl.bindFramebuffer() + gl.readPixels() Texture.read()
device.gl.* Use appropriate Engine abstractions

Files Requiring Changes

Thumbnail Renderers (pixel readback for preview images):

  • src/common/thumbnail-renderers/model-thumbnail-renderer.ts
  • src/common/thumbnail-renderers/material-thumbnail-renderer.ts
  • src/common/thumbnail-renderers/template-thumbnail-renderer.ts
  • src/common/thumbnail-renderers/render-thumbnail-renderer.ts
  • src/common/thumbnail-renderers/font-thumbnail-renderer.ts
  • src/common/thumbnail-renderers/cubemap-3d-thumbnail-renderer.ts

Asset Utilities (cubemap processing):

  • src/editor/assets/assets-utils.ts - removed readGPUPixels helper
  • src/editor/assets/assets-cubemap-utils.ts
  • src/editor/assets/assets-cubemap-prefiltering.ts

Inspector Previews:

  • src/editor/inspector/assets/anim-viewer.ts

Viewport Camera:

  • src/editor/viewport/camera/camera-depth.ts - depth picking

Implementation Notes

  1. Async Migration: Texture.read() is async (returns a Promise), so render() methods that previously used synchronous gl.readPixels() need to become async

  2. Render Target State: Texture.read() internally modifies render target state. Care must be taken to restore state before yielding control (before await) to prevent viewport rendering issues. See #XXXX for details.

  3. Helper Method: Added ThumbnailRenderer.readRenderTargetPixels() as a centralized helper for thumbnail renderers

Known Issues

  • Viewport flashes with preview content when activating Render Preview panel - render target state pollution during async reads needs further investigation

Verification

After migration, search the codebase to ensure no direct WebGL calls remain:

grep -r "device\.gl\." src/
grep -r "\.gl\.readPixels" src/
grep -r "impl\._glFrameBuffer" src/

Related

  • Engine Texture.read() API: Supports both WebGL and WebGPU backends
  • WebGPU has no synchronous GPU readback - all operations must be async

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions