Skip to content

Commit

Permalink
Initial setup to support compressed texture on WebGPU (#5370)
Browse files Browse the repository at this point in the history 
Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
  • Loading branch information
@mvaligursky
mvaligursky and Martin Valigursky committed Jun 2, 2023
1 parent bc668c9 commit 3c22313
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 80 deletions.
169 changes: 98 additions & 71 deletions examples/src/examples/graphics/texture-basis.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as pc from '../../../../';


class TextureBasisExample {
static CATEGORY = 'Graphics';
static NAME = 'Texture Basis';
Expand All @@ -19,87 +18,115 @@ class TextureBasisExample {
fallbackUrl: '/static/lib/basis/basis.js'
});

// Create the application and start the update loop
const app = new pc.Application(canvas, {});

const assets = {
'color': new pc.Asset('color', 'texture', { url: '/static/assets/textures/seaside-rocks01-color.basis' }),
'gloss': new pc.Asset('gloss', 'texture', { url: '/static/assets/textures/seaside-rocks01-gloss.basis' }),
'normal': new pc.Asset('normal', 'texture', { url: '/static/assets/textures/seaside-rocks01-normal.basis' }, { type: pc.TEXTURETYPE_SWIZZLEGGGR }),
'helipad': new pc.Asset('helipad', 'cubemap', { url: '/static/assets/cubemaps/helipad.dds' }, { type: pc.TEXTURETYPE_RGBM })
'helipad': new pc.Asset('helipad-env-atlas', 'texture', { url: '/static/assets/cubemaps/helipad-env-atlas.png' }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false }),
};

const gfxOptions = {
deviceTypes: [deviceType],
glslangUrl: '/static/lib/glslang/glslang.js',
twgslUrl: '/static/lib/twgsl/twgsl.js'
};

const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
app.start();
pc.createGraphicsDevice(canvas, gfxOptions).then((device: pc.GraphicsDevice) => {

const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;

createOptions.componentSystems = [
// @ts-ignore
pc.RenderComponentSystem,
// @ts-ignore
pc.CameraComponentSystem,
// @ts-ignore
pc.LightComponentSystem
];
createOptions.resourceHandlers = [
// @ts-ignore
pc.TextureHandler,
// @ts-ignore
pc.ContainerHandler
];

const app = new pc.AppBase(canvas);
app.init(createOptions);

// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Set skybox
app.scene.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;
app.scene.skyboxIntensity = 0.7;
app.scene.setSkybox(assets.helipad.resources);

// Create directional light
const light = new pc.Entity();
light.addComponent('light', {
type: 'directional'
});
light.setLocalEulerAngles(45, 0, 45);

// Construct material
const material = new pc.StandardMaterial();
material.useMetalness = true;
material.diffuse = new pc.Color(0.3, 0.3, 0.3);
material.gloss = 0.8;
material.metalness = 0.7;
material.diffuseMap = assets.color.resource;
material.normalMap = assets.normal.resource;
material.glossMap = assets.gloss.resource;
material.diffuseMapTiling.set(7, 7);
material.normalMapTiling.set(7, 7);
material.glossMapTiling.set(7, 7);
material.update();

// Create a torus shape
const torus = pc.createTorus(app.graphicsDevice, {
tubeRadius: 0.2,
ringRadius: 0.3,
segments: 50,
sides: 40
});
const shape = new pc.Entity();
shape.addComponent('render', {
material: material,
meshInstances: [new pc.MeshInstance(torus, material)]
});
shape.setPosition(0, 0, 0);
shape.setLocalScale(2, 2, 2);

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0.4, 0.45, 0.5)
});

// Adjust the camera position
camera.translate(0, 0, 4);

// Add the new Entities to the hierarchy
app.root.addChild(light);
app.root.addChild(shape);
app.root.addChild(camera);

// Set an update function on the app's update event
let angle = 0;
app.on("update", function (dt) {
angle = (angle + dt * 10) % 360;

// Rotate the boxes
shape.setEulerAngles(angle, angle * 2, angle * 4);
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {

app.start();

// Set skybox
app.scene.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;
app.scene.skyboxIntensity = 1.4;
app.scene.envAtlas = assets.helipad.resource;

// Create directional light
const light = new pc.Entity();
light.addComponent('light', {
type: 'directional'
});
light.setLocalEulerAngles(45, 0, 45);

// Construct material
const material = new pc.StandardMaterial();
material.useMetalness = true;
material.diffuse = new pc.Color(0.3, 0.3, 0.3);
material.gloss = 0.8;
material.metalness = 0.7;
material.diffuseMap = assets.color.resource;
material.normalMap = assets.normal.resource;
material.glossMap = assets.gloss.resource;
material.diffuseMapTiling.set(7, 7);
material.normalMapTiling.set(7, 7);
material.glossMapTiling.set(7, 7);
material.update();

// Create a torus shape
const torus = pc.createTorus(app.graphicsDevice, {
tubeRadius: 0.2,
ringRadius: 0.3,
segments: 50,
sides: 40
});
const shape = new pc.Entity();
shape.addComponent('render', {
material: material,
meshInstances: [new pc.MeshInstance(torus, material)]
});
shape.setPosition(0, 0, 0);
shape.setLocalScale(2, 2, 2);

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0.4, 0.45, 0.5)
});

