db2e1426e9
* Introduce two WebGL samples: triangle and suzanne.
This commit has no effect on mobile / desktop builds, it only adds new
targets to the `-p webgl` build.
We will eventually expose a proper JavaScript API, but for now these
samples use a (somewhat under-engineered) `filaweb` framework whereby
the WebAssembly module exposes a small number of C entry points: launch,
render, and resize.
Each sample has two source files: a cpp file and an html file. The cpp
file generates js / wasm pair. The generated js is simply a loader for
the wasm.
The CMake script creates a pristine "public" folder which contains the
minimal set of files needed to serve the web application using a simple
static file server. The public folder like this:
/suzanne.js built by em++ from suzanne.cpp
/suzanne.wasm built by em++ from suzanne.cpp
/suzanne.html copied from REPO/samples/web
/filaweb.js copied from REPO/samples/web
/favicon.png copied from REPO/samples/web
/monkey/*.png copied from REPO/assets/models
/monkey/*.filamesh built by filamesh
/desert/* built by cmgen
To decode PNG textures, we use the somewhat unusual approach of using
JavaScript to draw them into a hidden 2D canvas, then reading back the
pixels. This allows us to avoid fattening up the wasm file with a PNG
decoder. An alternative idea would be to pass a DOM Image directly into
glTexImage2D, but this would require some #ifdefing and/or JS injection
in Filament's OpenGL backend.
* Optimize the suzanne material.
21 lines
424 B
HTML
21 lines
424 B
HTML
<!DOCTYPE html>
|
|
<title>Filament</title>
|
|
<link href="favicon.png" rel="icon" type="image/x-icon"/>
|
|
<meta name=viewport content='width=device-width,initial-scale=1'>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
#filament-canvas {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
<canvas id="filament-canvas"></canvas>
|
|
<script src="triangle.js"></script>
|
|
<script src="filaweb.js"></script>
|
|
<script>
|
|
load({});
|
|
</script>
|