-
Notifications
You must be signed in to change notification settings - Fork 13
/
video_to_texture_invert.html
190 lines (155 loc) · 6.47 KB
/
video_to_texture_invert.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!doctype html>
<html lang='en'>
<head>
<style>body{ margin:0; background:black }</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 float time;
// contains resolution of our canvas, in pixels
uniform vec2 resolution;
// uniform pointing to our opengl texture
uniform sampler2D uSampler;
void main() {
// gl_FragCoord is measured in pixels, but texture2D expects
// normalized coordinates (between 0–1). If we divide gl_FragCoord
// by our resolution, we'll get a normalized position value
vec2 pos = gl_FragCoord.xy / resolution;
// just get rgb from the texture to invert.
vec3 color = texture2D( uSampler, pos ).rgb;
gl_FragColor = vec4( vec3( 1. - color ), 1. );
}
</script>
<script type='text/javascript'>
// kinda global variables... upvalues to each closure of each function in this script tag
let gl, uTime, uRes, drawProgram, videoTexture
const size = 768
window.onload = function() {
const canvas = document.getElementById( 'gl' )
gl = canvas.getContext( 'webgl' )
canvas.width = canvas.height = size
// define drawing area of webgl canvas. bottom corner, width / height
// XXX can't remember why we need the *2!
gl.viewport( 0,0,gl.drawingBufferWidth*2, gl.drawingBufferHeight*2 )
// 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 )
// create two triangles (three vertices each) that fill entire canvas,
// with coordinates measured from -1 to 1.
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
// create shader object
const vertexShader = gl.createShader( gl.VERTEX_SHADER )
// define source text for our shader
gl.shaderSource( vertexShader, shaderSource )
// compile shader
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, which links vertex and fragment shaders
drawProgram = gl.createProgram()
gl.attachShader( drawProgram, vertexShader )
gl.attachShader( drawProgram, fragmentShader )
// report any errors in the fragment shader
console.log( gl.getShaderInfoLog( fragmentShader ) )
gl.linkProgram( drawProgram )
gl.useProgram( drawProgram )
/* 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( drawProgram, 'time' )
uRes = gl.getUniformLocation( drawProgram, 'resolution' )
// send uniform values for uRes up to gpu
gl.uniform2f( uRes, size, size )
// get position attribute location in shader
var position = gl.getAttribLocation( drawProgram, '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 )
video = getVideo()
}
function getVideo() {
const video = document.createElement('video');
// request video stream
navigator.mediaDevices.getUserMedia({
video:true
}).then( stream => {
// this block happens when the video stream has been successfully requested
video.srcObject = stream
video.play()
makeTexture()
})
return video
}
function makeTexture() {
// create an OpenGL texture object
videoTexture = gl.createTexture()
// this tells OpenGL which texture object to use for subsequent operations
gl.bindTexture( gl.TEXTURE_2D, videoTexture )
// since canvas draws from the top and shaders draw from the bottom, we
// have to flip our canvas when using it as a shader.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
// how to map when texture element is more than one pixel
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR )
// how to map when texture element is less than one pixel
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR )
// you must have these properties defined for the video texture to
// work correctly at non-power-of-2 sizes
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE )
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE )
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 )
gl.texImage2D(
gl.TEXTURE_2D, // target: you will always want gl.TEXTURE_2D
0, // level of detail: 0 is the base
gl.RGBA, gl.RGBA, // color formats
gl.UNSIGNED_BYTE, // type: the type of texture data; 0-255
video // pixel source: could also be video or image
)
// draw triangles using the array buffer from index 0 to 6 (6 is count)
gl.drawArrays( gl.TRIANGLES, 0, 6 )
}
</script>
</html>