WebGL-Lessons | A simple introduction to WebGL | Graphics library

I moved my webgl helper to

Adding it I get this error

If I understand your question, the problem you see is it looks like the camera is getting closer to and further from the Fs

The issue is the vertex data for the Fs are built so the top left front corner is at 0,0,0, from that they go +X 100 units (so 100 units wide), +Y 150 units (so 100 units tall), and +Z 30 units so 30 units deep

So then, when you draw them around a 100 unit circle their origin is the part you are positioning and you get this

The image is top down so the Fs are just a rectangle. The green circle is the local origin of each F, its local 0,0,0. The other vertices of the F are relative to that local origin so they are closer to the outer circle (the orbit of the camera) on one side and further on the other

You can fix it by moving the Fs -50 in X and -15 in Z. In other words

1. With the JavaScript console open in the browser, if I run your snippet I get this warning

   That is a warning, not an error, that the code is trying to draw zero vertices. Checking the call to gl.drawArrays I found that offset and count were backward

   it was

There's a couple of things that needed to be done in my opinion to achieve this based on the example you provided. First, the main() function on lines 98 and 99 is setting up the sliders like so:

webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width }); webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});

If we check the library you provided (around line 99) we can see that the function setupSlider returns an object with both the html reference and a function to update its value:

In your HTML, you should use the bundle instead of the source JavaScript. According to your webpack config, the bundled file will be in "build/main.bundle.js" but your HTML loads "main.js", which is your unbundled JavaScript.

For Safari you need to setup a color attachment even if though the sample doesn't use it

first create an RGBA/UNSIGNED_BYTE color attachment the same size as the depth texture

The error message

Cannot read property 'projection' of undefined at createVertices.

means that projection is undefined when you try to use it. This is because m4.projectionis defined later int he script.

To solve this problem, you should do the declarations at the begin of the script and the function calls at the end.
Move the following code at the very and of the script: