-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgltf.html
70 lines (53 loc) · 2.16 KB
/
gltf.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
<html>
<head>
<meta charset="utf-8">
<title>Simple GLTF loader example</title>
</head>
<script id="vs" type="x-shader/x-vertex">
uniform mat4 proj, view, model;
attribute vec3 pos;
attribute vec3 nor;
attribute vec3 col;
varying vec3 vcol;
void main() {
gl_Position = proj*view*model*vec4(pos, 1);
vcol = nor*0.5 +0.5;
}
</script>
<script id="fs" type="x-shader/x-fragment">
varying lowp vec3 vcol;
void main() {
gl_FragColor = vec4(vcol, 1.0);
//gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script type="module">
import { mat4, vec3, vec4, quat } from "./node_modules/gl-matrix/esm/index.js";
import { get, utils } from "./giggle.js";
import gltf from "./gltf.js";
get("canvas").then((gl) => {
let prog = utils.createProgram(gl, utils.getScriptText("vs"), utils.getScriptText("fs"));
gl.uniformMatrix4fv(gl.getUniformLocation(prog, "proj"), false, mat4.perspective(mat4.create(), 45, gl.canvas.width/gl.canvas.height, 0.1, 100.0));
gl.uniformMatrix4fv(gl.getUniformLocation(prog, "view"), false, mat4.lookAt(mat4.create(), vec3.fromValues(0, 3, 5), vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0)));
let rad = 0;
let model = gltf(gl, "cube.gltf", {
//let model = gltf(gl, "monkey.gltf", {
"POSITION": "pos",
"NORMAL": "nor"
//"COLOR_0": "col"
});
gl.enable(gl.DEPTH_TEST);
(function render() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.uniformMatrix4fv(gl.getUniformLocation(prog, "model"), false, mat4.rotate(mat4.create(), mat4.create(), rad, vec3.fromValues(1, 0.5, 0.25)));
model.then((x)=>x());
rad += 0.1;
requestAnimationFrame(render);
})();
});
</script>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>