in your prev example you set gl_PointSize to 100.0, when i change the value to 1.0 the sample produces mostly zeros (less for the 3rd average)
why is that?

fragment shader

void main() {
  gl_Position = vec4(0, 0, 0, 1);
  gl_PointSize = 100.0;
}

vertext shader

const fs = `#version 300 es
precision highp float;
uniform sampler2D tex;
uniform int numArrays;
out vec4 outColor;
void main() {
  int level = 0;
  int start = int(gl_FragCoord.x);
  ivec2 size = textureSize(tex, level);
  vec4 color = vec4(0);
  for (int y = 0; y < size.y; ++y) {
    for (int x = start; x < size.x; x += numArrays) {
      color += texelFetch(tex, ivec2(x, y), level);
    }
  }
  outColor = color / float(size.x / numArrays * size.y);
}

JS snippet

  const prg = twgl.createProgramFromSources(gl, [vs, fs]);

  const numArraysLoc = gl.getUniformLocation(prg, "numArrays");

  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  // so we don't need mips
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  // so we can pass a non multiple of 4 bytes
  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

  const numArrays = 5;
  const values = new Uint8Array([
     1, 1, 1, 1, 1,
     2, 150, 231, 9, 71,
     3, 129, 290, 3, 90,
     4, 141, 300, 2, 80,
     5, 123, 212, 4, 75,
  ]);
  const width = values.length;
  const height = 1;
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, width, height, 0, gl.RED, gl.UNSIGNED_BYTE, values);
  
  gl.canvas.width = numArrays;
  gl.canvas.height = 1;
  gl.viewport(0, 0, numArrays, 1);

  gl.useProgram(prg);
  gl.uniform1i(numArraysLoc, numArrays);
  gl.drawArrays(gl.POINTS, 0, 1);
```

Hi!

I just read webgl-matrix-vs-math.html and just wanted to point you in the direction of some ideas that might help you think more clearly about the issue should you ever want to rework the section in a future update.

Coming from the scientific computing corner, I'm pretty familiar with this issue, which is often described as whether a matrix is stored in "column-major" or "row-major" order.

As you know, if you have a 2D matrix

1 2 3
4 5 6
7 8 9

and you want to store it in 1D memory, you have a number of choices, each with compromises.

• You can scan through the first column, then the second, and so on: [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] (“column-major”)
• You can scan through the first row, second row, etc.: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] (“row-major”)

The first is better for computing linear algebra. The second is nice because you can lay a 1D array out as a matrix in your source code and get the correct order (and it just fits well with C's memory model)

What you might not know is that column-major is the way matrices are stored in FORTRAN. It's also used by some other programming languages with a focus on numerical/scientific computing, like MATLAB and Julia. And, of course, it's the way GL expects you to lay out your matrices in memory.

The second way is what C and C++ do, and what's popular in languages from the C/C++ tradition, even when they don't natively support matrices (like Python and JavaScript). And it's way bitmaps are usually stored. So that's almost everybody.

Anyway, to my mind, it's not so much a programming vs. math problem, it's that the answer to "how do you lay out a 2D object in 1D memory" is arbitrary and C++/JavaScript and GL come from different traditions.

I don't know how to integrate this into the document, and I'm not even sure it would make it any clearer to newcomers. Just thought maybe a bit of a different take on the same issue might be interesting :-)

PS:
This section of the Julia docs might be interesting: https://docs.julialang.org/en/v1/manual/performance-tips/#man-performance-column-major (but it probably won't be)
Here is a section of the numpy docs that mentions array memory order: https://numpy.org/devdocs/reference/generated/numpy.ravel.html

https://github.com/gfxfundamentals/webgl2-fundamentals/blob/master/webgl/webgl-3d-textures.html#L153

Some of the arguments in this call to texImage2D are missing: the width, height and border.

Describe the bug

Uncaught (in promise) ReferenceError: kScript is not defined
    at editor.js:315:37
    at String.replace (<anonymous>)
    at parseHTML (editor.js:313:15)
    at async main (editor.js:403:3)

Screenshots

Desktop

• OS: MacOS Monterey
• Browser Chrome
• Version 99.0.4844.51 (Official Build) (x86_64)

Additional context
Pretty nice work by the way, thank you so much, i am learning a lot from this site. 👍🏻

Hi,

