Skip to content

Commit 8d28bf7

Browse files
greggmangreggman
committed
add disabled attribute example
1 parent 33b6c0e commit 8d28bf7

File tree

4 files changed

+172
-4
lines changed

4 files changed

+172
-4
lines changed

‎webgl/lessons/resources/webgl-state-diagram.html

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1339,6 +1339,147 @@
13391339
// draw 9 points
13401340
gl.drawArrays(gl.POINTS, 0, 9);
13411341
</script>
1342+
<script id="disabled-vertex-attrib" type="not-js">
1343+
'use strict';
1344+
1345+
const canvas = document.querySelector('canvas');
1346+
const gl = canvas.getContext('webgl');
1347+
1348+
const vsGLSL = `
1349+
attribute vec4 position;
1350+
attribute vec4 color;
1351+
1352+
uniform vec4 offset;
1353+
1354+
varying vec4 v_color;
1355+
1356+
void main() {
1357+
gl_Position = position + offset;
1358+
v_color = color;
1359+
}
1360+
`;
1361+
1362+
const fsGLSL = `
1363+
precision highp float;
1364+
varying vec4 v_color;
1365+
void main() {
1366+
gl_FragColor = v_color;
1367+
}
1368+
`;
1369+
1370+
const createShader = function(gl, type, glsl) {
1371+
const shader = gl.createShader(type)
1372+
gl.shaderSource(shader, glsl)
1373+
gl.compileShader(shader)
1374+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
1375+
throw new Error(gl.getShaderInfoLog(shader))
1376+
}
1377+
return shader
1378+
};
1379+
1380+
const compileShadersAndLinkProgram = function(gl, prg, vsGLSL, fsGLSL) {
1381+
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsGLSL)
1382+
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsGLSL)
1383+
gl.attachShader(prg, vertexShader)
1384+
gl.attachShader(prg, fragmentShader)
1385+
gl.linkProgram(prg)
1386+
if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
1387+
throw new Error(gl.getProgramInfoLog(prg))
1388+
}
1389+
// NOTE! These are only here to unclutter the diagram.
1390+
// It is safe to detach and delete shaders once
1391+
// a program is linked though it is arguably not common.
1392+
// and I usually don't do it.
1393+
gl.detachShader(prg, vertexShader)
1394+
gl.deleteShader(vertexShader)
1395+
gl.detachShader(prg, fragmentShader)
1396+
gl.deleteShader(fragmentShader)
1397+
return prg
1398+
};
1399+
1400+
const prog = gl.createProgram();
1401+
compileShadersAndLinkProgram(gl, prog, vsGLSL, fsGLSL);
1402+
const positionLoc = gl.getAttribLocation(prog, 'position');
1403+
const colorLoc = gl.getAttribLocation(prog, 'color');
1404+
const offsetLoc = gl.getUniformLocation(prog, 'offset');
1405+
1406+
// vertex positions for triangle
1407+
const vertexPositions = new Float32Array([
1408+
0.0, 0.4,
1409+
-0.4, -0.4,
1410+
0.4, -0.4,
1411+
]);
1412+
1413+
const vertexColors = new Float32Array([
1414+
1, 1, 0, 1, // yellow
1415+
0, 1, 1, 1, // cyan
1416+
1, 0, 1, 1, // magenta
1417+
]);
1418+
1419+
const positionBuffer = gl.createBuffer();
1420+
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
1421+
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);
1422+
1423+
const colorBuffer = gl.createBuffer();
1424+
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
1425+
gl.bufferData(gl.ARRAY_BUFFER, vertexColors, gl.STATIC_DRAW);
1426+
1427+
// this is not needed. It's just here to unclutter the diagram
1428+
gl.bindBuffer(gl.ARRAY_BUFFER, null);
1429+
1430+
// above this line is initialization code
1431+
// --------------------------------------
1432+
// below is rendering code.
1433+
1434+
// --------------------------------------
1435+
// First draw a triangle with a different color for each vertex
1436+
1437+
// set the attributes
1438+
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
1439+
gl.enableVertexAttribArray(positionLoc);
1440+
gl.vertexAttribPointer(
1441+
positionLoc, // location
1442+
2, // size (components per iteration)
1443+
gl.FLOAT, // type of to get from buffer
1444+
false, // normalize
1445+
0, // stride (bytes to advance each iteration)
1446+
0, // offset (bytes from start of buffer)
1447+
);
1448+
1449+
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
1450+
gl.enableVertexAttribArray(colorLoc);
1451+
gl.vertexAttribPointer(
1452+
colorLoc, // location
1453+
4, // size (components per iteration)
1454+
gl.FLOAT, // type of to get from buffer
1455+
false, // normalize
1456+
0, // stride (bytes to advance each iteration)
1457+
0, // offset (bytes from start of buffer)
1458+
);
1459+
1460+
// this is not needed. It's just here to unclutter the diagram
1461+
gl.bindBuffer(gl.ARRAY_BUFFER, null);
1462+
1463+
gl.useProgram(prog);
1464+
1465+
// draw on left
1466+
gl.uniform4fv(offsetLoc, [-0.5, 0, 0, 0]);
1467+
1468+
// draw 3 vertices (1 triangle)
1469+
gl.drawArrays(gl.TRIANGLES, 0, 3);
1470+
1471+
// Now draw the triangle again in a solid color
1472+
// by turning off the color attribute and setting
1473+
// an attribute values
1474+
gl.disableVertexAttribArray(colorLoc);
1475+
gl.vertexAttrib4fv(colorLoc, [0.3, 0.6, 0.9, 1]);
1476+
1477+
// draw on right
1478+
gl.uniform4fv(offsetLoc, [0.5, 0, 0, 0]);
1479+
1480+
// draw 3 vertices (1 triangle)
1481+
gl.drawArrays(gl.TRIANGLES, 0, 3);
1482+
</script>
13421483
<script src="/webgl/resources/chroma.min.js"></script>
13431484
<script src="/3rdparty/showdown.min.js"></script>
13441485
<script src="/3rdparty/prism.js" data-manual></script>
@@ -1446,6 +1587,22 @@
14461587
{ note: 'c-buffer', base: 'position2Buffer',x: 'left:left-0', y: 'top:bottom+10', },
14471588
],
14481589
},
1590+
'disabled-vertex-attrib': {
1591+
name: 'Disabled Vertex Attrib',
1592+
adjust: [
1593+
{cmd: 'expand', id: 'globalUI.attribValueState'},
1594+
],
1595+
windowPositions: [
1596+
{ note: 'canvas', base: '#diagram', x: 'right:right-10', y: 'top:top+10', },
1597+
{ note: 'vertex-array', base: '#diagram', x: 'left:left+460', y: 'bottom:bottom-10', },
1598+
{ note: 'global-state', base: '#diagram', x: 'left:left+10', y: 'top:top+10', },
1599+
{ note: 'program', base: 'global state', x: 'left:right+60', y: 'top:top+0', },
1600+
{ note: 'v-shader', base: 'canvas', x: 'left:left-50', y: 'top:bottom+10', },
1601+
{ note: 'f-shader', base: 'vertexShader', x: 'left:left-10', y: 'top:bottom-90', },
1602+
{ note: 'p-buffer', base: 'canvas', x: 'left:left+70', y: 'top:bottom+10', },
1603+
{ note: 'c-buffer', base: 'positionBuffer', x: 'left:left-0', y: 'top:bottom+10', },
1604+
],
1605+
},
14491606
},
14501607
});
14511608
</script>

