Update examples

Author: raub

README.md

@@ -48,9 +48,10 @@ Those two are bundled into
 the [3d-core-raub](https://github.com/node-3d/3d-core-raub) in a following manner:
 
 ```js
-const image = require('image-raub');
-const webgl = require('webgl-raub');
-const { Document } = require('glfw-raub');
+import Image from 'image-raub';
+import webgl from 'webgl-raub';
+import glfw from 'glfw-raub';
+const { Document } = glfw;
 
 Document.setImage(image); // plug this Image impl into the Document
 Document.setWebgl(webgl); // plug this WebGL impl into the Document

examples/aligned.mjs

@@ -0,0 +1,140 @@
+'use strict';
+
+import Image from 'image-raub';
+import glfw from 'glfw-raub';
+const { Document } = glfw;
+
+import gl from '../index.js';
+import { mat4 } from './utils/glMatrix-0.9.5.min.js';
+import { alignedShaders } from './utils/presets.mjs';
+import { buildShader } from './utils/build-shader.mjs';
+
+
+const vertices = [
+	// Front face
+	-1.0, -1.0, 0.5,
+	1.0, -1.0, 0.5,
+	1.0, 1.0, 0.5,
+	-1.0, 1.0, 0.5,
+];
+
+const textureCoords = [
+	// Front face
+	0.0, 0.0,
+	1.0, 0.0,
+	1.0, 1.0,
+	0.0, 1.0,
+];
+
+const cubeVertexIndices = [
+	0, 1, 2, 0, 2, 3, // Front face
+];
+
+Document.setWebgl(gl);
+const document = new Document({
+	vsync: true, autoEsc: true, autoFullscreen: true, title: 'Aligned',
+});
+
+const shaderProgram = buildShader(alignedShaders);
+gl.useProgram(shaderProgram);
+
+shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
+gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+
+shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
+gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+
+shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix');
+shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix');
+shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, 'uSampler');
+
+const texLena = gl.createTexture();
+texLena.image = new Image();
+texLena.image.onload = () => {
+	console.log(
+		`Loaded image: ${texLena.image.src}`,
+		`${texLena.image.width}x${texLena.image.height}`,
+	);
+	gl.bindTexture(gl.TEXTURE_2D, texLena);
+	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texLena.image);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+	gl.bindTexture(gl.TEXTURE_2D, null);
+};
+texLena.image.src = 'img/glass.gif';
+
+
+const mvMatrix = mat4.create();
+const pMatrix = mat4.create();
+
+
+const setMatrixUniforms = () => {
+	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
+	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
+};
+
+const cubeVertexPositionBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+cubeVertexPositionBuffer.itemSize = 3;
+
+const cubeVertexTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
+cubeVertexTextureCoordBuffer.itemSize = 2;
+
+const cubeVertexIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+cubeVertexIndexBuffer.numItems = 6;
+
+
+const drawScene = () => {
+	gl.clearColor(0.05, 0.1, 0.05, 1.0);
+	gl.enable(gl.DEPTH_TEST);
+	
+	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+	
+	gl.useProgram(shaderProgram);
+	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+	gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+	
+	mat4.ortho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0, pMatrix);
+	
+	mat4.identity(mvMatrix);
+	
+	gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+	gl.vertexAttribPointer(
+		shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0,
+	);
+	
+	gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+	gl.vertexAttribPointer(
+		shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0,
+	);
+	
+	gl.activeTexture(gl.TEXTURE0);
+	gl.bindTexture(gl.TEXTURE_2D, texLena);
+	gl.uniform1i(shaderProgram.samplerUniform, 0);
+	
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+	setMatrixUniforms();
+	gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
+	
+	// Cleanup GL state
+	gl.bindTexture(gl.TEXTURE_2D, null);
+	gl.bindBuffer(gl.ARRAY_BUFFER, null);
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+	gl.useProgram(null);
+};
+
+
+const tick = () => {
+	drawScene();
+	
+	document.requestAnimationFrame(tick);
+};
+
+document.requestAnimationFrame(tick);