Skip to content

Commit 55e7e81

Browse files
author
Andrew Adamson
committed
Adding attribute matrix and transparency sample code
1 parent 359f2ee commit 55e7e81

File tree

2 files changed

+263
-0
lines changed

2 files changed

+263
-0
lines changed

‎14.matrixattributes.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// tslint:disable: no-console
2+
const vertexShaderSrc = `#version 300 es
3+
#pragma vscode_glsllint_stage: vert
4+
5+
layout(location=0) in vec4 aPosition;
6+
layout(location=1) in float aPointSize;
7+
layout(location=2) in vec4 aColor;
8+
layout(location=3) in mat4 aModelMatrix;
9+
10+
out vec4 vColor;
11+
12+
void main()
13+
{
14+
vColor = aColor;
15+
gl_PointSize = aPointSize;
16+
gl_Position = aModelMatrix * aPosition;
17+
}`;
18+
19+
const fragmentShaderSrc = `#version 300 es
20+
#pragma vscode_glsllint_stage: frag
21+
22+
precision mediump float;
23+
24+
in vec4 vColor;
25+
26+
out vec4 fragColor;
27+
28+
void main()
29+
{
30+
fragColor = vColor;
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+
// Get all attribute names
56+
const attributeNames = [];
57+
for (let i = 0; i < gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES); i++)
58+
attributeNames.push(gl.getActiveAttrib(program, i).name);
59+
60+
// Print out their attribute location values
61+
attributeNames
62+
.reduce((c, attribName) => [
63+
...c,
64+
`${ gl.getAttribLocation(program, attribName) }: ${attribName}`,
65+
], [])
66+
.sort()
67+
.forEach(v => console.log(v));

‎15.transparency.js

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
// tslint:disable:no-console
2+
const vertexShaderSrc = `#version 300 es
3+
#pragma vscode_glsllint_stage: vert
4+
5+
layout(location=0) in vec4 aPosition;
6+
layout(location=1) in vec4 aColor;
7+
8+
out vec4 vColor;
9+
10+
void main()
11+
{
12+
vColor = aColor;
13+
gl_Position = aPosition;
14+
}`;
15+
16+
const fragmentShaderSrc = `#version 300 es
17+
#pragma vscode_glsllint_stage: frag
18+
19+
precision mediump float;
20+
21+
in vec4 vColor;
22+
23+
out vec4 fragColor;
24+
25+
void main()
26+
{
27+
fragColor = vColor;
28+
}`;
29+
30+
const depthVertexShaderSrc = `#version 300 es
31+
#pragma vscode_glsllint_stage: vert
32+
33+
layout(location=0) in vec4 aPosition;
34+
layout(location=1) in vec2 aTexCoord;
35+
36+
out vec2 vTexCoord;
37+
38+
void main() {
39+
vTexCoord = aTexCoord;
40+
gl_Position = vec4(aPosition.xy, 1.0, 1.0);
41+
}`;
42+
const depthFragmentShaderSrc = `#version 300 es
43+
#pragma vscode_glsllint_stage: frag
44+
45+
precision highp float;
46+
precision highp int;
47+
48+
uniform sampler2D uSampler;
49+
in vec2 vTexCoord;
50+
51+
out highp vec4 pc_fragColor;
52+
53+
void main() {
54+
float depth = texture(uSampler, vTexCoord).r;
55+
pc_fragColor = vec4(vec3(pow(depth, 2.0)), 1.0);
56+
}`;
57+
58+
const gl = document.querySelector('canvas').getContext('webgl2');
59+
60+
const prepareDepthVisualizer = () => {
61+
const texture = gl.createTexture();
62+
gl.bindTexture(gl.TEXTURE_2D, texture);
63+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
64+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.canvas.width, gl.canvas.height / 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
65+
66+
const depthBuffer = gl.createRenderbuffer();
67+
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
68+
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, gl.canvas.width, gl.canvas.height / 2);
69+
70+
const framebuffer = gl.createFramebuffer();
71+
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
72+
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
73+
74+
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
75+
};
76+
77+
const createProgram = (vSource, fSource) => {
78+
const program = gl.createProgram();
79+
80+
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
81+
gl.shaderSource(vertexShader, vSource);
82+
gl.compileShader(vertexShader);
83+
gl.attachShader(program, vertexShader);
84+
85+
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
86+
gl.shaderSource(fragmentShader, fSource);
87+
gl.compileShader(fragmentShader);
88+
gl.attachShader(program, fragmentShader);
89+
90+
gl.linkProgram(program);
91+
92+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
93+
console.log(gl.getShaderInfoLog(vertexShader));
94+
console.log(gl.getShaderInfoLog(fragmentShader));
95+
}
96+
gl.useProgram(program);
97+
return program;
98+
};
99+
100+
const vertexData = new Float32Array([
101+
// x y depth rgb alpha
102+
// RED TRIANGLE (Back)
103+
-.5, -.5, 0.5, 1,0,0, 0.5,
104+
0.5, 0.0, 0.5, 1,0,0, 0.5,
105+
-.5, 0.5, 0.5, 1,0,0, 0.5,
106+
107+
// BLUE TRIANGLE (Front)
108+
-.5, -.5, -.5, 0,0,1, 0.5,
109+
0.0, 0.5, -.5, 0,0,1, 0.5,
110+
0.5, -.5, -.5, 0,0,1, 0.5,
111+
112+
// GREEN TRIANGLE (Middle)
113+
0.5, -.5, 0.0, 0,1,0, 0.5,
114+
-.5, 0.0, 0.0, 0,1,0, 0.5,
115+
0.5, 0.5, 0.0, 0,1,0, 0.5,
116+
]);
117+
118+
const draw = () => {
119+
gl.clearColor(0,0,0,1);
120+
gl.clear(gl.COLOR_BUFFER_BIT);
121+
122+
gl.enable(gl.DEPTH_TEST);
123+
gl.depthFunc(gl.LEQUAL);
124+
gl.enable(gl.BLEND);
125+
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
126+
127+
gl.drawArrays(gl.TRIANGLES, 0, 3); // RED
128+
gl.drawArrays(gl.TRIANGLES, 6, 3); // GREEN
129+
gl.drawArrays(gl.TRIANGLES, 3, 3); // BLUE
130+
};
131+
132+
const main = () => {
133+
const { width, height } = gl.canvas;
134+
135+
const buffer = gl.createBuffer();
136+
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
137+
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
138+
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 28, 0);
139+
gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 28, 12);
140+
gl.enableVertexAttribArray(0);
141+
gl.enableVertexAttribArray(1);
142+
143+
144+
// Upper window
145+
gl.viewport(0,gl.canvas.height / 2, width, height / 2);
146+
147+
// Draw normally
148+
const colorProgram = createProgram(vertexShaderSrc, fragmentShaderSrc);
149+
gl.useProgram(colorProgram);
150+
draw();
151+
152+
// Lower window
153+
gl.viewport(0, 0, width, height / 2);
154+
155+
// Draw again but to texture
156+
const depthTexture = gl.createTexture();
157+
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
158+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH24_STENCIL8, width, height / 2, 0, gl.DEPTH_STENCIL, gl.UNSIGNED_INT_24_8, null);
159+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
160+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
161+
162+
const renderBuffer = gl.createRenderbuffer();
163+
gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);
164+
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height / 2);
165+
166+
const frameBuffer = gl.createFramebuffer();
167+
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
168+
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
169+
170+
draw(); // Depth data now written to depth texture
171+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
172+
173+
// Draw depth texture to rectangle
174+
const depthViewData = new Float32Array([
175+
-1,-1, 0,0,
176+
1,-1, 1,0,
177+
-1, 1, 0,1,
178+
1, 1, 1,1,
179+
]);
180+
181+
const depthProgram = createProgram(depthVertexShaderSrc, depthFragmentShaderSrc);
182+
gl.useProgram(depthProgram);
183+
184+
const depthViewBuffer = gl.createBuffer();
185+
gl.bindBuffer(gl.ARRAY_BUFFER, depthViewBuffer);
186+
gl.bufferData(gl.ARRAY_BUFFER, depthViewData, gl.STATIC_DRAW);
187+
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
188+
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
189+
gl.enableVertexAttribArray(0);
190+
gl.enableVertexAttribArray(1);
191+
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
192+
193+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
194+
};
195+
196+
main();

0 commit comments

Comments
 (0)