Skip to content

Commit e502322

Browse files
author
Andrew Adamson
committed
Adding initial support files for WebGL video series.
0 parents  commit e502322

6 files changed

+829
-0
lines changed

‎01.HelloWorld.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const vertexShaderSource = `#version 300 es
2+
#pragma vscode_glsllint_stage: vert
3+
4+
void main()
5+
{
6+
gl_PointSize = 150.0;
7+
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
8+
}`;
9+
10+
const fragmentShaderSource = `#version 300 es
11+
#pragma vscode_glsllint_stage: frag
12+
13+
precision mediump float;
14+
15+
out vec4 fragColor;
16+
17+
void main()
18+
{
19+
fragColor = vec4(1.0, 0.0, 0.0, 1.0);
20+
}`;
21+
22+
const canvas = document.querySelector('canvas');
23+
const gl = canvas.getContext('webgl2');
24+
const program = gl.createProgram();
25+
26+
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
27+
gl.shaderSource(vertexShader, vertexShaderSource);
28+
gl.compileShader(vertexShader);
29+
gl.attachShader(program, vertexShader);
30+
31+
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
32+
gl.shaderSource(fragmentShader, fragmentShaderSource);
33+
gl.compileShader(fragmentShader);
34+
gl.attachShader(program, fragmentShader);
35+
36+
gl.linkProgram(program);
37+
38+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
39+
console.log(gl.getShaderInfoLog(vertexShader));
40+
console.log(gl.getShaderInfoLog(fragmentShader));
41+
}
42+
43+
gl.useProgram(program);
44+
45+
gl.drawArrays(gl.POINTS, 0, 1);

‎02.Uniforms1.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// tslint:disable: no-console
2+
const vertexShaderSrc = `#version 300 es
3+
#pragma vscode_glsllint_stage: vert
4+
5+
uniform float uPointSize;
6+
uniform vec2 uPosition;
7+
8+
void main()
9+
{
10+
gl_PointSize = uPointSize;
11+
gl_Position = vec4(uPosition, 0.0, 1.0);
12+
}`;
13+
14+
const fragmentShaderSrc = `#version 300 es
15+
#pragma vscode_glsllint_stage: frag
16+
17+
precision mediump float;
18+
19+
uniform int uIndex;
20+
uniform vec4 uColors[3];
21+
22+
out vec4 fragColor;
23+
24+
void main()
25+
{
26+
fragColor = uColors[uIndex];
27+
}`;
28+
29+
const gl = document.querySelector('canvas').getContext('webgl2');
30+
31+
const program = gl.createProgram();
32+
33+
{
34+
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
35+
gl.shaderSource(vertexShader, vertexShaderSrc);
36+
gl.compileShader(vertexShader);
37+
gl.attachShader(program, vertexShader);
38+
39+
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
40+
gl.shaderSource(fragmentShader, fragmentShaderSrc);
41+
gl.compileShader(fragmentShader);
42+
gl.attachShader(program, fragmentShader);
43+
44+
gl.linkProgram(program);
45+
46+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
47+
console.log(gl.getShaderInfoLog(vertexShader));
48+
console.log(gl.getShaderInfoLog(fragmentShader));
49+
}
50+
}
51+
gl.useProgram(program);
52+
53+
const uPositionLoc = gl.getUniformLocation(program, 'uPosition');
54+
gl.uniform2f(uPositionLoc, 0, -.2);
55+
56+
const uPointSizeLoc = gl.getUniformLocation(program, 'uPointSize');
57+
gl.uniform1f(uPointSizeLoc, 100);
58+
59+
const uIndexLoc = gl.getUniformLocation(program, 'uIndex');
60+
gl.uniform1i(uIndexLoc, 2);
61+
62+
const uColorsLoc = gl.getUniformLocation(program, 'uColors');
63+
gl.uniform4fv(uColorsLoc, [
64+
1,0,0,1,
65+
0,1,0,1,
66+
0,0,1,1,
67+
]);
68+
69+
gl.drawArrays(gl.POINTS, 0, 1);

