750b15830f
This adds a new demo that leverages ImGui. It looks very similar to the
existing material_sandbox demo we have for desktop, with a few
differences:
1. Does not use FilamentApp.
2. Does not draw a shadow plane.
3. Does not use a TrueType font in ImGui. (improves load time)
4. Does not allow the user to spin the model. (will fix soon)
We now have a triumvirate of web demos with a progression in complexity:
1. triangle
2. suzanne
3. sandbox
This is a sufficient set of WebGL samples for now, at least until we
finish creating a proper JavaScript API.
This CL factors out some of the common code with the native sandbox
demo, but keeps the UI definition separate since the web demo has some
minor differences (e.g., there is no shadow plane yet).
Note that using viewport units for height was wrong; it caused a bad
aspect ratio on Android while the URL bar was visible. This is explained
in an article:
https://developers.google.com/web/updates/2016/12/url-bar-resizing
29 lines
627 B
HTML
29 lines
627 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Triangle</title>
|
|
<link href="favicon.png" rel="icon" type="image/x-icon"/>
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
#filament-canvas {
|
|
touch-action: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="filament-canvas"></canvas>
|
|
<script src="triangle.js"></script>
|
|
<script src="filaweb.js"></script>
|
|
<script>
|
|
load({});
|
|
</script>
|
|
</body>
|
|
</html>
|