-
Notifications
You must be signed in to change notification settings - Fork 13
/
webgl_template.htm
127 lines (104 loc) · 3.77 KB
/
webgl_template.htm
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
125
126
127
<!doctype html>
<html lang='en'>
<head>
<style>body{ margin:0 }</style>
</head>
<body>
<canvas id='gl'></canvas>
</body>
<!-- vertex shader, as simple as possible -->
<script id='vertex' type='x-shader/x-vertex'>
attribute vec2 a_position;
void main() {
gl_Position = vec4( a_position, 0., 1. );
}
</script>
<!-- fragment shader -->
<script id='fragment' type='x-shader/x-fragment'>
#ifdef GL_ES
precision mediump float;
#endif
uniform mediump float time;
uniform mediump vec2 resolution;
void main() {
gl_FragColor = vec4(
gl_FragCoord.x / resolution.x,
gl_FragCoord.y / resolution.y,
mod( time/100., 1. ),
1.0
);
}
</script>
<script type='text/javascript'>
// "global" variables
let gl, uTime
window.onload = function() {
const canvas = document.getElementById( 'gl' )
gl = canvas.getContext( 'webgl' )
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// define drawing area of canvas. bottom corner, width / height
gl.viewport( 0,0,gl.drawingBufferWidth, gl.drawingBufferHeight )
// create a buffer object to store vertices
const buffer = gl.createBuffer()
// point buffer at graphic context's ARRAY_BUFFER
gl.bindBuffer( gl.ARRAY_BUFFER, buffer )
const triangles = new Float32Array([
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1
])
// initialize memory for buffer and populate it. Give
// open gl hint contents will not change dynamically.
gl.bufferData( gl.ARRAY_BUFFER, triangles, gl.STATIC_DRAW )
// create vertex shader
let shaderScript = document.getElementById('vertex')
let shaderSource = shaderScript.text
const vertexShader = gl.createShader( gl.VERTEX_SHADER )
gl.shaderSource( vertexShader, shaderSource );
gl.compileShader( vertexShader )
// create fragment shader
shaderScript = document.getElementById('fragment')
shaderSource = shaderScript.text
const fragmentShader = gl.createShader( gl.FRAGMENT_SHADER )
gl.shaderSource( fragmentShader, shaderSource );
gl.compileShader( fragmentShader )
// create shader program
const program = gl.createProgram()
gl.attachShader( program, vertexShader )
gl.attachShader( program, fragmentShader )
gl.linkProgram( program )
gl.useProgram( program )
/* ALL ATTRIBUTE/UNIFORM INITIALIZATION MUST COME AFTER
CREATING/LINKING/USING THE SHADER PROGAM */
// find a pointer to the uniform "time" in our fragment shader
uTime = gl.getUniformLocation( program, 'time' )
const uRes = gl.getUniformLocation( program, 'resolution' )
gl.uniform2f( uRes, window.innerWidth, window.innerHeight )
// get position attribute location in shader
const position = gl.getAttribLocation( program, 'a_position' )
// enable the attribute
gl.enableVertexAttribArray( position )
// this will point to the vertices in the last bound array buffer.
// In this example, we only use one array buffer, where we're storing
// our vertices
gl.vertexAttribPointer( position, 2, gl.FLOAT, false, 0,0 )
render()
}
// keep track of time via incremental frame counter
let time = 0
function render() {
// schedules render to be called the next time the video card requests
// a frame of video
window.requestAnimationFrame( render )
// update time on CPU and GPU
time++
gl.uniform1f( uTime, time )
// draw triangles using the array buffer from index 0 to 6 (6 is count)
gl.drawArrays( gl.TRIANGLES, 0, 6 )
}
</script>
</html>