sketchpunk / funwithwebgl2

Fun with WebGL 2.0 Youtube Tutorial Series

Fun with WebGL 2.0 - Youtube Tutorial Series

Youtube Playlist : https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF

Purpose: This is the code repository for all the lessons of my youtube series. This hopefully make it easier for users to learn by downloading the specific lesson source to play around with to get a better understanding of how it works.

SketchpunkLab Links

• SketchPunk Labs Blog
• Support SketchPunk Labs @ Patreon

References

• WebGL on Reddit
• WebGL Reference Card
• The Book of Shaders
• WebGL 2 New Features

Good Related videos

• PLOTCON 2016: Mikola Lysenko, Future of 3D scientific charts using WebGL

funwithwebgl2's Issues

WebGL2 : 074 : Voxel Ray Intersection, (almost) completed in Delphi

Hello,

I took your code from javascript, your github and your great youtube video web gl2 lessons and I was impressed and convinced that you had the most important parts of the algorithm down, much much much better than understand.

So I gave your code a conversion last, because I also wanted to try other people's code and also my own. But eventually I decided to turn your code into javascript code and then I noticed your algorithm wasn't yet fully complete. Or maybe it is, I just realized, you may want to trace the entire ray for multiple collections, that is valid ofcourse... and then you could extend the algorithm a bit further with ray ids and check for objects in multiple voxels and blabla, but if you just want to render voxels like you seem to do, then it would be nice if the ray just terminate within it's segment length basically the ray length and it would also be nice if it stayed within some virtual boundary.

So anyway I extended and fixed your code, kinda intertwined my own code to more or less complete it.

The only thing I ripped out of for now is the ray/bounding box intersection thing because I am not that very yet in the lessons and don't know yet how to do it perfectly and I want to investigate that later.

But anyway what I am trying to write to you is that here is the Delphi code and maybe then you can convert it back to JavaScript code:

The only things you need to add to your own code or change it is
mCellWidth, mCellHeight, mCellDepth

and add some mBoundaryMinX, mBoundaryMaxX, mBoundaryMinY, mBoundaryMaxY,mBoundaryMinZ, mBoundaryMaxZ variables

there is one thing I am unsure about and that is

these lines of code:
if (rayDirX > 0) then xOut := mBoundaryMaxX else xOut := mBoundaryMinX-1;
I think it should have been
if (rayDirX > 0) then xOut := mBoundaryMax+1 else xOut := mBoundaryMinX-1;
but apperently then it goes out of the grid, don't know exactly why yet... maybe cause then it's one wall too far...

I want to port this code later to C/C++ so I didn't bother with any structures or files or anything because that makes it harder to use in other project... the way it is written right now makes it easier to translate to other languages and use it there.

I intend to use this for OpenXCom project, maybe, most likely if I can also get that bounding box working and I will surely test this code somewhere, I already tested it pretty intensively on a grid, but more testing is always good.

Maybe this code will help or inspire you to finish yours, cause yours did not have a "fully fledged loop" it would just do 30 miserable tries =D and that is nononononno cheating, most have good end loop, very important for me at least and anybody else that wants some good peformance and doesn't want to go outside of important data structures for collision detection and such.

Thank you for your work, together we did something amazing as far as I am concerned and it's still not entirely finished but pretty damn good, only the start can go out of the grind, the end is already inside the grid thanks to this algorithm but ofcourse it's also possible for the line to be completely outside the grid, so that will be the next step to integrate "line"/"ray" vs box intersection testing and what not ! ;)

procedure TForm1.VoxalRayCast
(
rayStartX,
rayStartY,
rayStartZ,

rayStopX,
rayStopY,
rayStopZ : double

);
var
rayDeltaX,rayDeltaY,rayDeltaZ : double;
rayLength : double;
rayDirX, rayDirY, rayDirZ : double;
xDir, yDir, zDir : integer;
ix,iy,iz : integer;
xOut,yOut,zOut : integer;
xBound,yBound,zBound : integer;
xt,yt,zt : double;
xDelta, yDelta, zDelta : double;
ii : integer;
begin
if (RayStartX = RayStopX) and
(RayStartY = RayStopY) and
(RayStartZ = RayStopZ) then
begin
ProcessVoxel
(
Math.floor(rayStartX / mCellWidth),
Math.floor(rayStartY / mCellHeight),
Math.floor(rayStartZ / mCellDepth),

		0,0,0, 0
	);
	exit;
