[02] WebGL Tutorial - Movement and Color

Drawing a single triangle is all well and good, but what good is real-time rendering without movement and color?

In this video:
* Using shader uniforms to place multiple shapes
* Passing colors from the vertex shader to the fragment shader to make gradients
* Connecting TypeScript application logic to WebGL rendering commands for a simple shape simulation
* Generating geometry using M A T H

----------------------

[TerryDavisMedia]

You are doing very important work, thank you!

[RafaelSales]

WOW the refactoring in 18:00 made the code even better to read. Now imagine to do that with class!! I will try it.
Also I can't believe my code does not got any error, thank you for the video

[Gromash]

amazing, no idea why i chose webgl for my little assignment when i could have probably just done it very easily in canvas and i have no time but at least i'm learning something new :D

[rayrhehs]

keep it coming brother, i need that part 3!!!

[alexaustin]

Love to see this! It was your "older" tutorials that helped me get the basis of understanding for my graphics class, and that eventually turned into a huge passion of mine! Thanks for your work

[joseduarte]

Great series, I wish I had this back when I did the college course on computer graphics.

There's something I'd suggest for other viewers, it's more complicated but saves a bunch of memory, especially as you add more shapes:

- Don't use Array.filter, nor Array.slice, as they allocate new arrays!

If you first sort the array, placing the dead elements in the end, you can then find the first dead element and just Array.splice at that index.
Furthermore, if you sort alive shapes according to their remaining lifetime, further sorts will be faster as all shapes' lifetimes decrease at the same rate.

- Don't spawn more than the max number of shapes!

Write while (timeToNextSpawn < 0 && shapes.length < MAX_SHAPE_COUNT) {...} and save a bunch of memory!

I compared this approach against the one in the video and it consumed ~5x less memory!

[michael_hackson_handle]

I'll join the cheer on horde!
Keep it coming!!

Came to revisit the old tutorials on WebGL and was happy to find this new series.

[OmniOmnium]

This is some insanely good learning materials, thanks!

[hoangdesu]

Purely hidden gem. Thanks for great videos and looking forward to the rest

[mimja]

I love this series so far. Keep it up!

[denisbalyko]

Thanks for your video!

I’ll add a small improvement, the requestAnimationFrame function already returns the time in milliseconds from the start of work in the callback every time, you don’t have to remember “lastFrameTime” your dt is already an argument in frame:

const frame = function (dtMs: number) {
const dt = dtMs / 1000;
...
}

try using this! :)

[dnsjtoh]

You could probably explain what a vao is better ngl. It took like 10 other websites for me to understand it. Great tutorial tho, thanks

[RafaelSales]

before moving to 3d, may I ask how you would add .png images instead of vertex shapes?

[sudharsanamtk]

Is that possible to implement Flood fill in webgl?