-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
81 lines (69 loc) · 3.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Physically Based Rendering (PBR) Test Models</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<h1>Physically Based Rendering (PBR) Tests</h1>
<p>
<a href="https://twitter.com/emackey">@emackey</a> -
<a href="https://github.com/emackey/testing-pbr">source code</a>
</p>
<p>
These are some quick tests of PBR using
<a href="https://threejs.org/docs/index.html#Reference/Materials/MeshStandardMaterial"
target="_blank">THREE.MeshStandardMaterial</a>.
</p>
</div>
<div class="container">
<h2>Fire Hydrant - <a href="fire-hydrant.html" target="_blank">View Demo</a></h2>
<p>
The mesh came from <a href="https://share.allegorithmic.com/libraries/2124" target="_blank">Substance Share</a>
and is <a href="https://www.allegorithmic.com/legal/substance-share" target="_blank">covered</a> by the
<a href="https://www.allegorithmic.com/legal/substance-share" target="_blank">Creative Commons 4.0</a> license.
The textures were (mostly) procedurally generated in Substance Painter 2.3.1. The model has some visible polygon
edges on the side hose hookups that were not visible in Substance Painter, but these may be artifacts from
a sub-optimal conversion process I used. Also, the yellow paint looks shinier in Three.js than it did in
Substance Painter.
</p>
<p>
<div class="thumbnail" style="background-image: url(models/FireHydrant/fire_hydrant_Base_Color.png);" data-name="Base color"></div>
<div class="thumbnail" style="background-image: url(models/FireHydrant/fire_hydrant_Normal_OpenGL.png);" data-name="Normal"></div>
<div class="thumbnail" style="background-image: url(models/FireHydrant/fire_hydrant_Mixed_AO.png);" data-name="AO"></div>
<div class="thumbnail" style="background-image: url(models/FireHydrant/fire_hydrant_Metallic.png);" data-name="Metallic"></div>
<div class="thumbnail" style="background-image: url(models/FireHydrant/fire_hydrant_Roughness.png);" data-name="Roughness"></div>
</p>
</div>
<div class="container">
<h2>Chest - <a href="chest.html" target="_blank">View Demo</a></h2>
<p>
I believe this is a demo object from Luxology Modo. A detail map was removed such that the model
can work just from the primary PBR maps.
</p>
<p>
Zoom in on one of the brass bumps on the front of the chest. Note that you can see the reflection
of the environment in the brass, and again on the metal buckles. The reflection map is <i>not</i>
part of the Chest model, it came from the host application's scene. I believe that glTF loaders
will need to provide an API for the host app to supply a reflection map to the model being loaded.
The reflection map cannot be included in a glTF model if the model is to be loaded into a larger
scene.
</p>
<p>
<div class="thumbnail" style="background-image: url(models/Chest/chest_albedo.png);" data-name="Base color"></div>
<div class="thumbnail" style="background-image: url(models/Chest/chest_normal.png);" data-name="Normal"></div>
<div class="thumbnail" style="background-image: url(models/Chest/chest_ao.png);" data-name="AO"></div>
<div class="thumbnail" style="background-image: url(models/Chest/chest_metalness.png);" data-name="Metallic"></div>
<div class="thumbnail" style="background-image: url(models/Chest/chest_roughness.png);" data-name="Roughness"></div>
</p>
</div>
<div class="container">
<h2><a href="normal-tangent-readme.html">Normal Tangent Test</a></h2>
<p>
It's normal-mapping time. Do you know where your tangent vectors are?
</p>
</div>
</body>
</html>