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

Update web site and JS tutorials.

Browse Source 
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.
This commit is contained in:
Philip Rideout
2020-05-05 12:39:25 -07:00
parent e80ea979a4
commit fb643eb422
15 changed files with 187 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/webgl/filament.js
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/webgl/filament.wasm
BIN
View File
Binary file not shown.
docs/webgl/parquet.filamat
BIN
View File
Binary file not shown.
docs/webgl/plastic.filamat
BIN
View File
Binary file not shown.
docs/webgl/reference.html
+67 -2
View File
@@ -258,10 +258,26 @@
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24AmbientOcclusion">View$AmbientOcclusion</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24AntiAliasing">View$AntiAliasing</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24BlendMode">View$BlendMode</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24BloomOptions%24BlendMode">View$BloomOptions$BlendMode</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#View%24QualityLevel">View$QualityLevel</a></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="#WrapMode">WrapMode</a></td>
<td align="left"></td>
</tr>
@@ -474,6 +490,21 @@
<li><em>returns</em> JavaScript object with keys <code>renderable</code>, <code>vertexBuffer</code>, and <code>indexBuffer</code>. These are of type <a href="#Entity">Entity</a>, <a href="#VertexBuffer">VertexBuffer</a>, and <a href="#IndexBuffer">IndexBuffer</a>.</li>
</ul>
</li>
<li><strong>engine.setAmbientOcclusionOptions(overrides)</strong>
<ul>
<li><em>overrides</em> Dictionary with one or more of the following properties: radius, power, bias, resolution, intensity, quality.</li>
</ul>
</li>
<li><strong>engine.setBloomOptions(overrides)</strong>
<ul>
<li><em>overrides</em> Dictionary with one or more of the following properties: dirtStrength, strength, resolution, anomorphism, levels, blendMode, threshold, enabled, dirt.</li>
</ul>
</li>
<li><strong>engine.setClearOptions(overrides)</strong>
<ul>
<li><em>overrides</em> Dictionary with one or more of the following properties: clearColor, clear, discard.</li>
</ul>
</li>
</ul>
</div>
<div class='classdoc'>
@@ -518,10 +549,11 @@ as quaternions.</li>
<h2>class <a id='IndexBuffer' href='#IndexBuffer'>IndexBuffer</a></h2>
<p>Array of 16-bit or 32-bit unsigned integers consumed by the GPU.</p>
<ul>
<li><strong>indexBuffer.setBuffer(engine, buffer)</strong>
<li><strong>indexBuffer.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>
@@ -727,11 +759,12 @@ properties.</p>
<h2>class <a id='VertexBuffer' href='#VertexBuffer'>VertexBuffer</a></h2>
<p>Bundle of buffers and associated vertex attributes.</p>
<ul>
<li><strong>vertexBuffer.setBufferAt(engine, bufferIndex, buffer)</strong>
<li><strong>vertexBuffer.setBufferAt(engine, bufferIndex, buffer, byteOffset)</strong>
<ul>
<li><em>engine</em> <a href="#Engine">Engine</a></li>
<li><em>bufferIndex</em> non-negative integer</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>
@@ -1060,6 +1093,8 @@ This defines the following functions:</p>
<li>INT</li>
<li>HALF</li>
<li>FLOAT</li>
<li>UINT_10F_11F_11F_REV</li>
<li>USHORT_565</li>
</ul>
</div>
<div class='enumdoc'>
@@ -1286,6 +1321,13 @@ This defines the following functions:</p>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$AmbientOcclusion' href='#View$AmbientOcclusion'>View$AmbientOcclusion</a></h2>
<ul>
<li>NONE</li>
<li>SSAO</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$AntiAliasing' href='#View$AntiAliasing'>View$AntiAliasing</a></h2>
<ul>
<li>NONE</li>
@@ -1293,6 +1335,29 @@ This defines the following functions:</p>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$BlendMode' href='#View$BlendMode'>View$BlendMode</a></h2>
<ul>
<li>OPAQUE</li>
<li>TRANSLUCENT</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$BloomOptions$BlendMode' href='#View$BloomOptions$BlendMode'>View$BloomOptions$BlendMode</a></h2>
<ul>
<li>ADD</li>
<li>INTERPOLATE</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='View$QualityLevel' href='#View$QualityLevel'>View$QualityLevel</a></h2>
<ul>
<li>LOW</li>
<li>MEDIUM</li>
<li>HIGH</li>
<li>ULTRA</li>
</ul>
</div>
<div class='enumdoc'>
<h2>enum <a id='WrapMode' href='#WrapMode'>WrapMode</a></h2>
<ul>
<li>CLAMP_TO_EDGE</li>
docs/webgl/textured.filamat
BIN
View File
Binary file not shown.
docs/webgl/triangle.filamat
BIN
View File
Binary file not shown.
docs/webgl/tutorial_suzanne.js
+20 -20
View File
@@ -32,27 +32,27 @@ class App {
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);
() => {
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();
docs/webgl/tutorial_triangle.html
+6 -2
View File
@@ -184,8 +184,12 @@ view.</p>
<span style="color: #008000; font-weight: bold">this</span>.view <span style="color: #666666">=</span> engine.createView();
<span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
<span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);
<span style="color: #008000; font-weight: bold">this</span>.view.setClearColor([<span style="color: #666666">0.1</span>, <span style="color: #666666">0.2</span>, <span style="color: #666666">0.3</span>, <span style="color: #666666">1.0</span>]); <span style="color: #408080; font-style: italic">// blue-green background</span>
<span style="color: #008000; font-weight: bold">this</span>.resize(); <span style="color: #408080; font-style: italic">// adjust the initial viewport</span>
<span style="color: #408080; font-style: italic">// Set up a blue-green background:</span>
<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #666666">:</span> [<span style="color: #666666">0.0</span>, <span style="color: #666666">0.1</span>, <span style="color: #666666">0.2</span>, <span style="color: #666666">1.0</span>], clear<span style="color: #666666">:</span> <span style="color: #008000; font-weight: bold">true</span>});
<span style="color: #408080; font-style: italic">// Adjust the initial viewport:</span>
<span style="color: #008000; font-weight: bold">this</span>.resize();
</pre></div>
<p>At this point, we're done creating all Filament entities, and the code should run without errors.
docs/webgl/tutorial_triangle.js
+7 -2
View File
@@ -44,8 +44,13 @@ class App {
this.view = engine.createView();
this.view.setCamera(this.camera);
this.view.setScene(this.scene);
this.view.setClearColor([0.1, 0.2, 0.3, 1.0]); // blue-green background
this.resize(); // adjust the initial viewport
// Set up a blue-green background:
this.renderer.setClearOptions({
clearColor: [0.0, 0.1, 0.2, 1.0],
clear: true
});
// Adjust the initial viewport:
this.resize();
this.render = this.render.bind(this);
this.resize = this.resize.bind(this);
window.addEventListener('resize', this.resize);
web/docs/Pipfile
+14
View File
@@ -0,0 +1,14 @@
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true
[dev-packages]
[packages]
jsbeautifier = "*"
mistletoe = "*"
Pygments = "*"
[requires]
python_version = "3.8"
web/docs/Pipfile.lock
Generated
+58
View File
@@ -0,0 +1,58 @@
{
"_meta": {
"hash": {
"sha256": "64fb040f71095c2ee61210e3b1cab5dfde8866fcc1121829f2106ea38abbd125"
},
"pipfile-spec": 6,
"requires": {
"python_version": "3.8"
},
"sources": [
{
"name": "pypi",
"url": "https://pypi.org/simple",
"verify_ssl": true
}
]
},
"default": {
"editorconfig": {
"hashes": [
"sha256:1b0ef345f9c3a673e492cfe608ed644b236139f7fceab5c6f513a71bcaf8a56c",
"sha256:60d6f10b87d2572ac1581cb8c9f018163e2b13a9e49588f9fb6dc8c715a1744c"
],
"version": "==0.12.2"
},
"jsbeautifier": {
"hashes": [
"sha256:4f670c6f4f8d4caca9a348271010742f494becb96fe0a9be6ffac8b3d46350ca"
],
"index": "pypi",
"version": "==1.11.0"
},
"mistletoe": {
"hashes": [
"sha256:24d0f18cc5f0381c2cfb8a24ef3de83eb9f7929cb7d0e71ecb164b671d86e6a3",
"sha256:3e2d31b2fa6231ea2ee46981274ebac8d5e5736e3aad2d1cd449e2c053b7023b"
],
"index": "pypi",
"version": "==0.7.2"
},
"pygments": {
"hashes": [
"sha256:647344a061c249a3b74e230c739f434d7ea4d8b1d5f3721bc0f3558049b38f44",
"sha256:ff7a40b4860b727ab48fad6360eb351cc1b33cbf9b15a0f689ca5353e9463324"
],
"index": "pypi",
"version": "==2.6.1"
},
"six": {
"hashes": [
"sha256:236bdbdce46e6e6a3d61a337c0f8b763ca1e8717c03b369e87a7ec7ce1319c0a",
"sha256:8f3cd2e254d8f793e7f3d6d9df77b92252b52637291d0f0da013c76ea2724b6c"
],
"version": "==1.14.0"
}
},
"develop": {}
}
web/docs/build.py
+8 -5
View File
@@ -1,11 +1,13 @@
#!/usr/bin/env python3
# To run this script, you may need to do the following on Ubuntu:
# sudo apt-get install python3-pip
# pip3 install -r requirements.txt
# To run this script, I recommend using pipenv to create an isolated Python environment with the
# correct packages so that you do not interfere with other Python projects in your system.
# After installing pipenv, run the following commands from the current folder:
#
# If CMake is choosing /usr/bin/python3, then do this instead:
# /usr/bin/python3 -m pip requirements.txt
# pipenv --python 3.7
# pipenv shell
# pipenv install
# ./build.py
"""Converts markdown into HTML and extracts JavaScript code blocks.
@@ -516,6 +518,7 @@ if __name__ == "__main__":
# Copy resources from "samples" to "docs"
copy_built_file('web/samples/suzanne.filamesh')
copy_built_file('web/samples/parquet.filamat')
copy_built_file('web/samples/metallic*.ktx')
copy_built_file('web/samples/normal*.ktx')
copy_built_file('web/samples/roughness*.ktx')
web/docs/requirements.txt
-4
View File
@@ -1,4 +0,0 @@
jsbeautifier==1.8.8
mistletoe==0.7.1
Pygments==2.2.0
future-fstrings
web/docs/tutorial_triangle.md
+6 -2
View File
@@ -203,8 +203,12 @@ this.camera = engine.createCamera();
this.view = engine.createView();
this.view.setCamera(this.camera);
this.view.setScene(this.scene);
this.view.setClearColor([0.1, 0.2, 0.3, 1.0]); // blue-green background
this.resize(); // adjust the initial viewport
// Set up a blue-green background:
this.renderer.setClearOptions({clearColor: [0.0, 0.1, 0.2, 1.0], clear: true});
// Adjust the initial viewport:
this.resize();
```
At this point, we're done creating all Filament entities, and the code should run without errors.