end;


//------------- Calc Voxel Coord Integer(x,y,z)
ix := Math.min( Math.floor(rayStartX / mCellWidth) , MaxCellX );
iy := Math.min( Math.floor(rayStartY / mCellHeight), MaxCellY );
iz := Math.min( Math.floor(rayStartZ / mCellDepth) , MaxCellZ );

rayDeltaX := rayStopX - rayStartX;
rayDeltaY := rayStopY - rayStartY;
rayDeltaZ := rayStopZ - rayStartZ;

rayLength := sqrt( (rayDeltaX*rayDeltaX) + (rayDeltaY*rayDeltaY) + (rayDeltaZ * rayDeltaZ) );

rayDirX := rayDeltaX / rayLength;
rayDirY := rayDeltaY / rayLength;
rayDirZ := rayDeltaZ / rayLength;

//------------- Simplify direction with -1,0,1
if rayDirX > 0 then
begin
	xDir := 1;
end else
if rayDirX = 0 then
begin
	xDir := 0
end else
begin
	xDir := -1;
end;

if rayDirY > 0 then
begin
	yDir := 1;
end else
if rayDirY = 0 then
begin
	yDir := 0
end else
begin
	yDir := -1;
end;

if rayDirZ > 0 then
begin
	zDir := 1;
end else
if rayDirX = 0 then
begin
	zDir := 0
end else
begin
	zDir := -1;
end;

//------------- Index value to exit loop -1,MaxCell
if (rayDirX > 0) then xOut := mCellWidth else xOut := -1;
if (rayDirY > 0) then yOut := mCellHeight else yOut := -1;
if (rayDirZ > 0) then zOut := mCellDepth else zOut := -1;

if (rayDirX > 0) then xOut := mBoundaryMaxX else xOut := mBoundaryMinX-1;
if (rayDirY > 0) then yOut := mBoundaryMaxY else yOut := mBoundaryMinY-1;
if (rayDirZ > 0) then zOut := mBoundaryMaxZ else zOut := mBoundaryMinZ-1;

//------------- Position of the closest boundary line for each axis at the ray direction. Depends on direction.
if (rayDirX >= 0) then xBound := ix+1 else xBound := ix; xBound := xBound * mCellWidth;
if (rayDirY >= 0) then yBound := iy+1 else yBound := iy; yBound := yBound * mCellHeight;
if (rayDirZ >= 0) then zBound := iz+1 else zBound := iz; zBound := zBound * mCellDepth;

//------------- Time for axis //(xBound - inPos.x) / ray.dir.x,
if rayDirX <> 0 then xt := (xBound - rayStartX) / rayDirX else xt := 100000000;
if rayDirY <> 0 then yt := (yBound - rayStartY) / rayDirY else yt := 100000000;
if rayDirZ <> 0 then zt := (zBound - rayStartZ) / rayDirZ else zt := 100000000;

//------------- Delta T for each axis as we traverse one voxel at a time
if rayDirX <> 0 then xDelta := (mCellWidth  * xDir) / rayDirX else xDelta := 100000000;
if rayDirY <> 0 then yDelta := (mCellHeight * yDir) / rayDirY else yDelta := 100000000;
if rayDirZ <> 0 then zDelta := (mCellDepth  * zDir) / rayDirZ else zDelta := 100000000;

// ii; //Voxel Index of a specific axis