I was going through the [fundamentals[(https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html) when I came across this:

var positionAttributeLocation = gl.getAttribLocation(program, "a_position");

This gives me this error: Uncaught TypeError: gl.getAttribLocation is not a function.

You'll see it's not part of the WebGL2RenderingContext API Methods on MDN, but it is part of the WebGLRenderingContext API Methods.

I suspect is something that's just not updated from the old site. However, as I am new to WebGL, I'm also not sure how to get past this.

First of all, thank you for such an amazing resource.

Are you planning to finish this part? https://github.com/gfxfundamentals/webgl2-fundamentals/blob/master/webgl/lessons/webgl-shadows-continued.md
It's one of the most complex topics on the website and I'd like as much information about this as possible. Would be awesome if you have plans to release it since your tutorials are so easy to follow.
The first article on shadows mentions multiple techniques of rendering shadows, so would be nice to read about other options, ray tracing possibly as I've seen it done with WebGL.

In any case, thank you so much, I couldn't have done anything I've already achieved without your tutorials.

"npm run build" spits the following error on Ubuntu 20.04:

dependencies are out of date. Please run `npm install`
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ld-check-dependencies && grunt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The answers reported here
https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle
solve the problem, i.e. before "npm install" run this:

npm cache clean --force
rm -rf node_modules package-lock.json

I was trying to do the color demo (from the fundamentalswebgl2 using glFragcoord)

But cant get it to work, could you please take a look

https://github.com/jacobbogers/testings branch removeVSLogic

in master it works with the vectorshader in your example of gl_FragCoord it doesnt seem to work (readpixel returns all zeros)

the source is in /src/ex3/

to build
git checkout removeVSLogic
npm i
npm run build (webpack build in directory /dist)
http-server dist/ (go browser and look at console output you will see a typedarray with only zeros)

my first webgl program from scratch)

What am I doing wrong?

thanks very much in advance

In the 'Scaling Text without pixelation' section of 'Text - Using a Texture', the 'use very special shaders that render curves' link broke.
As far as I have seen, Microsoft is no longer hosting the file. I downloaded it before the link broke and have attached it here.
The same link is broken in the same place on webgl-fundamentals.
CurveShaders.pdf

Thanks Gregg for putting together WebGL2Fundamentals. It's a great overview.

Unfortunately there's one small but significant bug. In WebGL 1.0 it was optional whether indexing of sampler arrays with variables was supported. Shaders using this feature might compile, or might not, depending on the capabilities of the underlying hardware.

The GLSL ES 3.00 specification forbids indexing of sampler arrays with anything except a constant. See sections 12.29 "Samplers" and 12.30 "Dynamic indexing".

We're looking into adding a WebGL 2.0 extension adding this functionality back in a guaranteed manner.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Beginning of "2D Translation" page refers to code sample with drawScene() function that is supposedly based on a previous sample from "Fundamentals" page. Expected changes made to this changes are highlighted.

However, "Fundamentals" page does not have any drawScene() function that "2D Translation" page is referring to.

Either "Fundamentals" code has to be worked to have such function or adjust "2D Translation" accordingly.

I was reading the webgl 2 fundamentals normally and I thought the frontpage looked normal in my desktop machine... then I tried the frontpage on my laptop and realized that it looked better: the floating meshes (2s) had black spots in them that make look kind of bad in the desktop machine.

My desktop machine (where the frontpage looked bad) is:
cpu: Intel 930 i7
gpu: Amd RX460
ram: 8GB
Os: Windows 10 and ubuntu linux (yes both)
Browser: Chrome and Firefox (yes both, in both OSs)

My laptop
OS: Windows 10
Browser: Chrome and Firefox
cpu Intel core i3-4000M
gpu: integrated
ram: 2GB

Screenshot from my desktop machine:

I know it has to do with my hardware but i want to know how to fix it and this is the best place I can find to get a fix, and is weird that the problem persist in all systems (browsers and OSs).

Discussed in #183

    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);

Describe the bug
Here is the definition of m3.multiply in https://webgl2fundamentals.org/webgl/lessons/webgl-2d-matrices.html:

