Skip to content

Commit b0e373b

Browse files
author
Turtle1331
committed
Add basic fullscreen and pointer lock, set charset
1 parent 6604fbd commit b0e373b

File tree

2 files changed

+91
-3
lines changed

2 files changed

+91
-3
lines changed

‎intro.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<html>
22
<head>
3-
<script src="intro.js"></script>
3+
<meta charset="UTF-8">
44
<script src="fsh.js"></script>
5+
<script src="intro.js"></script>
56
<style>
67
#canvas {
78
position:fixed;

‎intro.js

+89-2
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
1+
// Name uniforms here, appear as fields in uniforms object from initUniforms()
12
const myUniforms = [
23
"resolution",
34
"time",
5+
"mouse",
46
];
57

8+
9+
10+
// Sets uniforms at start of program
611
function setupUniforms(gl, uniforms, vars) {
712
const canvas = document.getElementById("canvas");
813
gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
914
gl.uniform1f(uniforms.time, vars.time);
15+
gl.uniform2f(uniforms.mouse, 0, 0);
1016
}
1117

18+
// Sets uniforms before rendering each frame
1219
function updateUniforms(gl, uniforms, vars) {
1320
gl.uniform1f(uniforms.time, vars.time);
1421
}
1522

23+
24+
1625
////////////////////////////////////////////////////////////////////////////////
1726

27+
28+
29+
// Call when page loads
1830
function main() {
1931
const canvas = document.getElementById("canvas");
2032

@@ -25,34 +37,97 @@ function main() {
2537
return;
2638
}
2739

40+
// Initialize shader program and position buffer
2841
const shaderProgram = initShaderProgram(gl);
2942
const posBuffer = initBuffer(gl);
3043

44+
// Setup shader program with uniforms and vertices
3145
const uniforms = initUniforms(gl, shaderProgram, myUniforms);
3246
const program = {
3347
program: shaderProgram,
3448
vertices: gl.getAttribLocation(shaderProgram, "vPosition"),
3549
posBuffer: posBuffer
36-
};
37-
50+
};
3851
prepareScene(gl, program, uniforms);
3952

53+
54+
// Setup uniform vlaues
4055
const vars = {"time": 0, "dt": 0};
4156
setupUniforms(gl, uniforms, vars);
4257

58+
// Render loop
4359
function render(elapsed) {
60+
// Calculate time values
4461
vars.dt = elapsed / 1000 - vars.time;
4562
vars.time = elapsed / 1000;
4663

64+
// Update uniform values
4765
updateUniforms(gl, uniforms, vars);
4866

67+
// Render to screen
4968
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
5069
requestAnimationFrame(render);
5170
}
71+
// Loop
5272
requestAnimationFrame(render);
73+
74+
// Add fullscreen
75+
fullScreen();
76+
}
5377

78+
79+
80+
//
81+
function fullScreen() {
82+
const canvas = document.getElementById("canvas");
83+
84+
// Find available fullscreen and pointerlock methods
85+
canvas.requestFullscreen = canvas.requestFullscreen ||
86+
canvas.mozRequestFullScreen ||
87+
canvas.webkitRequestFullscreen;
88+
89+
document.exitFullscreen = document.exitFullscreen ||
90+
document.mozCancelFullScreen ||
91+
document.webkitExitFullscreen;
92+
93+
canvas.requestPointerLock = canvas.requestPointerLock ||
94+
canvas.mozRequestPointerLock ||
95+
canvas.webkitRequestPointerLock;
96+
97+
document.exitPointerLock = document.exitPointerLock ||
98+
document.mozExitPointerLock ||
99+
document.webkitExitPointerLock;
100+
101+
// Add pointer lock listener
102+
document.addEventListener('pointerlockchange', pointerLockChange, false);
103+
document.addEventListener('mozpointerlockchange', pointerLockChange, false);
104+
document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
105+
106+
// Add mouse listener
107+
document.addEventListener("mousemove", onmousemove, false);
108+
109+
// Fullscreen and pointer lock on click
110+
canvas.onclick = function() {
111+
canvas.requestFullscreen();
112+
canvas.onmousemove = canvas.requestPointerLock;
113+
}
114+
}
115+
116+
function pointerLockChange() {
117+
// Check if pointer just locked or unlocked
118+
}
119+
120+
function onmousemove() {
121+
// pass
54122
}
55123

124+
125+
126+
////////////////////////////////////////////////////////////////////////////////
127+
128+
129+
130+
// Helper for linking shader programs
56131
function initShaderProgram(gl) {
57132
const vsh = loadShader(gl, gl.VERTEX_SHADER, vsh_src);
58133
const fsh = loadShader(gl, gl.FRAGMENT_SHADER, fsh_src);
@@ -72,6 +147,9 @@ function initShaderProgram(gl) {
72147
return shaderProgram;
73148
}
74149

150+
151+
152+
// Helper for compiling shader source
75153
function loadShader(gl, type, src) {
76154
const shader = gl.createShader(type);
77155

@@ -89,6 +167,9 @@ function loadShader(gl, type, src) {
89167
return shader;
90168
}
91169

170+
171+
172+
// Helper for initializing position buffer
92173
function initBuffer(gl) {
93174
// Create a buffer for the square's positions.
94175
const positionBuffer = gl.createBuffer();
@@ -110,6 +191,9 @@ function initBuffer(gl) {
110191
return positionBuffer;
111192
}
112193

194+
195+
196+
// Helper for finishing setup for rendering
113197
function prepareScene(gl, program, uniforms) {
114198
// Clear screen
115199
gl.clearColor(0.0, 0.0, 0.0, 1.0);
@@ -126,6 +210,9 @@ function prepareScene(gl, program, uniforms) {
126210
const canvas = document.getElementById("canvas");
127211
}
128212

213+
214+
215+
// Helper for initializing uniforms
129216
function initUniforms(gl, shaderProgram, uniformNames) {
130217
var uniforms = {};
131218
var location;

0 commit comments

Comments
 (0)