Scarfski/filament
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update WebGL docs.

Browse Source
This commit is contained in:
Philip Rideout
2019-04-23 15:04:06 -07:00
parent 8d9ebb7a68
commit 45fae716de
8 changed files with 55 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/webgl/filament.js
View File

File diff suppressed because one or more lines are too long

BIN
docs/webgl/filament.wasm
View File

Binary file not shown.

96
docs/webgl/helmet.html
View File

@@ -6,43 +6,31 @@
<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%; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }
#container { position: relative; height: 100%; }
canvas { position: absolute; width: 100%; height: 100%; }
#messages { position: absolute; width: 100%; height: 100%; padding-left: 10px; }
</style>
</head>
<body>
<canvas></canvas>
<div id="container">
<canvas></canvas>
<pre id="messages"></pre>
</div>
<script src="filament.js"></script>
<script src="gl-matrix-min.js"></script>
<script src="https://unpkg.com/gltumble"></script>
<script>
const ibl_suffix = Filament.getSupportedFormatSuffix('etc s3tc');
const env = 'syferfontein_18d_clear_2k';
const ibl_url = `${env}/${env}_ibl${ibl_suffix}.ktx`;
const sky_url = `${env}/${env}_skybox.ktx`;
const helmet_filamat_url = 'helmet.filamat';
const filamesh_url = 'helmet.filamesh';
const mesh_url = 'helmet.gltf';
Filament.init([
'FlightHelmet_baseColor.png',
'FlightHelmet_occlusionRoughnessMetallic.png',
'FlightHelmet_normal.png',
'FlightHelmet_baseColor1.png',
'FlightHelmet_occlusionRoughnessMetallic1.png',
'FlightHelmet_normal1.png',
'FlightHelmet_baseColor2.png',
'FlightHelmet_occlusionRoughnessMetallic2.png',
'FlightHelmet_normal2.png',
'FlightHelmet_baseColor3.png',
'FlightHelmet_occlusionRoughnessMetallic3.png',
'FlightHelmet_normal3.png',
'FlightHelmet_baseColor4.png',
'FlightHelmet_occlusionRoughnessMetallic4.png',
'FlightHelmet_normal4.png',
helmet_filamat_url, filamesh_url, ibl_url, sky_url
], () => {
Filament.init([mesh_url, ibl_url, sky_url], () => {
window.gltfio = Filament.gltfio;
window.Fov = Filament.Camera$Fov;
window.LightType = Filament.LightManager$Type;
window.app = new App(document.getElementsByTagName('canvas')[0]);
@@ -52,7 +40,7 @@ class App {
constructor(canvas) {
this.canvas = canvas;
const engine = this.engine = Filament.Engine.create(this.canvas);
this.scene = engine.createScene();
const scene = this.scene = engine.createScene();
this.trackball = new Trackball(canvas, {startSpin: 0.035});
const sunlight = Filament.EntityManager.get().create();
@@ -60,7 +48,7 @@ class App {
.color([0.98, 0.92, 0.89])
.intensity(100000.0)
.direction([0.6, -1.0, -0.8])
.castShadows(true)
.castShadows(false) // TODO: re-enable shadows after Chrome 74
.sunAngularRadius(1.9)
.sunHaloSize(10.0)
.sunHaloFalloff(80.0)
@@ -74,46 +62,26 @@ class App {
const skybox = engine.createSkyFromKtx(sky_url);
this.scene.setSkybox(skybox);
const sampler = new Filament.TextureSampler(
Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
Filament.MagFilter.LINEAR,
Filament.WrapMode.CLAMP_TO_EDGE);
const loader = engine.createAssetLoader();
const asset = this.asset = loader.createAssetFromJson(mesh_url);
const helmetMaterial = engine.createMaterial(helmet_filamat_url);
const messages = document.getElementById('messages');
const setTextures = function(minstance, suffix) {
const setParam = minstance.setTextureParameter.bind(minstance);
const createTex = engine.createTextureFromPng.bind(engine);
const baseColor = `FlightHelmet_baseColor${suffix}.png`;
const orm = `FlightHelmet_occlusionRoughnessMetallic${suffix}.png`;
const normal = `FlightHelmet_normal${suffix}.png`;
setParam('baseColor', createTex(baseColor, {srgb: true}), sampler);
setParam('occlusionRoughnessMetallic', createTex(orm), sampler);
setParam('normalMap', createTex(normal), sampler);
// Crudely indicate progress by printing the URL of each resource as it is loaded.
// Note that we wait 1 ms after the last asset has downloaded, but before finalization.
// This gives the browser time to display the latest status.
const onFetched = (uri) => messages.innerText += `Downloaded ${uri}\n`;
const onDone = (finalize) => {
messages.innerText += 'Finalizing...\n'
setTimeout(() => {
finalize();
loader.delete();
const entities = asset.getEntities();
scene.addEntities(entities);
messages.remove();
}, 1);
};
const GlassPlasticMat = helmetMaterial.createInstance();
const LeatherPartsMat = helmetMaterial.createInstance();
const LensesMat = helmetMaterial.createInstance();
const MetalPartsMat = helmetMaterial.createInstance();
const RubberWoodMat = helmetMaterial.createInstance();
setTextures(GlassPlasticMat, '');
setTextures(LeatherPartsMat, '1');
setTextures(LensesMat, '2');
setTextures(MetalPartsMat, '3');
setTextures(RubberWoodMat, '4');
const mats = { GlassPlasticMat, LeatherPartsMat, LensesMat, MetalPartsMat, RubberWoodMat };
const mesh = engine.loadFilamesh(filamesh_url, null, mats);
let rm = engine.getRenderableManager();
let renderable = rm.getInstance(mesh.renderable);
rm.setCastShadows(renderable, true);
rm.setReceiveShadows(renderable, true);
this.helmet = mesh.renderable;
this.scene.addEntity(mesh.renderable);
asset.loadResources(onDone, onFetched);
this.swapChain = engine.createSwapChain();
this.renderer = engine.createRenderer();
@@ -130,7 +98,7 @@ class App {
render() {
const tcm = this.engine.getTransformManager();
const inst = tcm.getInstance(this.helmet);
const inst = tcm.getInstance(this.asset.getRoot());
tcm.setTransform(inst, this.trackball.getMatrix());
inst.delete();
this.renderer.render(this.swapChain, this.view);

BIN
docs/webgl/plastic.filamat
View File

Binary file not shown.

20
docs/webgl/reference.html
View File

@@ -286,6 +286,12 @@
<li><em>returns</em> an instance of <a href="#Engine">Engine</a></li>
</ul>
</li>
<li><strong>Engine.createAssetLoader(engine)</strong>
<ul>
<li><em>engine</em> an instance of <a href="#Engine">Engine</a></li>
<li><em>returns</em> an instance of <a href="#AssetLoader">AssetLoader</a></li>
</ul>
</li>
<li><strong>engine.createCamera()</strong>
<ul>
<li><em>returns</em> an instance of <a href="#Camera">Camera</a></li>
@@ -567,6 +573,20 @@ wrapper rather than interacting with <code>KtxBundle</code> directly.</p>
<div class='classdoc'>
<h2>class <a id='KtxInfo' href='#KtxInfo'>KtxInfo</a></h2>
<p>Property accessor for KTX header.</p>
<ul>
<li><strong>KtxInfo.createAssetFroBinary(buffer)</strong>
<ul>
<li><em>buffer</em> asset string, or Uint8Array, or <a href="#Buffer">Buffer</a></li>
<li><em>returns</em> an instance of <a href="#FilamentAsset">FilamentAsset</a></li>
</ul>
</li>
<li><strong>KtxInfo.createAssetFromJson(buffer)</strong>
<ul>
<li><em>buffer</em> asset string, or Uint8Array, or <a href="#Buffer">Buffer</a></li>
<li><em>returns</em> an instance of <a href="#FilamentAsset">FilamentAsset</a></li>
</ul>
</li>
</ul>
<p>For example, <code>ktxbundle.info().pixelWidth</code>. See the
<a href="https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/">KTX spec</a> for the list of
properties.</p>

BIN
docs/webgl/textured.filamat
View File

Binary file not shown.

BIN
docs/webgl/triangle.filamat
View File

Binary file not shown.

3
docs/webgl/triangle.html
View File

@@ -60,7 +60,7 @@ class App {
const mat = engine.createMaterial('nonlit.filamat');
const matinst = mat.getDefaultInstance();
Filament.RenderableManager.Builder(1)
.boundingBox([[ -1, -1, -1 ], [ 1, 1, 1 ]])
.boundingBox({ center: [-1, -1, -1], halfExtent: [1, 1, 1] })
.material(0, matinst)
.geometry(0, Filament.RenderableManager$PrimitiveType.TRIANGLES, this.vb, this.ib)
.build(engine, this.triangle);
@@ -71,6 +71,7 @@ class App {
this.view = engine.createView();
this.view.setCamera(this.camera);
this.view.setScene(this.scene);
this.view.setClearColor([0.0, 0.1, 0.2, 1.0]);
this.resize();
this.render = this.render.bind(this);
this.resize = this.resize.bind(this);