‎webgl/lessons/resources/webgl-state-diagram/global-ui.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import {
44
addElem,
55
createTable,
6+
formatUniformValue,
67
getColorForWebGLObject,
78
helpToMarkdown,
89
} from './utils.js';
@@ -244,8 +245,8 @@ function createAttribValues(parent, maxAttribs = 8) {
244245
const enabled = gl.getVertexAttrib(loc, gl.VERTEX_ATTRIB_ARRAY_ENABLED);
245246
row.classList.toggle('attrib-enable', enabled);
246247

247-
const value = gl.getVertexAttrib(loc, gl.CURRENT_VERTEX_ATTRIB).join(', ');
248-
if (updateElemAndFlashExpanderIfClosed(cell, value)) {
248+
const value = gl.getVertexAttrib(loc, gl.CURRENT_VERTEX_ATTRIB);
249+
if (updateElemAndFlashExpanderIfClosed(cell, formatUniformValue(value))) {
249250
/*
250251
Note: This code is copied and pasted from the texture unit code above
251252
so it would have to be adapted but, None of the examples use these

‎webgl/lessons/resources/webgl-state-diagram/program-ui.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,10 @@ function createProgramAttributes(parent, gl, program) {
9696
addElem('td', tr, {textContent: index, dataset: {help}});
9797

9898
if (isCurrent) {
99-
const target = vaoInfo.ui.elem.querySelector('tbody').rows[index]; /*.cells[bindPointIndex]; */
99+
const enabled = gl.getVertexAttrib(ii, gl.VERTEX_ATTRIB_ARRAY_ENABLED);
100+
const target = enabled
101+
? vaoInfo.ui.elem.querySelector('tbody').rows[index] /*.cells[bindPointIndex]; */
102+
: globals.globalUI.attribValueState.elem.querySelector('tbody').rows[index];
100103
arrows.push(arrowManager.add(
101104
tr,
102105
target,

‎webgl/lessons/resources/webgl-state-diagram/state-diagram.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,6 @@ export default function main({webglVersion, examples}) {
143143
globals.globalUI = createGlobalUI(document.querySelector('#global-state'));
144144
moveToFront(defaultVAOInfo.ui.elem.parentElement);
145145

146-
147146
function getUIById(id) {
148147
const [base, part] = id.split('.');
149148
switch (base) {
@@ -457,18 +456,26 @@ export default function main({webglVersion, examples}) {
457456
const {ui} = getCurrentVAOInfo();
458457
ui.updateAttributes();
459458
globals.globalUI.attribValueState.updateAttribValue(args[0]);
459+
const prog = gl.getParameter(gl.CURRENT_PROGRAM);
460+
updateProgramAttributesAndUniforms(prog);
460461
});
461462
wrapFn('disableVertexAttribArray', function(origFn, ...args) {
462463
origFn.call(this, ...args);
463464
const {ui} = getCurrentVAOInfo();
464465
ui.updateAttributes();
465466
globals.globalUI.attribValueState.updateAttribValue(args[0]);
467+
const prog = gl.getParameter(gl.CURRENT_PROGRAM);
468+
updateProgramAttributesAndUniforms(prog);
466469
});
467470
wrapFn('vertexAttribPointer', function(origFn, ...args) {
468471
origFn.call(this, ...args);
469472
const {ui} = getCurrentVAOInfo();
470473
ui.updateAttributes();
471474
});
475+
wrapFn('vertexAttrib4fv', function(origFn, ...args) {
476+
origFn.call(this, ...args);
477+
globals.globalUI.attribValueState.updateAttribValue(args[0]);
478+
});
472479
wrapFn('activeTexture', function(origFn, unit) {
473480
origFn.call(this, unit);
474481
globals.globalUI.textureUnits.updateActiveTextureUnit();

0 commit comments

Comments
 (0)