var m3 = {
  multiply: function(a, b) {
    var a00 = a[0 * 3 + 0];
    // ...
    var a12 = a[1 * 3 + 2];
    // ...
    var b22 = b[2 * 3 + 2];
 
    return [
      b00 * a00 + b01 * a10 + b02 * a20,
      b00 * a01 + b01 * a11 + b02 * a21,
      b00 * a02 + b01 * a12 + b02 * a22,
      b10 * a00 + b11 * a10 + b12 * a20,
      b10 * a01 + b11 * a11 + b12 * a21,
      b10 * a02 + b11 * a12 + b12 * a22,
      b20 * a00 + b21 * a10 + b22 * a20,
      b20 * a01 + b21 * a11 + b22 * a21,
      b20 * a02 + b21 * a12 + b22 * a22,
    ];
  }
}

From the code and variable names:

• The matrices are defined as being row-major, as you'd expect in JS.
• The result returned is actually BA (A premultiplied by B) rather than AB (A postmultiplied by B) as you would naively expect. Maybe this is what you intended, but it isn't documented anywhere in the code or called out in the prose.

Example:

let a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let b = [11, 12, 13, 14, 15, 16, 17, 18, 19];
console.log(m3.multiply(a, b));

// returns:
// [150,186,222,
//  186,231,276,
//  222,276,330]

vs.

>>> import numpy as np
>>> a = np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]])
>>> b = np.array([[11, 12, 13], [14, 15, 16], [17, 18, 19]])
>>> np.matmul(a, b)
array([[ 90,  96, 102],
       [216, 231, 246],
       [342, 366, 390]])
>>> np.matmul(b, a)
array([[150, 186, 222],
       [186, 231, 276],
       [222, 276, 330]])

The tricky thing is that the examples all work as written, because everything else in the code is written to handle this correctly. For instance, given this snippet from that webpage:

var matrix = m3.multiply(translationMatrix, rotationMatrix);
matrix = m3.multiply(matrix, scaleMatrix);

Let's simplify that snippet for notation purposes:

var M = m3.multiply(T, R);
M = m3.multiply(M, S);

From reading this naively, you would expect M = TRS. But given the way m3.multiply is implemented, you actually have M = SRT, which is actually the desired result, so the code works.

I say that M = SRT is the desired result because once you feed M into the fragment shader, WebGL transposes the matrix (since it treats the matrix as column major). So the frag shader is actually doing this:

position = M_transpose * a_position;

and if M = SRT, then M_transpose = T_transpose * R_transpose * S_transpose, so:

position = T_transpose * R_transpose * S_transpose * a_position;

which is actually correct: first the point is scaled, then it's rotated, and then it's translated; translation should be the last step since generally you want the rotate the model point around the model origin rather than the world origin.

I think this is part of what is contributing to the confusion in #33 and #84.

https://github.com/greggman/webgl2-fundamentals/blob/0338a8ede7b7d55cc43753eca208720c38b1c9e4/webgl/webgl-3d-lighting-point-specular.html#L143

add here
var positionBuffer = gl.createBuffer();

Describe the bug
Tinypic links in this article are broken.
https://github.com/gfxfundamentals/webgl2-fundamentals/blob/master/webgl/lessons/webgl-qna-how-to-make-webgl-canvas-transparent.md

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

in page http://webgl2fundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html the the WebGL Reference Card which point to https://www.khronos.org/files/webgl/webgl-reference-card-2_0.pdf is broken.

Probably is this one, if yes I can do a PR to fix it: https://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf

In the final example on the fundamentals page is the webgl2-2d-rectangles.html example.

I believe that bindVertexArray is erroneously called twice. Here on line 89 and on line 119. I believe the line 89 call is the correct call since we used vertexAttribPointer on 103 and not again.

If this is not an error, additional explanation would be greatly appreciated. I've read over the fundamentals page a number of times as well as read this stack overflow you posted and frankly if line 119 isn't a mistake then I am totally lost.

p.s. thank you very much for spending the time to create these

Thanks

Here: https://github.com/greggman/webgl2-fundamentals/search?q=attibute&type=Code

Thanks for putting together this incredible resource,
Asier

Regarding https://github.com/greggman/webgl2-fundamentals/blob/master/webgl/lessons/webgl2-whats-new.md#samplers .

That's the case: https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/GraphicsBitmapFill.html

I thought that across the project with thousand swf files made by 10-20 artists in 7 years there wont be a case when they used different params on the same texture nearby and that i can choose one of them. I was wrong.

That's not the only interesting case there, I wrote them down and I'll make an article about it when I finish it.

Hello, i'm a student of Computer Science at Rio Grande do Norte State University in Brazil.

