Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial setup to support compressed texture on WebGPU #5370

Merged
merged 1 commit into from
Jun 2, 2023
Merged

Initial setup to support compressed texture on WebGPU #5370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
169 changes: 98 additions & 71 deletions examples/src/examples/graphics/texture-basis.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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