‎03.Attributes1.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// tslint:disable: no-console
2+
3+
const vertexShaderSrc = `#version 300 es
4+
#pragma vscode_glsllint_stage: vert
5+
6+
layout(location = 1) in float aPointSize;
7+
layout(location = 0) in vec2 aPosition;
8+
layout(location = 2) in vec3 aColor;
9+
10+
out vec3 vColor;
11+
12+
void main()
13+
{
14+
vColor = aColor;
15+
gl_PointSize = aPointSize;
16+
gl_Position = vec4(aPosition, 0.0, 1.0);
17+
}`;
18+
19+
const fragmentShaderSrc = `#version 300 es
20+
#pragma vscode_glsllint_stage: frag
21+
22+
precision mediump float;
23+
24+
in vec3 vColor;
25+
26+
out vec4 fragColor;
27+
28+
void main()
29+
{
30+
fragColor = vec4(vColor, 1.0);
31+
}`;
32+
33+
const gl = document.querySelector('canvas').getContext('webgl2');
34+
35+
const program = gl.createProgram();
36+
37+
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
38+
gl.shaderSource(vertexShader, vertexShaderSrc);
39+
gl.compileShader(vertexShader);
40+
gl.attachShader(program, vertexShader);
41+
42+
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
43+
gl.shaderSource(fragmentShader, fragmentShaderSrc);
44+
gl.compileShader(fragmentShader);
45+
gl.attachShader(program, fragmentShader);
46+
47+
gl.linkProgram(program);
48+
49+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
50+
console.log(gl.getShaderInfoLog(vertexShader));
51+
console.log(gl.getShaderInfoLog(fragmentShader));
52+
}
53+
gl.useProgram(program);
54+
55+
const bufferData = new Float32Array([
56+
0, 1, 100, 1,0,0,
57+
-1,-1, 32, 0,1,0,
58+
1,-1, 50, 0,0,1,
59+
]);
60+
61+
const aPositionLoc = 0;
62+
const aPointSizeLoc = 1;
63+
const aColorLoc = 2;
64+
65+
gl.enableVertexAttribArray(aPositionLoc);
66+
gl.enableVertexAttribArray(aPointSizeLoc);
67+
gl.enableVertexAttribArray(aColorLoc);
68+
69+
const buffer = gl.createBuffer();
70+
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
71+
gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
72+
73+
gl.vertexAttribPointer(aPositionLoc, 2, gl.FLOAT, false, 6 * 4, 0);
74+
gl.vertexAttribPointer(aPointSizeLoc, 1, gl.FLOAT, false, 6 * 4, 2 * 4);
75+
gl.vertexAttribPointer(aColorLoc, 3, gl.FLOAT, false, 6 * 4, 3 * 4);
76+
77+
gl.drawArrays(gl.TRIANGLES, 0, 3);

