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

Update WebGL demos (#4564)

Browse Source
This commit is contained in:
Romain Guy
2021-08-30 12:45:02 -07:00
committed by GitHub
parent b04c398202
commit dcfc27857f
13 changed files with 94 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/webgl/default_env/default_env_ibl.ktx
View File

Binary file not shown.

BIN
docs/webgl/default_env/default_env_skybox.ktx
View File

Binary file not shown.

11
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.

BIN
docs/webgl/parquet.filamat
View File

Binary file not shown.

BIN
docs/webgl/plastic.filamat
View File

Binary file not shown.

75
docs/webgl/reference.html
View File

@@ -32,6 +32,10 @@
<td align="left">Low level buffer wrapper.</td>
</tr>
<tr>
<td align="left"><a href="#BufferObject">BufferObject</a></td>
<td align="left">Represents a single GPU buffer.</td>
</tr>
<tr>
<td align="left"><a href="#Camera">Camera</a></td>
<td align="left">Represents the eye through which the scene is viewed.</td>
</tr>
@@ -174,6 +178,10 @@
</thead>
<tbody>
<tr>
<td align="left"><a href="#BufferObject%24BindingType">BufferObject$BindingType</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#Camera%24Fov">Camera$Fov</a></td>
<td align="left"></td>
</tr>
@@ -190,6 +198,14 @@
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#CompareFunc">CompareFunc</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#CompareMode">CompareMode</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#CompressedPixelDataType">CompressedPixelDataType</a></td>
<td align="left"></td>
</tr>
@@ -282,6 +298,10 @@
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24DepthOfFieldOptions%24Filter">View$DepthOfFieldOptions$Filter</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24QualityLevel">View$QualityLevel</a></td>
<td align="left"></td>
</tr>
@@ -306,6 +326,19 @@
<p>Clients should use the <a href="#Buffer">Buffer</a> helper function to contruct BufferDescriptor objects.</p>
</div>
<div class='classdoc'>
<h2>class <a id='BufferObject' href='#BufferObject'>BufferObject</a></h2>
<p>Represents a single GPU buffer.</p>
<ul>
<li><strong>bufferObject.setBuffer(engine, buffer, byteOffset)</strong>
<ul>
<li><em>engine</em> <a href="#Engine">Engine</a></li>
<li><em>buffer</em> asset string, or Uint8Array, or <a href="#Buffer">Buffer</a></li>
<li><em>byteOffset</em> non-negative integer</li>
</ul>
</li>
</ul>
</div>
<div class='classdoc'>
<h2>class <a id='Camera' href='#Camera'>Camera</a></h2>
<p>Represents the eye through which the scene is viewed.</p>
<p>See also the <a href="#Engine">Engine</a> methods <code>createCamera</code> and <code>destroyCamera</code>.</p>
@@ -490,6 +523,7 @@
<li><em>returns</em> an instance of <a href="#Camera">Camera</a></li>
</ul>
</li>
<li><strong>engine.getEntityManager()</strong></li>
<li><strong>engine.getLightManager()</strong>
<ul>
<li><em>returns</em> an instance of <a href="#LightManager">LightManager</a></li>
@@ -536,7 +570,7 @@
</li>
<li><strong>engine.setDepthOfFieldOptions(overrides)</strong>
<ul>
<li><em>overrides</em> Dictionary with one or more of the following properties: focusDistance, cocScale, maxApertureDiameter, enabled.</li>
<li><em>overrides</em> Dictionary with one or more of the following properties: cocScale, maxApertureDiameter, enabled.</li>
</ul>
</li>
<li><strong>engine.setFogOptions(overrides)</strong>
@@ -1016,6 +1050,12 @@ This defines the following functions:</p>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='BufferObject$BindingType' href='#BufferObject$BindingType'>BufferObject$BindingType</a></h2>
<ul>
<li>VERTEX</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='Camera$Fov' href='#Camera$Fov'>Camera$Fov</a></h2>
<ul>
<li>VERTICAL</li>
@@ -1045,12 +1085,30 @@ This defines the following functions:</p>
<li>ACES_LEGACY</li>
<li>ACES</li>
<li>FILMIC</li>
<li>UCHIMURA</li>
<li>REINHARD</li>
<li>DISPLAY_RANGE</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='CompareFunc' href='#CompareFunc'>CompareFunc</a></h2>
<ul>
<li>LESS_EQUAL</li>
<li>GREATER_EQUAL</li>
<li>LESS</li>
<li>GREATER</li>
<li>EQUAL</li>
<li>NOT_EQUAL</li>
<li>ALWAYS</li>
<li>NEVER</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='CompareMode' href='#CompareMode'>CompareMode</a></h2>
<ul>
<li>NONE</li>
<li>COMPARE_TO_TEXTURE</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='CompressedPixelDataType' href='#CompressedPixelDataType'>CompressedPixelDataType</a></h2>
<ul>
<li>EAC_R11</li>
@@ -1186,6 +1244,10 @@ This defines the following functions:</p>
<div class='enumdoc'>
<h2>enum <a id='RenderTarget$AttachmentPoint' href='#RenderTarget$AttachmentPoint'>RenderTarget$AttachmentPoint</a></h2>
<ul>
<li>COLOR0</li>
<li>COLOR1</li>
<li>COLOR2</li>
<li>COLOR3</li>
<li>COLOR</li>
<li>DEPTH</li>
</ul>
@@ -1436,6 +1498,13 @@ This defines the following functions:</p>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$DepthOfFieldOptions$Filter' href='#View$DepthOfFieldOptions$Filter'>View$DepthOfFieldOptions$Filter</a></h2>
<ul>
<li>NONE</li>
<li>MEDIAN</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$QualityLevel' href='#View$QualityLevel'>View$QualityLevel</a></h2>
<ul>
<li>LOW</li>

BIN
docs/webgl/textured.filamat
View File

Binary file not shown.

BIN
docs/webgl/triangle.filamat
View File

Binary file not shown.

10
docs/webgl/tutorial_redball.html
View File

@@ -75,11 +75,11 @@ Filament.init([ filamat_url, ibl_url, sky_url ], () =&gt; {
<span style="color: #408080; font-style: italic">// Obtain the canvas DOM object and pass it to the App.</span>
<span style="color: #008000; font-weight: bold">const</span> canvas <span style="color: #666666">=</span> <span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>];
<span style="color: #008000">window</span>.app <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> App(canvas);
<span style="color: #008000">window</span>.app <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> App(canvas);
} );
<span style="color: #008000; font-weight: bold">class</span> App {
constructor(canvas) {
<span style="color: #008000; font-weight: bold">constructor</span>(canvas) {
<span style="color: #008000; font-weight: bold">this</span>.canvas <span style="color: #666666">=</span> canvas;
<span style="color: #008000; font-weight: bold">const</span> engine <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.engine <span style="color: #666666">=</span> Filament.Engine.create(canvas);
<span style="color: #008000; font-weight: bold">const</span> scene <span style="color: #666666">=</span> engine.createScene();
@@ -150,7 +150,7 @@ sphere</strong> with the following snippet.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> renderable <span style="color: #666666">=</span> Filament.EntityManager.get().create();
scene.addEntity(renderable);
<span style="color: #008000; font-weight: bold">const</span> icosphere <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Filament.IcoSphere(<span style="color: #666666">5</span>);
<span style="color: #008000; font-weight: bold">const</span> icosphere <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> Filament.IcoSphere(<span style="color: #666666">5</span>);
<span style="color: #008000; font-weight: bold">const</span> vb <span style="color: #666666">=</span> Filament.VertexBuffer.Builder()
.vertexCount(icosphere.vertices.length <span style="color: #666666">/</span> <span style="color: #666666">3</span>)
@@ -211,7 +211,7 @@ following (don't type this out, there's an easier way).</p>
<span style="color: #408080; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span>
<span style="color: #008000; font-weight: bold">const</span> ibl_package <span style="color: #666666">=</span> Filament.Buffer(Filament.assets[ibl_url]);
<span style="color: #008000; font-weight: bold">const</span> iblktx <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Filament.KtxBundle(ibl_package);
<span style="color: #008000; font-weight: bold">const</span> iblktx <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> Filament.KtxBundle(ibl_package);
<span style="color: #008000; font-weight: bold">const</span> ibltex <span style="color: #666666">=</span> Filament.Texture.Builder()
.width(iblktx.info().pixelWidth)
@@ -253,7 +253,7 @@ scene.setIndirectLight(indirectLight);
Without a skybox, the reflections on the ball are not representative of its surroundings.
Here's one way to create a texture for the skybox:</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> sky_package <span style="color: #666666">=</span> Filament.Buffer(Filament.assets[sky_url]);
<span style="color: #008000; font-weight: bold">const</span> skyktx <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Filament.KtxBundle(sky_package);
<span style="color: #008000; font-weight: bold">const</span> skyktx <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> Filament.KtxBundle(sky_package);
<span style="color: #008000; font-weight: bold">const</span> skytex <span style="color: #666666">=</span> Filament.Texture.Builder()
.width(skyktx.info().pixelWidth)
.height(skyktx.info().pixelHeight)

12
docs/webgl/tutorial_suzanne.html
View File

@@ -104,11 +104,11 @@ with the following content.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #408080; font-style: italic">// TODO: declare asset URLs</span>
Filament.init([ filamat_url, filamesh_url, sky_small_url, ibl_url ], () =&gt; {
<span style="color: #008000">window</span>.app <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);
<span style="color: #008000">window</span>.app <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);
});
<span style="color: #008000; font-weight: bold">class</span> App {
constructor(canvas) {
<span style="color: #008000; font-weight: bold">constructor</span>(canvas) {
<span style="color: #008000; font-weight: bold">this</span>.canvas <span style="color: #666666">=</span> canvas;
<span style="color: #008000; font-weight: bold">this</span>.engine <span style="color: #666666">=</span> Filament.Engine.create(canvas);
<span style="color: #008000; font-weight: bold">this</span>.scene <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.engine.createScene();
@@ -172,7 +172,7 @@ string -- which might be empty.</p>
<p>In our case, we know that our web server will have <code>astc</code> and <code>s3tc</code> variants for albedo, and <code>etc</code>
variants for the other textures. The uncompressed variants (empty string) are always available as a
last resort. Go ahead and replace the <strong>declare asset URLs</strong> comment with the following snippet.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> albedo_suffix <span style="color: #666666">=</span> Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc&#39;</span>);
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> albedo_suffix <span style="color: #666666">=</span> Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc_srgb&#39;</span>);
<span style="color: #008000; font-weight: bold">const</span> texture_suffix <span style="color: #666666">=</span> Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);
<span style="color: #008000; font-weight: bold">const</span> environ <span style="color: #666666">=</span> <span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span>
@@ -213,7 +213,7 @@ was created in the app constructor.</p>
<span style="color: #008000; font-weight: bold">const</span> normal <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx(normal_url);
<span style="color: #008000; font-weight: bold">const</span> ao <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx(ao_url);
<span style="color: #008000; font-weight: bold">const</span> sampler <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Filament.TextureSampler(
<span style="color: #008000; font-weight: bold">const</span> sampler <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> Filament.TextureSampler(
Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
Filament.MagFilter.LINEAR,
Filament.WrapMode.CLAMP_TO_EDGE);
@@ -241,13 +241,13 @@ listens for drag events and computes a rotation matrix.</p>
<p>Next, replace the <strong>initialize gltumble</strong> and <strong>apply gltumble matrix</strong> comments with the following
two code snippets.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Trackball(canvas, {startSpin<span style="color: #666666">:</span> <span style="color: #666666">0.035</span>});
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> Trackball(canvas, {startSpin<span style="color: #666666">:</span> <span style="color: #666666">0.035</span>});
</pre></div>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> tcm <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();
<span style="color: #008000; font-weight: bold">const</span> inst <span style="color: #666666">=</span> tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);
tcm.setTransform(inst, <span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());
inst.<span style="color: #008000; font-weight: bold">delete</span>();
inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();
</pre></div>
<p>That's it, we now have a fast-loading interactive demo. The complete JavaScript file is available

12
docs/webgl/tutorial_triangle.html
View File

@@ -49,7 +49,7 @@ a mobile-friendly page with a full-screen canvas.</p>
</ul>
<p>Go ahead and create <code>triangle.js</code> with the following content.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">class</span> App {
constructor() {
<span style="color: #008000; font-weight: bold">constructor</span>() {
<span style="color: #408080; font-style: italic">// TODO: create entities</span>
<span style="color: #008000; font-weight: bold">this</span>.render <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);
<span style="color: #008000; font-weight: bold">this</span>.resize <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);
@@ -65,7 +65,7 @@ a mobile-friendly page with a full-screen canvas.</p>
}
}
Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>], () =&gt; { <span style="color: #008000">window</span>.app <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> App() } );
Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>], () =&gt; { <span style="color: #008000">window</span>.app <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> App() } );
</pre></div>
<p>The two calls to <code>bind()</code> allow us to pass instance methods as callbacks for animation and resize
@@ -114,13 +114,13 @@ calls.</p>
<h2>Construct typed arrays</h2>
<p>Next we'll create two typed arrays: a positions array with XY coordinates for each vertex, and a
colors array with a 32-bit word for each vertex.</p>
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> TRIANGLE_POSITIONS <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Float32Array([
<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span> TRIANGLE_POSITIONS <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> <span style="color: #008000">Float32Array</span>([
<span style="color: #666666">1</span>, <span style="color: #666666">0</span>,
<span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI <span style="color: #666666">*</span> <span style="color: #666666">2</span> <span style="color: #666666">/</span> <span style="color: #666666">3</span>), <span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI <span style="color: #666666">*</span> <span style="color: #666666">2</span> <span style="color: #666666">/</span> <span style="color: #666666">3</span>),
<span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI <span style="color: #666666">*</span> <span style="color: #666666">4</span> <span style="color: #666666">/</span> <span style="color: #666666">3</span>), <span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI <span style="color: #666666">*</span> <span style="color: #666666">4</span> <span style="color: #666666">/</span> <span style="color: #666666">3</span>),
]);
<span style="color: #008000; font-weight: bold">const</span> TRIANGLE_COLORS <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">new</span> Uint32Array([<span style="color: #666666">0xffff0000</span>, <span style="color: #666666">0xff00ff00</span>, <span style="color: #666666">0xff0000ff</span>]);
<span style="color: #008000; font-weight: bold">const</span> TRIANGLE_COLORS <span style="color: #666666">=</span> <span style="color: #AA22FF; font-weight: bold">new</span> <span style="color: #008000">Uint32Array</span>([<span style="color: #666666">0xffff0000</span>, <span style="color: #666666">0xff00ff00</span>, <span style="color: #666666">0xff0000ff</span>]);
</pre></div>
<p>Next we'll use the positions and colors buffers to create a single <code>VertexBuffer</code> object.</p>
@@ -154,7 +154,7 @@ the integers 0,1,2.</p>
.bufferType(Filament.IndexBuffer$IndexType.USHORT)
.build(engine);
<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine, <span style="color: #008000; font-weight: bold">new</span> Uint16Array([<span style="color: #666666">0</span>, <span style="color: #666666">1</span>, <span style="color: #666666">2</span>]));
<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine, <span style="color: #AA22FF; font-weight: bold">new</span> <span style="color: #008000">Uint16Array</span>([<span style="color: #666666">0</span>, <span style="color: #666666">1</span>, <span style="color: #666666">2</span>]));
</pre></div>
<p>Note that constructing an index buffer is similar to constructing a vertex buffer, but it only has
@@ -211,7 +211,7 @@ code to the top of the render method.</p>
<span style="color: #008000; font-weight: bold">const</span> tcm <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();
<span style="color: #008000; font-weight: bold">const</span> inst <span style="color: #666666">=</span> tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.triangle);
tcm.setTransform(inst, transform);
inst.<span style="color: #008000; font-weight: bold">delete</span>();
inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();
<span style="color: #408080; font-style: italic">// Render the frame.</span>
<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain, <span style="color: #008000; font-weight: bold">this</span>.view);

2
web/docs/build.py
View File

@@ -319,8 +319,6 @@ def gather_docstrings(paths):
stack[-1] = entity
elif 'retval' in tags or 'argument' in tags:
stack[-1]["children"].append(entity)
else:
assert False
previous = entity
else:
brief = previous["brief"]