mCellNumber := 0;
while true do
begin
	ProcessVoxel( ix, iy, iz, 0,0,0, 0 );

	if(xt < yt) and (xt < zt) then
	begin
		ii := ix + xDir;
		if(ii = xOut) then break;	// When out of bounds of the voxel chunk.
		ix := ii;			// Move to next voxel
		xt := xt + xDelta;		// Move T so the next loop has a chance to move in a different axis
	end else
	if (yt < zt) then begin
		ii := iy + yDir;
		if(ii = yOut) then break;
		iy := ii;
		yt := yt + yDelta;
	end else
	begin
		ii := iz + zDir;
		if(ii = zOut) then break;
		iz := ii;
		zt := zt + zDelta;
	end;

	if (xt > RayLength) and (yt > RayLength) and (zt > RayLength) then
	begin
		ProcessVoxel( ix, iy, iz, 0,0,0, 0 );
		break;
	end;

	mCellNumber := mCellNumber + 1;
end;
//Sample on how to get the intersection point where the voxel was hit.

// var boundPos = (( dir[nAxis] > 0)? iAxis+1 : iAxis) * cellSize, // Position of boundary
// tt = ( boundPos - ray.origin[nAxis] ) / ray.vecLen[nAxis], // Time when at axis boundary
// ip = ray.getPos(tt); // Intersection point on voxel face
// console.log(ip);
end;

Bye for now,
Skybuck Flying

and may you enjoy this code and be the raytracer power with you ! Alwayzzzzzzzz yessszzz bye bye. Haha zzz for all the timez timmmmeeezzz spent on trying to get this working well. Also numerical stability may be analyzed further ! Yes numerical stability tests will have to be performed still... Yeah I just did some basic tests and it looks pretty good, just some simple line on boundary tests. Your idea to use integers as voxels was pretty interesting maybe even brilliant and I recommend you do that anyway, and don't use any cell scaling unless you really want to, because otherwise you may risk floating point instability, then again it probably won't be so bad cause your code seems to acquire the cell boundaries/chunk boundaries quite nicely.

I solve it by making sure the line stays within (mBoundaryMaxX * mCellWidth)-1

So this -1 represents your idea of simply subtracting one little integer/voxel from this quantity to keep things stable and inside ! ;) =D

Lesson 84 - Hexsphere face retrieval

Greetings!

Can I get the face of this hexsphere using Ray or Raycast script?
I can't get it though.

Regards

crossOrigin problem

Hi I had a white screen for lesson 13
in the console I get
Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded.
at WebGL2RenderingContext.GLInstance.gl.fLoadTexture for line 147
this.texImage2D(this.TEXTURE_2D, 0, this.RGBA, this.RGBA, this.UNSIGNED_BYTE, img);
so I modify fLoadTexture to add