I've been working on a translation to Brazilian Portuguese with a friend. We'd like to contribute to your repo translating the whole articles. I've made a fork and if you check my github you'll see that we've already started translating.

Thanks in advance.

Describe the bug
The sample fragment shader code at the top doesn't match the fragment shader code used in the running example.

These are fantastic tutorials by the way, thank you so much!

To Reproduce
Steps to reproduce the behavior:

1. Go to https://webgl2fundamentals.org/webgl/lessons/webgl-less-code-more-fun.html
2. look at the first fragment shader code and note that

void main() {
   vec4 diffuseColor = texture2D(u_diffuse, v_texCoord);

is not the same as the fragment shader in the first running example:

  vec4 diffuseColor = texture(u_diffuse, v_texCoord);

if you use the code shown first for the shader, it won't compile due to a type mismatch.

previously you mentioned gl_FragCoord tracks the current to draw pixel coordinate (driven by the output canvas).
what if the destination is not the canvas but a framebuffer (like in your picture filtering example).
will the gl_FragCoord contain the pixels of the output frame buffer?

Cheers

The WebGL State Visualizer tool is mind-blowing. I've used your site a lot over the years, and I thought I had a good grasp of WebGL - but the visualizer tool made everything so clear! It's really a brilliant idea, and fantastic execution.

Now as I'm writing webgl, I am thinking in terms of the tool... I'm annoyed I can't see the nice vertex array table, and links to buffers etc. Is there anyway this could be developed into a more generic standalone tool for any webgl code? Maybe a browser extension plugin or something?

Anyway, feel free to close this "issue" (I just noticed there is already this request anyway) - it's more just a note to say thank you for the great tool!

This is not a bug report, sorry.

This issue maybe related to #33

First of all, thank you for WebGL foundation, 1 and 2, awesome!

I have read many times the article 2D matrices as well as matrix vs math and I think I finally figure out why there is this baffling issue around matrices.

In the 2D matrices article, you show in detail the way matrices store their component (conversion from 1D array to matrix interpretation) and you also show the matrix multiplication to use to make it works.

As I'm a math person, as you warned in matrix vs math article, the matrices handling seems confusing to me. In fact I'd rather say, it seems like everything gets transposed. And the way the multiplication between matrices is defined make it works if the 2 input matrices are transposed and store the result in the transpose way, it's coherent. (I made the computation of the projection matrix from 2D matrices article by hand to convince myself (and check the results by printing some value from m3.multiplication function).)

Then I check the way the computed matrix is provided to a shader:

gl.uniformMatrix3fv(matrixLocation, false, matrix);

The second argument of this function is the transpose option. From the MDN web docs:

transpose
A GLboolean specifying whether to transpose the matrix. Must be false.

I don't understand why the documentation tells that the option must be false!?!

Eventually if it is possible to send the computed matrix in a transpose way to the GPU (maybe manually if the WebGL function doesn't do it for us), every computation on the CPU side can be done as usual, in the math way (and avoid me some headache).

It should really reconcile the math people with matrices manipulation in the excellent WebGL foundation.

PS: I know it's certainly impossible to change the way all the articles are written and the implementation associated with them to. But I think that you can still mention this trick somewhere 😉

I want build this web project to my own mac, so I can read some source code and try to edit it.
But I always failed when I use npm install to download those necessary module.
The point that causes failures seems to be install module from github...(I try to use proxy, but it doesn't work)

Is there any way that I could build it successfully?

Hello everyone.
I found your website while searching for learning material for WebGL (it was linked in Quora)
I would like to know if there is a good printed book about WebGL (I know there are many, but I'm asking for advice).
I have a decent programming background and I don't mind using "standard" OpenGL or GLES API for compilers, I just want to dig in WebGL, and in this field I'm really a beginner.
Overall, the suggested book should use a minimum math because it's one of my main weakness.

Thanks in advance for any help.

Bye, Ivano.

Is your feature request related to a problem? Please describe.
This guide is great, but there seems to be some discontinuity between a lot of the sections in the WebGL2 portion. Going from Fundamentals to How It Works seems like the correct path, but then How It Works references "previous" examples from 2D Matrices. 2D Matrices assumes you just did 2D Scales, etc.

Describe the solution you'd like
Table of contents should be reorganized to the proper order, or at least provide a step order for reading the guide.

Describe alternatives you've considered
No alternatives really. Just seems like the sections don't correlate with what they assumed was the previous sections.

Additional context

On https://webgl2fundamentals.org/webgl/lessons/webgl-less-code-more-fun.html, one of the example gl.vertexAttributePointer() calls, the one for a_texcoordLoc, is missing the boolean "normalized" param:

// Setup all the buffers and attributes (assuming you made the buffers already)
...
gl.vertexAttribPointer(a_positionLoc, positionNumComponents, gl.FLOAT, false, 0, 0);
...
gl.vertexAttribPointer(a_normalLoc, normalNumComponents, gl.FLOAT, false, 0, 0);
...
gl.vertexAttribPointer(a_texcoordLoc, texcoordNumComponents, gl.FLOAT, 0, 0);

This is a really great resource, and I'm currently going through it.

It might be helpful to others if there is a glossary added to the references. I wasn't sure what "lod" or "mip" were and had to look these up elsewhere.

Happy to help with this effort if it's a useful feature (even if just to help compile a list of terms).

On the page https://github.com/greggman/webgl2-fundamentals/blob/master/webgl/lessons/webgl-2d-matrices.md the rotation matrix generator is incorrectly defined as:

  rotation: function(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);
    return [
      c,-s, 0,
      s, c, 0,
      0, 0, 1,
    ];
  },

This results in rotation in the reverse direction. Matrix components in GLSL are defined in column-major order, so the correct definition should be:

  rotation: function(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);
    return [
      c, s, 0,
      -s, c, 0,
      0, 0, 1,
    ];
  },

I try to use state-diagram mode to visual something,but I build failed at npm install.
My node is v8.12.0

Minor issue on the WebGL2 Picking page. In the Clicking on an Object section it says:

"So, let's start with the last example from the article on drawing multiple things that draws 200 things."

The examples in the linked page only show how to draw 3 things (not 200). It would be good to update this, because it's using the "200 things" as the base code for picking - but I'm not sure if the code really is the same (if it is the same, then just change "200" to "3"!).

Not an issue just a question
Will you do a webgpu-fundamentals ?
Mozilla have started to implent it a few month ago : https://hacks.mozilla.org/2020/04/experimental-webgpu-in-firefox/

First of all thanks for the great content. I't always bothers me how expensive the homepage is. It puts lots of pressure on the GPU and I feel really distracted and uncomfortable when I'm on the homepage. So I always try to pick a topic and leave the homepage.

I'd like to see a simple home page without lots of animation going on in the homepage. May be we can just put a simple section in the top with some action going on or completely remove that to make it look more like a documentation (like the other pages).

Again, thanks a lot for the hard work.

Hello, How are you?

createBufferAndSetupAttribute(positionLoc, [
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1,
]);

For those position, I hope you explain the position usage.

Thank you.

Hey, on this page the webGL demo is not working.

webgl-utils.js:227 Uncaught TypeError: Cannot read property 'VERTEX_SHADER' of null

Describe the bug
It seems some codes are wrong in the first example of 3D Perspective Section.

To Reproduce
Steps to reproduce the behavior:

1. Go to the first example in 3D Perspective Section
2. Change the x, y position to get the object in the center of canvas
3. Add the X angle to around 263

Expected behavior
Then in the result figure, the model seems to be worn, just like below

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Macos
• Browser chrome

Additional context
Also, the code in that example also gets wrong. In this code "float zToDivideBy = 1.0 + position.z * u_fudgeFactor;" it should be "float zToDivideBy = (1.0 + position.z) * u_fudgeFactor;".

I noticed that the example "transform feedback"
of the webgl-state-diagram stops on the line
gl.beginTransformFeedback(gl.POINTS);

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

I've already come across two examples where I can completely comment out the lines with vao and not change the running of the program at all.

https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html
https://webgl2fundamentals.org/webgl/lessons/webgl-2d-translation.html

I'm just beginning with webgl, so I'm not sure whats going on, either VAOs aren't being used correctly, the newest browsers are filling in some missing parts, or the tutorial examples are written in a way that is completely uninstructive as to the use of vaos.

in your documentation https://webgl2fundamentals.org/webgl/lessons/webgl-image-processing.html
states

WebGL2 adds the ability to read a texture using pixel coordinates as well. Which way is best is up to you. I feel like it's more common to use texture coordinates than pixel coordinates

what specific webgl2 added feature are you talking about?