TypeScript WebGL Game Engine Tutorial #03 - Shaders

In this video, we create a shader class to encapsulate WebGL shaders. This is video 3 of the TypeScripe Engine tutorial series.

TypeScript WebGL Game Engine Tutorial #03 - Shaders

This video is part of a series where I step through the process of making a simple game from the ground up using TypeScript and WebGL.

⏯ Series Playlist:

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

✔ WAYS TO SAY THANKS & SUPPORT THE CHANNEL:
🔔 Subscribe & Click the Bell: Learn more about making games the old school way using new school tech.

🌕 Channel Membership: Show your support with a special loyalty badge and a Discord role!

💱 Support me on Patreon: Show your support with a special Discord role!

📣 Share this Video on Social Media: This option costs nothing, but helps a lot!

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

⚡ LET's CONNECT ⚡

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

#Typescript #GameDev #BrowserGameDev

[ahsanullah]

I just wanted to say that more sub and views will come with time so don't get demotivated and stop this amazing work you are doing and Thank you very much for sharing your precious knowledge with us. Thanks a lot!

[knightsprite]

I forgot about this! Part 4 reminded me! Nearly finished all my works, so hoping to go back and follow along in a month or so :)

[wcdeich]

Also, my PinePhone BETA does not have WebGL drivers, but I recently found out Chromium has software drivers for WebGL build in, so even on the rare hardware that does not support WebGL, Chromium can still display WebGL graphics.

[kalugvasy]

Thanks again. I would add in start() after gl.clearColor( 0, 0, 0, 1 ); this.resize(); It just make all screen black at start (in you code need resize browser before all screen will be black)

[wcdeich]

I wish there was a default shader. 1 reason I have avoided WebGL in the past is b/c in pure JavaScript, having the shader in a string, it would break with the slightest change to anything. Maybe this tutorial can teach me how to do things in a more robust way.

[nicklansbury]

Nice series so far. And being uploaded without big delays between episodes.Do you know how many episodes the series will consist of?

[jtaimneas]

in the shader.ts file under the loadShader method i changed the error checking to

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
let error: string = gl.getShaderInfoLog(shader);
throw new Error("Error compiling shader '" + this._name + "': " + error);
}

and the createProgram method error checking to
if (!gl.getProgramParameter(this._program, gl.LINK_STATUS)) {
let error: string =
throw new Error("Error linking shader '" + this._name + "': " + error);
}

now everything seems to work across both Edge and Chrome.

[jtaimneas]

at the 28 minute mark you use 2 characters that look like the hyphens but could not make out what you called them? BTW nice videos thanks for taking the time to put this together.

[ThePirateHistory]

that if in the first series where we tested the id of canvas transfer, undefined did not work, and null works, this can be added in all cases, otherwise I just add it, since I can’t understand it will not be a minus, although it is clear that there is no undefined, but null is that the object does not exist, too, that is, in this case, you even need it? and I still can't import the scripts as documentation through import {engine} from "./core/engine"; only / * <reference path = "./ core / engine.ts" /> * / is imported, yes it is in the form of a comment, but I using gulp, and it deletes all the comments on this so set it, aka protection)))

[dragonhunterutub]

why listening to a resize event when we have a game loop.
canvas.width = canvas.clientWidth inside the loop, that will also make it resize to its parent dom node if it the canvas is nested.

[jtaimneas]

I still get a white screen not black as you are presenting. debug console is showing link error but error message is empty. I changed as you shown from undefined to empty conditional check and still getting same error. did refresh several times and rebuilt project and still same. any thoughts?