PlayCanvas Texture Tool

| User Manual | API Reference | Blog | Forum |

The PlayCanvas Texture Tool is a browser-based utility for inspecting, visualizing, and reprojecting textures and environment maps.

You can find a live version at:

https://playcanvas.com/texture-tool

Features

• Texture Inspection - View texture dimensions, pixel format, structure (2D/cubemap), and encoding
• Mipmap Visualization - Browse individual mipmap levels
• Cubemap Face Navigation - View and inspect individual cubemap faces
• Alpha Channel - Toggle alpha channel visualization with checkerboard background
• Filtering Toggle - Switch between linear and nearest filtering
• Reprojection - Convert between equirectangular and cubemap projections
• Export - Save textures as PNG or HDR files

Supported Formats

The texture tool can load the following texture formats:

Format	Extension
PNG	.png
JPEG	.jpg, .jpeg
HDR	.hdr
DDS	.dds
KTX	.ktx, .ktx2
Basis	.basis
PVR	.pvr

Viewing Textures

Drag and drop texture files directly into the tool to load them. Multiple textures can be loaded and inspected simultaneously using the file browser panel.

Supported URL Parameters

Some URL query parameters are available to control the texture tool:

Parameter	Description	Example
load	Specify URL to a texture to load	?load=URL
type	Override the view type (gamma, linear, rgbm, rgbe, rgbp, a)	?type=gamma

How to build

Ensure you have Node.js installed (v18.0+). Then, from a command prompt, run:

npm install
npm run build

This will invoke Rollup and output the built tool to the dist folder. To invoke Rollup with the --watch flag (which rebuilds the tool on saving any source file), do:

npm run build:watch

How to run

Run:

npm run serve

Open a browser and navigate to http://localhost:3000.

Development

Run:

npm run develop

Open a browser and navigate to http://localhost:3000.

Library integration testing

The Texture Tool is built on the following open source libraries:

Library	Details
PlayCanvas Engine	Texture loading and GPU rendering
Observer	Data binding
PCUI	Front-end component library

To test the integration of these libraries use npm link. Follow these steps:

1. Create a global link from source

   cd <library>
   npm link

2. Create a link to the global link

   cd texture-tool
   npm link <library>