Michael Leonard | 1st Episode of Early WebGL experiments ▪ Server assist mouse-lock. @InternetOneOS | Uploaded 12 years ago | Updated May 09 2024
This is an early experiment of my Kenx server solving the first person camera issue. The issue is that your mouse will normally hit the edge of your screen and fail to register any further directional movement in that direction. My server constantly listens to mouse movements, then sends the distances to the web page, then resets the mouse cursor to prevent it from reaching the edge of your screen. What do you guys think?

Here is my function to draw what you see. I wish I could completely show it in its actual form, but youtube will not allow tabs for some reason.

() ` [Draw scene]:
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 10000.0, pMatrix);
mat4.identity(mvMatrix);
mat4.rotate(mvMatrix, degToRad(-cam.Pitch), [1, 0, 0]);
mat4.rotate(mvMatrix, degToRad(-cam.Yaw), [0, 1, 0]);
mat4.translate(mvMatrix, [-cam['at X'], -cam['at Y'], -cam['at Z']]);
glBegin(gl.TRIANGLE_STRIP);
250, -5, -250, 1,0,0,1
-250, -5, -250, 0,0,0,1
250, -5, 250, 0,0,0,1
-250, -5, 250, 0,0,1,1
glEnd();
glBegin(gl.TRIANGLE_STRIP);
250, 5, -250, 1,0,0,1
-250, 5, -250, 1,0,1,1
250, 5, 250, 0,0,1,1
-250, 5, 250, 0,0,1,1
glEnd();
glBegin(gl.TRIANGLE_STRIP);
20, -4.99, -250, 0.5,0.5,0.2,1
-20, -4.99, -250, 0.9,0.1,0.2,1
20, -4.99, 250, 0.5,0.5,0.7,1
-20, -4.99, 250, 0.5,0.5,0.7,1
glEnd();
Loop a 4 times:
Loop b 4 times:
glBegin(gl.TRIANGLE_STRIP);
5, -5, -5, 1,1,1,1
0, -5, -5, 0,0.3,0,1
4, 5, -4, 0,0,0,1
1, 5, -4, 0,0,0,1
glEnd();
glBegin(gl.TRIANGLE_STRIP);
5, -5, 0, 0,0,0,1
0, -5, 0, 0,1,0,1
4, 5, -1, 0,0,0,1
1, 5, -1, 0,0,0,1
glEnd();
mat4.rotate(mvMatrix, degToRad( 90), [0, 1, 0]);
glBegin(gl.TRIANGLE_STRIP);
5, -5, 5, 0,0,0,1
0, -5, 5, 0,0,0,1
4, 5, 4, 0,0.2,0.7,1
1, 5, 4, 0,0.2,0.7,1
glEnd();
glBegin(gl.TRIANGLE_STRIP);
5, -5, 0, 0,0.2,0.3,1
0, -5, 0, 0,1,0,1
4, 5, 1, 0,0,0,1
1, 5, 1, 0,0,0,1
glEnd();
Move to the left 15.
Move to the left 35.

create['GL Canvas'](function()
{
gl.clearColor( 0.0, 0.0, 1.0, 1.0);
});

Recorded March 26th 2012