Update examples

README.md

@@ -40,7 +40,7 @@ This module exports 2 methods:
     `three.Texture.fromId` static method to create THREE textures from known GL resource IDs.
 
 
-See [TypeSctipt defenitions](/index.d.ts) for more details.
+See [TypeScript defenitions](/index.d.ts) for more details.
 
 Example (also see [here](/examples/crate-lean.js)):
 

examples/palette/index.js

@@ -1,6 +1,7 @@
 
 const { read } = require('addon-tools-raub');
 const glfw = require('glfw-raub');
+const Image = require('image-raub');
 
 const { init, addThreeHelpers } = require('../../index');
 const { generatePalette } = require('./utils/palette');
@@ -14,28 +15,29 @@ const hueModes = [
 	'monochromatic', 'analagous', 'complementary', 'triadic', 'tetradic',
 ];
 
-const { Window } = glfw;
+const { extraCodes } = glfw;
+
+const {
+	doc, requestAnimationFrame, gl,
+} = init({
+	isGles3: true,
+	width: 1280,
+	height: 720,
+	autoEsc: true,
+	autoFullscreen: true,
+});
+
+const icon = new Image(__dirname + '/textures/icon.png');
+icon.on('load', () => { doc.icon = icon; });
+doc.title = 'Palette Swap';
 
 (async () => {
 	const THREE = await import('three');
 	const { OrbitControls } = await import('three/examples/jsm/controls/OrbitControls.js');
 
-	const fragmentShader = await read(`${__dirname}/post.glsl`);
-
-	const {
-		doc, requestAnimationFrame, gl,
-	} = init({ isGles3: true, width: 1280, height: 720 });
 	addThreeHelpers(THREE, gl);
 
-	doc.setPointerCapture = () => {
-		doc.setInputMode(glfw.CURSOR, glfw.CURSOR_DISABLED);
-	};
-	doc.releasePointerCapture = () => {
-		doc.setInputMode(glfw.CURSOR, glfw.CURSOR_NORMAL);
-	};
-	doc.on('mousedown', (e) => { doc.emit('pointerdown', e); });
-	doc.on('mouseup', (e) => { doc.emit('pointerup', e); });
-	doc.on('mousemove', (e) => { doc.emit('pointermove', e); });
+	const fragmentShader = await read(`${__dirname}/post.glsl`);
 
 	const cameraOrtho = new THREE.OrthographicCamera(
 		-doc.w / 2, doc.w / 2, doc.h / 2, -doc.h / 2, - 10, 10,
@@ -166,25 +168,24 @@ const { Window } = glfw;
 			setModeGrayscale((modeGrayscale + 1) % 4);
 			return;
 		}
-		if (e.keyCode === Window.extraCodes[glfw.KEY_EQUAL]) {
+		if (e.keyCode === extraCodes[glfw.KEY_EQUAL]) {
 			setNumColors(Math.min(16, numColors + 1));
 			return;
 		}
-		if (e.keyCode === Window.extraCodes[glfw.KEY_MINUS]) {
+		if (e.keyCode === extraCodes[glfw.KEY_MINUS]) {
 			setNumColors(Math.max(2, numColors - 1));
 			return;
 		}
-		if (e.keyCode === glfw.KEY_H || e.keyCode === Window.extraCodes[glfw.KEY_F1]) {
+		if (e.keyCode === glfw.KEY_H || e.keyCode === extraCodes[glfw.KEY_F1]) {
 			quadHelp.visible = !quadHelp.visible;
 			return;
 		}
-		// console.log('kk', e.keyCode, glfw.KEY_EQUAL, Window.extraCodes[glfw.KEY_EQUAL]);
 	});
 
-	const renderer = new THREE.WebGLRenderer({ antialias: true });
+	const renderer = new THREE.WebGLRenderer();
 	renderer.setPixelRatio(doc.devicePixelRatio);
 	renderer.setSize(doc.w, doc.h);
-	debugShaders(renderer);
+	debugShaders(renderer, false);
 
 	doc.on('resize', () => {
 		cameraPerspective.aspect = doc.w / doc.h;

examples/palette/utils/debug-shaders.js

@@ -1,6 +1,12 @@
-const debugShaders = (renderer) => {
-	renderer.debug.checkShaderErrors = true;
-	renderer.debug.onShaderError  = (gl, _program, vs, fs) => {
+const debugShaders = (renderer, isEnabled) => {
+	renderer.debug.checkShaderErrors = isEnabled;
+
+	if (!isEnabled) {
+		renderer.debug.onShaderError = null;
+		return;
+	}
+
+	renderer.debug.onShaderError = (gl, _program, vs, fs) => {
 		const parseForErrors = (shader, name) => {
 			const errors = (gl.getShaderInfoLog(shader) || '').trim();
 			const prefix = 'Errors in ' + name + ':' + '\n\n' + errors;

examples/three/post.mjs

@@ -27,13 +27,15 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 
 const {
-	window,
-	document,
-	requestAnimationFrame,
-	gl,
+	window, document, requestAnimationFrame, gl, Image,
 } = init();
 addThreeHelpers(THREE, gl);
 
+const icon = new Image();
+icon.src = __dirname + '/textures/three.png';
+icon.on('load', () => { document.icon = icon; });
+document.title = 'Postprocessing';
+
 let container;
 
 let composerScene, composer1, composer2, composer3, composer4;

js/index.js

@@ -4,6 +4,7 @@
 const _init = (_opts = {}) => {
 	const opts = {
 		mode: 'windowed',
+		vsync: true,
 		webgl: _opts.webgl || require('webgl-raub'),
 		Image: _opts.Image || require('image-raub'),
 		glfw: _opts.glfw || require('glfw-raub'),
@@ -78,8 +79,6 @@ const _init = (_opts = {}) => {
 
 	const doc = new Document({ ...optsDoc, onBeforeWindow });
 
-	webgl.init();
-
 	global.self = global;
 	global.globalThis = global;
 	global.addEventListener = doc.addEventListener.bind(doc);

package.json

@@ -1,7 +1,7 @@
 {
 	"author": "Luis Blanco <luisblanco1337@gmail.com>",
 	"name": "3d-core-raub",
-	"version": "4.0.2",
+	"version": "4.1.0",
 	"description": "An extensible Node3D core for desktop applications",
 	"license": "MIT",
 	"main": "index.js",
@@ -45,8 +45,8 @@
 	},
 	"dependencies": {
 		"addon-tools-raub": "^7.4.0",
-		"image-raub": "^4.1.3",
-		"glfw-raub": "^5.2.2",
+		"image-raub": "^4.2.0",
+		"glfw-raub": "^5.3.0",
 		"webgl-raub": "^4.0.2"
 	},
 	"devDependencies": {