// Adjust the camera position
camera.translate(0, 0, 4);

// Add the new Entities to the hierarchy
app.root.addChild(light);
app.root.addChild(shape);
app.root.addChild(camera);

// Set an update function on the app's update event
let angle = 0;
app.on("update", function (dt) {
angle = (angle + dt * 10) % 360;

// Rotate the boxes
shape.setEulerAngles(angle, angle * 2, angle * 4);
});
});
});
}
Expand Down
6 changes: 3 additions & 3 deletions src/platform/graphics/webgpu/webgpu-graphics-device.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,9 +173,6 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
// optional features:
// "depth-clip-control",
// "depth32float-stencil8",
// "texture-compression-bc",
// "texture-compression-etc2",
// "texture-compression-astc",
// "timestamp-query",
// "indirect-first-instance",
// "shader-f16",
Expand All @@ -194,6 +191,9 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
return false;
};
this.floatFilterable = requireFeature('float32-filterable');
this.extCompressedTextureS3TC = requireFeature('texture-compression-bc');
this.extCompressedTextureETC = requireFeature('texture-compression-etc2');
this.extCompressedTextureASTC = requireFeature('texture-compression-astc');

/**
* @type {GPUDevice}
Expand Down
12 changes: 6 additions & 6 deletions src/platform/graphics/webgpu/webgpu-texture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ gpuTextureFormats[PIXELFORMAT_RGBA5551] = '';
gpuTextureFormats[PIXELFORMAT_RGBA4] = '';
gpuTextureFormats[PIXELFORMAT_RGB8] = 'rgba8unorm';
gpuTextureFormats[PIXELFORMAT_RGBA8] = 'rgba8unorm';
gpuTextureFormats[PIXELFORMAT_DXT1] = '';
gpuTextureFormats[PIXELFORMAT_DXT3] = '';
gpuTextureFormats[PIXELFORMAT_DXT5] = '';
gpuTextureFormats[PIXELFORMAT_DXT1] = 'bc1-rgba-unorm';
gpuTextureFormats[PIXELFORMAT_DXT3] = 'bc2-rgba-unorm';
gpuTextureFormats[PIXELFORMAT_DXT5] = 'bc3-rgba-unorm';
gpuTextureFormats[PIXELFORMAT_RGB16F] = '';
gpuTextureFormats[PIXELFORMAT_RGBA16F] = 'rgba16float';
gpuTextureFormats[PIXELFORMAT_RGB32F] = '';
Expand All @@ -38,13 +38,13 @@ gpuTextureFormats[PIXELFORMAT_111110F] = 'rg11b10ufloat';
gpuTextureFormats[PIXELFORMAT_SRGB] = '';
gpuTextureFormats[PIXELFORMAT_SRGBA] = '';
gpuTextureFormats[PIXELFORMAT_ETC1] = '';
gpuTextureFormats[PIXELFORMAT_ETC2_RGB] = '';
gpuTextureFormats[PIXELFORMAT_ETC2_RGBA] = '';
gpuTextureFormats[PIXELFORMAT_ETC2_RGB] = 'etc2-rgb8unorm';
gpuTextureFormats[PIXELFORMAT_ETC2_RGBA] = 'etc2-rgba8unorm';
gpuTextureFormats[PIXELFORMAT_PVRTC_2BPP_RGB_1] = '';
gpuTextureFormats[PIXELFORMAT_PVRTC_2BPP_RGBA_1] = '';
gpuTextureFormats[PIXELFORMAT_PVRTC_4BPP_RGB_1] = '';
gpuTextureFormats[PIXELFORMAT_PVRTC_4BPP_RGBA_1] = '';
gpuTextureFormats[PIXELFORMAT_ASTC_4x4] = '';
gpuTextureFormats[PIXELFORMAT_ASTC_4x4] = 'astc-4x4-unorm';
gpuTextureFormats[PIXELFORMAT_ATC_RGB] = '';
gpuTextureFormats[PIXELFORMAT_ATC_RGBA] = '';
gpuTextureFormats[PIXELFORMAT_BGRA8] = 'bgra8unorm';
Expand Down

0 comments on commit 3c22313

Please sign in to comment.