Skip to content

Commit

Permalink
Improve examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@raub
raub committed Nov 26, 2022
1 parent 0cf1043 commit cfc2220
Show file tree
Hide file tree
Showing 8 changed files with 43 additions and 79 deletions.
16 changes: 5 additions & 11 deletions examples/cube.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const { mat4 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document();
webgl.canvas = document;
const frame = document.requestAnimationFrame;

let xRot = 0;
Expand All @@ -18,11 +19,6 @@ let ySpeed = -5;
let z = -5;
let gl;

document.on('resize', evt => {
gl.viewportWidth = evt.width;
gl.viewportHeight = evt.height;
});


const shaders = {
vs: `
Expand Down Expand Up @@ -51,8 +47,6 @@ const shaders = {
const initContext = canvas => {
try {
gl = canvas.getContext('webgl');
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
console.error('Could not initialise WebGL, sorry :-(');
console.error(e);
Expand All @@ -67,7 +61,7 @@ const getShader = (gl, id) => {
gl.shaderSource(shader, shaders[id]);
gl.compileShader(shader);

if ( ! gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader));
return null;
}
Expand Down Expand Up @@ -118,7 +112,7 @@ const setMatrixUniforms = () => {

const error = gl.getError();
if (error) {
console.error('setMatrixUniforms():', gl.viewportWidth, gl.viewportHeight, error);
console.error('setMatrixUniforms():', gl.drawingBufferWidth, gl.drawingBufferHeight, error);
}
};

Expand Down Expand Up @@ -319,10 +313,10 @@ const initBuffers = () => {


const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.perspective(45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, z]);
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
Expand Down
20 changes: 5 additions & 15 deletions examples/lesson02.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,14 @@ const { mat4 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document();
webgl.canvas = document;

const canvas = document.createElement('canvas');
const frame = document.requestAnimationFrame;

let gl;

document.title = 'Lesson02';
document.on('resize', evt => {
gl.viewportWidth = evt.width;
gl.viewportHeight = evt.height;
});

const shaders = {
vs: `
Expand Down Expand Up @@ -47,17 +44,10 @@ const shaders = {

const initContext = canvas => {
try {

gl = canvas.getContext('webgl');

gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;

} catch (e) {

console.error('Could not initialise WebGL, sorry :-(');
process.exit(-1);

}
};

Expand Down Expand Up @@ -88,7 +78,7 @@ const initShaders = () => {
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if ( ! gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) ) {
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error(
`Could not initialise shaders. Error: ${
gl.getProgramInfoLog(shaderProgram)
Expand Down Expand Up @@ -118,7 +108,7 @@ const setMatrixUniforms = () => {

const error = gl.getError();
if (error) {
console.error('setMatrixUniforms():', gl.viewportWidth, gl.viewportHeight, error);
console.error('setMatrixUniforms():', gl.drawingBufferWidth, gl.drawingBufferHeight, error);
}
};

Expand Down Expand Up @@ -181,10 +171,10 @@ const initBuffers = () => {


const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.perspective(45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0, pMatrix);

mat4.identity(mvMatrix);

Expand Down
15 changes: 4 additions & 11 deletions examples/lesson05.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,14 @@ const { mat4 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document();
webgl.canvas = document;

const canvas = document.createElement('canvas');
const frame = document.requestAnimationFrame;

let gl;

document.title = 'Lesson05';
document.on('resize', evt => {
gl.viewportWidth = evt.width;
gl.viewportHeight = evt.height;
});

const shaders = {
vs: `
Expand Down Expand Up @@ -50,10 +47,6 @@ const shaders = {
const initContext = canvas => {
try {
gl = canvas.getContext('webgl');

gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
console.log(gl.drawingBufferWidth, gl.drawingBufferHeight);
} catch (e) {
console.error('Could not initialise WebGL, sorry :-(');
process.exit(-1);
Expand Down Expand Up @@ -143,7 +136,7 @@ const setMatrixUniforms = () => {

const error = gl.getError();
if (error) {
console.error('setMatrixUniforms():', gl.viewportWidth, gl.viewportHeight, error);
console.error('setMatrixUniforms():', gl.drawingBufferWidth, gl.drawingBufferHeight, error);
}
};

Expand Down Expand Up @@ -265,10 +258,10 @@ let yRot = 0;
let zRot = 0;

const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.perspective(45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0, pMatrix);

mat4.identity(mvMatrix);

Expand Down
20 changes: 10 additions & 10 deletions examples/lesson08.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,13 @@ const { mat4, mat3, vec3 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document();
webgl.canvas = document;

const canvas = document.createElement('canvas');
const frame = document.requestAnimationFrame;
let gl;


document.title = 'Lesson08';
document.on('resize', evt => {
gl.viewportWidth = evt.width;
gl.viewportHeight = evt.height;
});


const shaders = {
Expand Down Expand Up @@ -65,9 +62,12 @@ const shaders = {


const initContext = canvas => {
gl = canvas.getContext('webgl');
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
try {
gl = canvas.getContext('webgl');
} catch (e) {
console.error('Could not initialise WebGL, sorry :-(');
process.exit(-1);
}
};


Expand Down Expand Up @@ -391,10 +391,10 @@ const initBuffers = () => {


const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.perspective(45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0, pMatrix);

mat4.identity(mvMatrix);

Expand Down
16 changes: 8 additions & 8 deletions examples/screen_aligned.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const { mat4 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document();
webgl.canvas = document;

const canvas = document.createElement('canvas');
let gl;
Expand Down Expand Up @@ -42,9 +43,12 @@ let shaders = {
};

const initContext = canvas => {
gl = canvas.getContext('webgl');
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
try {
gl = canvas.getContext('webgl');
} catch (e) {
console.error('Could not initialise WebGL, sorry :-(');
process.exit(-1);
}
};


Expand Down Expand Up @@ -181,7 +185,7 @@ const initBuffers = () => {


const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.ortho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0, pMatrix);
Expand Down Expand Up @@ -226,10 +230,6 @@ const tick = () => {

const start = () => {
initContext(canvas);
document.on('resize', () => {
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
});
initShaders();
initBuffers();
initTexture();
Expand Down
15 changes: 4 additions & 11 deletions examples/vao-oes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const { mat4 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document({ osxCore: true });
webgl.canvas = document;
const frame = document.requestAnimationFrame;

const ext = webgl.getExtension('OES_vertex_array_object');
Expand All @@ -21,11 +22,6 @@ let ySpeed = -5;
let z = -5;
let gl;

document.on('resize', evt => {
gl.viewportWidth = evt.width;
gl.viewportHeight = evt.height;
});


const shaders = {
vs: `
Expand Down Expand Up @@ -54,9 +50,6 @@ const shaders = {
const initContext = canvas => {
try {
gl = canvas.getContext('webgl');

gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
console.error('Could not initialise WebGL, sorry :-(');
console.error(e);
Expand Down Expand Up @@ -119,7 +112,7 @@ const setMatrixUniforms = () => {

const error = gl.getError();
if (error) {
console.error('setMatrixUniforms():', gl.viewportWidth, gl.viewportHeight, error);
console.error('setMatrixUniforms():', gl.drawingBufferWidth, gl.drawingBufferHeight, error);
}
};

Expand Down Expand Up @@ -281,10 +274,10 @@ const initBuffers = () => {


const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.perspective(45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, z]);
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
Expand Down
14 changes: 4 additions & 10 deletions examples/vao.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const { mat4 } = require('./libs/glMatrix-0.9.5.min');

Document.setWebgl(webgl);
const document = new Document({ osxCore: true });
webgl.canvas = document;
const frame = document.requestAnimationFrame;

let xRot = 0;
Expand All @@ -18,11 +19,6 @@ let ySpeed = -5;
let z = -5;
let gl;

document.on('resize', evt => {
gl.viewportWidth = evt.width;
gl.viewportHeight = evt.height;
});


const shaders = {
vs: `
Expand Down Expand Up @@ -51,8 +47,6 @@ const shaders = {
const initContext = canvas => {
try {
gl = canvas.getContext('webgl');
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
console.error('Could not initialise WebGL, sorry :-(');
console.error(e);
Expand Down Expand Up @@ -115,7 +109,7 @@ const setMatrixUniforms = () => {

const error = gl.getError();
if (error) {
console.error('setMatrixUniforms():', gl.viewportWidth, gl.viewportHeight, error);
console.error('setMatrixUniforms():', gl.drawingBufferWidth, gl.drawingBufferHeight, error);
}
};

Expand Down Expand Up @@ -277,10 +271,10 @@ const initBuffers = () => {


const drawScene = () => {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.perspective(45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, z]);
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
Expand Down
6 changes: 3 additions & 3 deletions js/webgl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ if (!gl.__isInited) {
this.type = _.type;
this.name = _.name;
};
gl.WebGLTransformFeedback = function (_) { this._ = _; };
gl.WebGLTransformFeedback = function WebGLTransformFeedback(_) { this._ = _; };


// Global scope constructors for browser-style libs
Expand Down Expand Up @@ -435,13 +435,13 @@ if (!gl.__isInited) {

if (gl.drawingBufferWidth === undefined) {
Object.defineProperty(
gl, 'drawingBufferWidth', { get: () => gl.getParameter(gl.VIEWPORT)[2] },
gl, 'drawingBufferWidth', { get: () => (gl.canvas ? gl.canvas.width : 800) },
);
}

if (gl.drawingBufferHeight === undefined) {
Object.defineProperty(
gl, 'drawingBufferHeight', { get: () => gl.getParameter(gl.VIEWPORT)[3] },
gl, 'drawingBufferHeight', { get: () => (gl.canvas ? gl.canvas.height : 600) },
);
}

Expand Down

0 comments on commit cfc2220

Please sign in to comment.