-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy path1x1cubemap.html
129 lines (107 loc) · 3.35 KB
/
1x1cubemap.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
font-family: monospace;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
</body>
<script id="env-map-vs" type="notjs">
uniform mat4 u_viewInverse;
uniform mat4 u_world;
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;
attribute vec4 a_position;
attribute vec3 a_normal;
varying vec3 v_normal;
varying vec3 v_surfaceToView;
void main() {
v_normal = (u_worldInverseTranspose * vec4(a_normal, 0)).xyz;
v_surfaceToView = (u_viewInverse[3] - (u_world * a_position)).xyz;
gl_Position = u_worldViewProjection * a_position;
}
</script>
<script id="env-map-fs" type="notjs">
precision mediump float;
uniform samplerCube u_texture;
varying vec3 v_surfaceToView;
varying vec3 v_normal;
void main() {
vec3 normal = normalize(v_normal);
vec3 surfaceToView = normalize(v_surfaceToView);
vec4 color = textureCube(u_texture, -reflect(surfaceToView, normal));
gl_FragColor = color;
}
</script>
<script src="js/twgl-full.min.js"></script>
<script src="js/chroma.min.js"></script>
<script>
"use strict";
twgl.setAttributePrefix("a_");
var m4 = twgl.m4;
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["env-map-vs", "env-map-fs"]);
var shape = twgl.primitives.createSphereBufferInfo(gl, 1, 24, 12);
// Shared values
var camera = m4.identity();
var view = m4.identity();
var viewProjection = m4.identity();
var texture = twgl.createTexture(gl, {
target: gl.TEXTURE_CUBE_MAP,
format: gl.RGB,
src: [
0xFF, 0x00, 0x00,
0xFF, 0xFF, 0x00,
0x00, 0xFF, 0x00,
0x00, 0xFF, 0xFF,
0x00, 0x00, 0xFF,
0xFF, 0x00, 0xFF,
],
});
var uniforms = {
u_texture: texture,
u_world: m4.identity(),
u_worldInverseTranspose: m4.identity(),
u_worldViewProjection: m4.identity(),
u_viewInverse: m4.identity(),
};
function render(time) {
time *= 0.001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var radius = 4;
var orbitSpeed = time * 0.1;
var projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 100);
var eye = [Math.cos(orbitSpeed) * radius, 4, Math.sin(orbitSpeed) * radius];
var target = [0, 0, 0];
var up = [0, 1, 0];
m4.lookAt(eye, target, up, camera);
m4.inverse(camera, view);
m4.multiply(projection, view, viewProjection);
m4.copy(viewProjection, uniforms.u_worldViewProjection);
m4.copy(camera, uniforms.u_viewInverse);
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, shape);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, shape);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>
</html>