gl.fLoadTexture = function(name,img,doYFlip,crossOrigin,url){
		if (crossOrigin) {
			img.crossOrigin = '';
		  }
		  img.src = url;

but I get a black cube without texture
Is there any solution to handle this crossOrigin problem ?

Question

Not sure if this is the right place, but I have a question:

I am working on implementing gltf and I am trying have the robo-t-rex from your IK rig demo working. but there is no normal attribute on the mesh, is this something you have calculated? or am I missing something?

IK rig demo :: http://fungi.sketchpunk.com/demo/ik/ik_retarget.html
My current state :: https://a-g-e.dev/

The issue of you being amazing...

I was going to note that I had issues detaching the shader in Chrome 60. But you already noted it. Is this a sign of breaking changes and implementations from chromium or google or is it just automatically handled to some degree?

I more importantly also ask if there is relevant material on uploading/manipulating objects with the webGL context. I'm not sure how to model and implement photo editing to a middle visual 'layer', plenty to learn upto that but that is my goal.

buffer or buffer range at index 0 not large enough

Hi
I get this error on many files
GL ERROR :GL_INVALID_OPERATION : glDrawArrays: uniform buffers : buffer or buffer range at index 0 not large enough

lesson_033 fix for non-windows users

Here's the patch

From 3f43ae33ab0e000d2d6937ffefae27104110f69a Mon Sep 17 00:00:00 2001
From: Philip Ashmore <[email protected]>
Date: Wed, 13 Jan 2021 12:45:53 +0000
Subject: [PATCH] Fixed lesson_033 for non Windows users

---
 lesson_033/fungi.core.js | 6 ++----
 lesson_033/test.html     | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/lesson_033/fungi.core.js b/lesson_033/fungi.core.js
index cc38c8c..0996c54 100644
--- a/lesson_033/fungi.core.js
+++ b/lesson_033/fungi.core.js
@@ -1775,10 +1775,8 @@ var Fungi = (function(){
 			}
 
 			//Check if the final offset is divisiable by 16, if not add remaining chunk space to last element.
-			//if(offset % 16 != 0){
-				//ary[ary.length-1].chunkLen += 16 - offset % 16;
-				//offset += 16 - offset % 16;
-			//}
+			let padding = offset % 16;
+			if( padding != 0) offset += 16 - padding;
 
 			//console.log("UBO Buffer Size ",offset);
 			return offset;
diff --git a/lesson_033/test.html b/lesson_033/test.html
index 6479b8a..5ac3fdf 100644
--- a/lesson_033/test.html
+++ b/lesson_033/test.html
@@ -12,7 +12,7 @@
 		<script src="fungi.core.js"></script>
 		<script src="fungi.primatives.js"></script>
 		<script src="fungi.KBMCtrl.js"></script>
-		<script src="fungi.Debug.js"></script>
+		<script src="fungi.debug.js"></script>
 		<script src="fungi.ext.js"></script>
 		<script src="fungiApp.js"></script>
 
-- 
2.29.2

Does the Barycentric Coordinates work with Unity WebGL build?

Hi, currently I am onmy way to build a 3dviewer for web, where users can upload their 3d models and view it on the viewer. For this I am using Unity WebGL build that can view and perform transformation on the model. However as builtin unity wireframes shaders work with Shader target 4.0 which is not supported in OpenGL ES (used for web and mobile platforms).
I am having real troubles in building a wireframe shader inside unity that may work in WebGL.
Could you provide some ideas how I can solve it?

Uncaught TypeError: Cannot read property 'fUpdate' of undefined

Hi I get Uncaught TypeError: Cannot read property 'fUpdate' of undefined for lesson 018

Fun with WebGL 2.0 - 027 - Bezier Curves in 3D Can not run

027-Can not run
console info:
glDrawArrays: uniform buffers : buffer or buffer range at index 0 not large enough

Regarding lesson 123 on generating t-pose

First, I would like to thank you for sharing your immense knowledge in the area of skeleton retargeting. I am trying to do it it Three.js for my own mixamo model that i just downloaded. The model is in A-pose with the left limb X local axes flipped to back as shown below.

When I try to apply your align_dir function, it gives the following result where the arms are slighly higher. The same goes for the legs and my avatar looks more in a ballet dancer pose :P.

Please share if you know how to fix this issue?

Viewer.html script tag

Hi,
Thanks so much for sharing these tutorials.

Please review the viewer.html files. In the script tag, shaders.js was referenced and the file name is Shaders.js (which was capitalized).

A reference error occurs because of this filename (since it is case-sensitive):

ReferenceError: ShaderUtil is not defined

Aspect Ratio canvas dimensions with ECMAScript

Finally got my current canvas running from a flex box with relatively sized parents.

          var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
                w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		window.addEventListener("load",function(){
			//............................................				
			//Get our extended GL Context Object
			
			gl = GLInstance("gl_context_canvas")
                        // The way to get 16:9 aspect can be achieved by multiplying the height by 1.777..
                        // and I account for the odds that its 'profile', gotta fit my sidenav.
				.fSetSize(h < w ? h * 1.777 -32 : w - 232, h - 32)
				.fClear();

Have you found any other methods of accessing and setting the height from a relative value? All other routes I took return null. Chrome 60 scared to try moz, reminds me to add the -prefix-'s, canvas is a flex box child aswell. lol Expected so many more problems than this so far. If its just returning an unexpected type I'd be happy to break it down... luckily docs start making sense and magicly ending up on the right page once I mention trouble finding things.

License ?

Thank-you for making this tutorial series, it really is interesting. I am sure very many people will benefit from them.

I would like to ask under what license is the source code for these tutorials released under ?

Thank-you again