8d410af4b3
Note that we need to allow clients to find out if compressed textures
are supported BEFORE the engine is created, so that they can start
downloading the correct set of texture files. To allow this, we now
expose a getSupportedFormats function that creates a throw-away canvas
in order to query extensions (creating a temporary canvas is a technique
that we also used in the old PNG decoder that we removed in 7b36ed4)
138 lines
5.1 KiB
HTML
138 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Filament Suzanne</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
|
|
<link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
|
|
<style>
|
|
body { margin: 0; overflow: hidden; }
|
|
canvas { touch-action: none; width: 100%; height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas></canvas>
|
|
<script src="filament.js"></script>
|
|
<script src="gl-matrix-min.js"></script>
|
|
<script>
|
|
|
|
const ibl_suffix = Filament.getSupportedFormatSuffix('etc s3tc');
|
|
const albedo_suffix = Filament.getSupportedFormatSuffix('astc s3tc');
|
|
const texture_suffix = Filament.getSupportedFormatSuffix('etc');
|
|
|
|
const env = 'syferfontein_18d_clear_2k'
|
|
const ibl_url = `${env}/${env}_ibl${ibl_suffix}.ktx`;
|
|
const sky_url = `${env}/${env}_skybox.ktx`;
|
|
const albedo_url = `albedo${albedo_suffix}.ktx`;
|
|
const ao_url = `ao${texture_suffix}.ktx`;
|
|
const metallic_url = `metallic${texture_suffix}.ktx`;
|
|
const normal_url = `normal${texture_suffix}.ktx`;
|
|
const roughness_url = `roughness${texture_suffix}.ktx`;
|
|
|
|
Filament.init([
|
|
'textured.filamat',
|
|
'suzanne.filamesh',
|
|
albedo_url,
|
|
ao_url,
|
|
metallic_url,
|
|
normal_url,
|
|
roughness_url,
|
|
ibl_url,
|
|
sky_url
|
|
], () => {
|
|
window.VertexAttribute = Filament.VertexAttribute;
|
|
window.AttributeType = Filament.VertexBuffer$AttributeType;
|
|
window.PrimitiveType = Filament.RenderableManager$PrimitiveType;
|
|
window.IndexType = Filament.IndexBuffer$IndexType;
|
|
window.Fov = Filament.Camera$Fov;
|
|
window.LightType = Filament.LightManager$Type;
|
|
window.app = new App(document.getElementsByTagName('canvas')[0]);
|
|
});
|
|
|
|
class App {
|
|
constructor(canvas) {
|
|
this.canvas = canvas;
|
|
const engine = this.engine = Filament.Engine.create(this.canvas);
|
|
this.scene = engine.createScene();
|
|
|
|
const sunlight = Filament.EntityManager.get().create();
|
|
Filament.LightManager.Builder(LightType.SUN)
|
|
.color([0.98, 0.92, 0.89])
|
|
.intensity(100000.0)
|
|
.direction([0.6, -1.0, -0.8])
|
|
.castShadows(true)
|
|
.sunAngularRadius(1.9)
|
|
.sunHaloSize(10.0)
|
|
.sunHaloFalloff(80.0)
|
|
.build(engine, sunlight);
|
|
this.scene.addEntity(sunlight);
|
|
|
|
const indirectLight = this.ibl = engine.createIblFromKtx(ibl_url);
|
|
this.scene.setIndirectLight(indirectLight);
|
|
indirectLight.setIntensity(100000);
|
|
|
|
const skybox = engine.createSkyFromKtx(sky_url);
|
|
this.scene.setSkybox(skybox);
|
|
|
|
const material = engine.createMaterial('textured.filamat');
|
|
const matinstance = material.createInstance();
|
|
|
|
const sampler = new Filament.TextureSampler(
|
|
Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
|
|
Filament.MagFilter.LINEAR,
|
|
Filament.WrapMode.CLAMP_TO_EDGE);
|
|
|
|
const albedo = engine.createTextureFromKtx(albedo_url, {"srgb": true});
|
|
const roughness = engine.createTextureFromKtx(roughness_url);
|
|
const metallic = engine.createTextureFromKtx(metallic_url);
|
|
const normal = engine.createTextureFromKtx(normal_url);
|
|
const ao = engine.createTextureFromKtx(ao_url);
|
|
|
|
matinstance.setTextureParameter('albedo', albedo, sampler)
|
|
matinstance.setTextureParameter('roughness', roughness, sampler)
|
|
matinstance.setTextureParameter('metallic', metallic, sampler)
|
|
matinstance.setTextureParameter('normal', normal, sampler)
|
|
matinstance.setTextureParameter('ao', ao, sampler)
|
|
|
|
const mesh = engine.loadFilamesh('suzanne.filamesh', matinstance);
|
|
this.shaderball = mesh.renderable;
|
|
this.scene.addEntity(mesh.renderable);
|
|
|
|
this.swapChain = engine.createSwapChain();
|
|
this.renderer = engine.createRenderer();
|
|
this.camera = engine.createCamera();
|
|
this.view = engine.createView();
|
|
this.view.setCamera(this.camera);
|
|
this.view.setScene(this.scene);
|
|
this.resize();
|
|
this.render = this.render.bind(this);
|
|
this.resize = this.resize.bind(this);
|
|
window.addEventListener('resize', this.resize);
|
|
window.requestAnimationFrame(this.render);
|
|
}
|
|
|
|
render() {
|
|
const radians = Date.now() / 1000;
|
|
const transform = mat4.fromRotation(mat4.create(), radians, [0, 1, 0]);
|
|
const tcm = this.engine.getTransformManager();
|
|
tcm.setTransform(tcm.getInstance(this.shaderball), transform);
|
|
this.renderer.render(this.swapChain, this.view);
|
|
window.requestAnimationFrame(this.render);
|
|
}
|
|
|
|
resize() {
|
|
const dpr = window.devicePixelRatio;
|
|
const width = this.canvas.width = window.innerWidth * dpr;
|
|
const height = this.canvas.height = window.innerHeight * dpr;
|
|
this.view.setViewport([0, 0, width, height]);
|
|
const eye = [0, 0, 4], center = [0, 0, 0], up = [0, 1, 0];
|
|
this.camera.lookAt(eye, center, up);
|
|
const aspect = width / height;
|
|
const fov = aspect < 1 ? Fov.HORIZONTAL : Fov.VERTICAL;
|
|
this.camera.setProjectionFov(45, aspect, 1.0, 10.0, fov);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|