-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy path1x1cubemap-no-lib-nearest.html
88 lines (76 loc) · 2.21 KB
/
1x1cubemap-no-lib-nearest.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
<!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">
</head>
<body>
<canvas id="c"></canvas>
</body>
<script id="vs" type="notjs">
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
uniform vec2 u_resolution;
uniform samplerCube u_texture;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution * 2.0 - 1.0;
vec3 normal = vec3(uv.x, 0.3, uv.y);
gl_FragColor = textureCube(u_texture, normal);
}
</script>
<script>
"use strict";
var $ = document.getElementById.bind(document);
var gl = $("c").getContext("webgl");
var p = gl.createProgram();
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, $("vs").text);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, $("fs").text);
gl.compileShader(fs);
gl.attachShader(p, vs);
gl.attachShader(p, fs);
gl.linkProgram(p);
var b = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, b);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1,
]),
gl.STATIC_DRAW);
var t = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, t);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
[
[ 0xFF, 0x00, 0x00 ],
[ 0xFF, 0xFF, 0x00 ],
[ 0x00, 0xFF, 0x00 ],
[ 0x00, 0xFF, 0xFF ],
[ 0x00, 0x00, 0xFF ],
[ 0xFF, 0x00, 0xFF ],
].forEach(function(color, ndx) {
gl.texImage2D(
gl.TEXTURE_CUBE_MAP_POSITIVE_X + ndx,
0, gl.RGB,
1, 1, 0,
gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array(color));
});
var pLoc = gl.getAttribLocation(p, "a_position");
var rLoc = gl.getUniformLocation(p, "u_resolution");
gl.useProgram(p);
gl.enableVertexAttribArray(pLoc);
gl.vertexAttribPointer(pLoc, 2, gl.FLOAT, false, 0, 0);
gl.uniform2f(rLoc, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.drawArrays(gl.TRIANGLES, 0, 6);
</script>
</html>