‎05.Attributes2.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
const vertexShaderSrc = `#version 300 es
2+
#pragma vscode_glsllint_stage: vert
3+
4+
layout(location=0) in vec4 aPosition;
5+
layout(location=1) in float aPointSize;
6+
layout(location=2) in vec4 aColor;
7+
8+
out vec4 vColor;
9+
10+
void main()
11+
{
12+
vColor = aColor;
13+
gl_PointSize = aPointSize;
14+
gl_Position = aPosition;
15+
}`;
16+
17+
const fragmentShaderSrc = `#version 300 es
18+
#pragma vscode_glsllint_stage: frag
19+
20+
precision mediump float;
21+
22+
in vec4 vColor;
23+
24+
out vec4 fragColor;
25+
26+
void main()
27+
{
28+
fragColor = vColor;
29+
}`;
30+
31+
const gl = document.querySelector('canvas').getContext('webgl2');
32+
33+
const program = gl.createProgram();
34+
// This code compiles the shaders and links the program.
35+
{
36+
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
37+
gl.shaderSource(vertexShader, vertexShaderSrc);
38+
gl.compileShader(vertexShader);
39+
gl.attachShader(program, vertexShader);
40+
41+
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
42+
gl.shaderSource(fragmentShader, fragmentShaderSrc);
43+
gl.compileShader(fragmentShader);
44+
gl.attachShader(program, fragmentShader);
45+
46+
gl.linkProgram(program);
47+
48+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
49+
console.log(gl.getShaderInfoLog(vertexShader));
50+
console.log(gl.getShaderInfoLog(fragmentShader));
51+
}
52+
}
53+
gl.useProgram(program);
54+
55+
const vertData = new Float32Array([
56+
-0.6618,-0.7687, 50, 0.5849, 0.7600, 0.4662,
57+
-0.3149, 0.7417, 10, 0.9232, 0.9332, 0.4260,
58+
0.9749,-0.8996, 40, 0.6969, 0.5353, 0.1471,
59+
-0.9202,-0.2956, 90, 0.2899, 0.9056, 0.7799,
60+
0.4550,-0.0642, 20, 0.2565, 0.6451, 0.8498,
61+
0.6192, 0.5755, 70, 0.6133, 0.8137, 0.4046,
62+
-0.5946, 0.7057, 20, 0.6745, 0.5229, 0.4518,
63+
0.6365, 0.7236, 70, 0.4690, 0.0542, 0.7396,
64+
0.8625,-0.0835, 20, 0.3708, 0.6588, 0.8611,
65+
0.7997, 0.4695, 70, 0.7490, 0.3797, 0.6879,
66+
]);
67+
68+
const vertData2 = new Int16Array([
69+
-21686,-25189, 50, 19166, 24903, 15276,
70+
-10319, 24304, 10, 30251, 30579, 13959,
71+
31945,-29479, 40, 22836, 17540, 4820,
72+
-30154, -9687, 90, 9499, 29674, 25555,
73+
14909, -2104, 20, 8404, 21138, 27846,
74+
20289, 18857, 70, 20096, 26663, 13257,
75+
-19484, 23124, 20, 22102, 17134, 14804,
76+
20856, 23710, 70, 15368, 1776, 24235,
77+
28262, -2737, 20, 12150, 21587, 28216,
78+
26204, 15384, 70, 24543, 12442, 22541,
79+
]);
80+
81+
const vertData3 = new Int8Array([
82+
-85, -99, 50, 74, 97, 59,
83+
-41, 94, 10, 118, 119, 54,
84+
124,-116, 40, 89, 68, 18,
85+
-118, -38, 90, 37, 115, 99,
86+
58, -9, 20, 32, 82, 108,
87+
79, 73, 70, 78, 104, 51,
88+
-77, 90, 20, 86, 66, 57,
89+
81, 92, 70, 60, 6, 94,
90+
110, -11, 20, 47, 84, 110,
91+
102, 60, 70, 95, 48, 88,
92+
]);
93+
94+
const aPositionLoc = 0;
95+
const aPointSizeLoc = 1;
96+
const aColorLoc = 2;
97+
98+
gl.vertexAttrib4f(aPositionLoc, 0, 0, 0, 1);
99+
gl.vertexAttrib1f(aPointSizeLoc, 50);
100+
gl.vertexAttrib4f(aColorLoc, 1, 0, 0, 1);
101+
102+
const vertBuffer = gl.createBuffer();
103+
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
104+
gl.bufferData(gl.ARRAY_BUFFER, vertData, gl.STATIC_DRAW);
105+
106+
gl.vertexAttribPointer(aPositionLoc, 2, gl.FLOAT, false, 24, 0);
107+
gl.vertexAttribPointer(aPointSizeLoc, 1, gl.FLOAT, false, 24, 8);
108+
gl.vertexAttribPointer(aColorLoc, 3, gl.FLOAT, false, 24, 12);
109+
110+
gl.enableVertexAttribArray(aPositionLoc);
111+
gl.enableVertexAttribArray(aColorLoc);
112+
gl.enableVertexAttribArray(aPointSizeLoc);
113+
114+
gl.drawArrays(gl.POINTS, 0, 10);

0 commit comments

Comments
 (0)