fb643eb422
This updates the tutorial markdown, fixes up the literate programming Python script, and updates the web site itself. The doc build script now uses a Pipfile instead of "requirements.txt", which I find less frustrating since it does not interfere with other Python projects on your machine. Fixes #2483.
91 lines
4.0 KiB
JavaScript
91 lines
4.0 KiB
JavaScript
const albedo_suffix = Filament.getSupportedFormatSuffix('astc s3tc');
|
|
const texture_suffix = Filament.getSupportedFormatSuffix('etc');
|
|
const environ = 'venetian_crossroads_2k'
|
|
const ibl_url = `${environ}/${environ}_ibl.ktx`;
|
|
const sky_small_url = `${environ}/${environ}_skybox_tiny.ktx`;
|
|
const sky_large_url = `${environ}/${environ}_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`;
|
|
const filamat_url = 'textured.filamat';
|
|
const filamesh_url = 'suzanne.filamesh';
|
|
Filament.init([filamat_url, filamesh_url, sky_small_url, ibl_url], () => {
|
|
window.app = new App(document.getElementsByTagName('canvas')[0]);
|
|
});
|
|
class App {
|
|
constructor(canvas) {
|
|
this.canvas = canvas;
|
|
this.engine = Filament.Engine.create(canvas);
|
|
this.scene = this.engine.createScene();
|
|
const material = this.engine.createMaterial(filamat_url);
|
|
this.matinstance = material.createInstance();
|
|
const filamesh = this.engine.loadFilamesh(filamesh_url, this.matinstance);
|
|
this.suzanne = filamesh.renderable;
|
|
this.skybox = this.engine.createSkyFromKtx(sky_small_url);
|
|
this.scene.setSkybox(this.skybox);
|
|
this.indirectLight = this.engine.createIblFromKtx(ibl_url);
|
|
this.indirectLight.setIntensity(100000);
|
|
this.scene.setIndirectLight(this.indirectLight);
|
|
this.trackball = new Trackball(canvas, {
|
|
startSpin: 0.035
|
|
});
|
|
Filament.fetch([sky_large_url, albedo_url, roughness_url, metallic_url, normal_url, ao_url],
|
|
() => {
|
|
const albedo = this.engine.createTextureFromKtx(albedo_url, {
|
|
srgb: true
|
|
});
|
|
const roughness = this.engine.createTextureFromKtx(roughness_url);
|
|
const metallic = this.engine.createTextureFromKtx(metallic_url);
|
|
const normal = this.engine.createTextureFromKtx(normal_url);
|
|
const ao = this.engine.createTextureFromKtx(ao_url);
|
|
const sampler = new Filament.TextureSampler(Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
|
|
Filament.MagFilter.LINEAR, Filament.WrapMode.CLAMP_TO_EDGE);
|
|
this.matinstance.setTextureParameter('albedo', albedo, sampler);
|
|
this.matinstance.setTextureParameter('roughness', roughness, sampler);
|
|
this.matinstance.setTextureParameter('metallic', metallic, sampler);
|
|
this.matinstance.setTextureParameter('normal', normal, sampler);
|
|
this.matinstance.setTextureParameter('ao', ao, sampler);
|
|
// Replace low-res skybox with high-res skybox.
|
|
this.engine.destroySkybox(this.skybox);
|
|
this.skybox = this.engine.createSkyFromKtx(sky_large_url);
|
|
this.scene.setSkybox(this.skybox);
|
|
this.scene.addEntity(this.suzanne);
|
|
});
|
|
this.swapChain = this.engine.createSwapChain();
|
|
this.renderer = this.engine.createRenderer();
|
|
this.camera = this.engine.createCamera();
|
|
this.view = this.engine.createView();
|
|
this.view.setCamera(this.camera);
|
|
this.view.setScene(this.scene);
|
|
this.render = this.render.bind(this);
|
|
this.resize = this.resize.bind(this);
|
|
window.addEventListener('resize', this.resize);
|
|
const eye = [0, 0, 4],
|
|
center = [0, 0, 0],
|
|
up = [0, 1, 0];
|
|
this.camera.lookAt(eye, center, up);
|
|
this.resize();
|
|
window.requestAnimationFrame(this.render);
|
|
}
|
|
render() {
|
|
const tcm = this.engine.getTransformManager();
|
|
const inst = tcm.getInstance(this.suzanne);
|
|
tcm.setTransform(inst, this.trackball.getMatrix());
|
|
inst.delete();
|
|
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 aspect = width / height;
|
|
const Fov = Filament.Camera$Fov,
|
|
fov = aspect < 1 ? Fov.HORIZONTAL : Fov.VERTICAL;
|
|
this.camera.setProjectionFov(45, aspect, 1.0, 10.0, fov);
|
|
}
|
|
}
|