diff --git a/README.md b/README.md index 5cb5375..f9ad1f2 100644 --- a/README.md +++ b/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)): diff --git a/examples/palette/index.js b/examples/palette/index.js index b9061c7..b781712 100644 --- a/examples/palette/index.js +++ b/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; diff --git a/examples/palette/textures/help.png b/examples/palette/textures/help.png index 58d7d31..6e6328b 100644 Binary files a/examples/palette/textures/help.png and b/examples/palette/textures/help.png differ diff --git a/examples/palette/textures/help.xcf b/examples/palette/textures/help.xcf index dce7e49..178678a 100644 Binary files a/examples/palette/textures/help.xcf and b/examples/palette/textures/help.xcf differ diff --git a/examples/palette/textures/icon.png b/examples/palette/textures/icon.png new file mode 100644 index 0000000..f315ce3 Binary files /dev/null and b/examples/palette/textures/icon.png differ diff --git a/examples/palette/utils/debug-shaders.js b/examples/palette/utils/debug-shaders.js index 3a51702..a7ffba1 100644 --- a/examples/palette/utils/debug-shaders.js +++ b/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; diff --git a/examples/screenshot.png b/examples/screenshot.png index 36afaa5..0674bc8 100644 Binary files a/examples/screenshot.png and b/examples/screenshot.png differ diff --git a/examples/screenshot.xcf b/examples/screenshot.xcf new file mode 100644 index 0000000..4807103 Binary files /dev/null and b/examples/screenshot.xcf differ diff --git a/examples/three/post.mjs b/examples/three/post.mjs index 47aa4a5..952bf93 100644 --- a/examples/three/post.mjs +++ b/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; diff --git a/js/index.js b/js/index.js index 71c40d2..38eae92 100644 --- a/js/index.js +++ b/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); diff --git a/package-lock.json b/package-lock.json index d22c9b1..3a87515 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "3d-core-raub", - "version": "4.0.2", + "version": "4.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "3d-core-raub", - "version": "4.0.2", + "version": "4.1.0", "license": "MIT", "dependencies": { "addon-tools-raub": "^7.4.0", - "glfw-raub": "^5.2.2", - "image-raub": "^4.1.3", + "glfw-raub": "^5.3.0", + "image-raub": "^4.2.0", "webgl-raub": "^4.0.2" }, "devDependencies": { @@ -169,9 +169,9 @@ } }, "node_modules/@types/node": { - "version": "20.8.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.4.tgz", - "integrity": "sha512-ZVPnqU58giiCjSxjVUESDtdPk4QR5WQhhINbc9UBrKLU68MX5BF6kbQzTrkwbolyr0X8ChBpXfavr5mZFKZQ5A==", + "version": "20.8.6", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.6.tgz", + "integrity": "sha512-eWO4K2Ji70QzKUqRy6oyJWUeB7+g2cRagT3T/nxYibYcT4y2BDL8lqolRXjTHmkZCdJfIPaY73KbJAZmcryxTQ==", "dev": true, "dependencies": { "undici-types": "~5.25.1" @@ -729,9 +729,9 @@ "dev": true }, "node_modules/glfw-raub": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/glfw-raub/-/glfw-raub-5.2.2.tgz", - "integrity": "sha512-tKyH2V68LEyPQj1VVRk4e6wylGlj6a7rAC/8uf1MJQzg1dccnS/gFtxF6P1MRUOXa8KqACYd0vIvTpThiBtDCw==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/glfw-raub/-/glfw-raub-5.3.0.tgz", + "integrity": "sha512-7xRKes3S46E/FY4zkvfaCEmuFV9SoNDgAex8MiJ0omoevmmkChR9YcIjtwnh9ViTaPZa1F1AK4fQH8rDMBiESg==", "hasInstallScript": true, "dependencies": { "addon-tools-raub": "^7.4.0", @@ -824,9 +824,9 @@ } }, "node_modules/image-raub": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/image-raub/-/image-raub-4.1.3.tgz", - "integrity": "sha512-a8e15J/oWles07b4Ju9Iy6RrJ2uJKQeoi4zqE4wvH24iDSEgsYXoO6nJpET2f26gaqeJRFA7ZTsUK2xupNyj4A==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/image-raub/-/image-raub-4.2.0.tgz", + "integrity": "sha512-jy1h4KBlJ0TaJV6t6N0r9vTzomDcpMUaNPaBAk3HK5r8sA69Y/49DA1pGhqz164a7GW38resy0z58+6ttiUm+A==", "hasInstallScript": true, "dependencies": { "addon-tools-raub": "^7.4.0", diff --git a/package.json b/package.json index bdc2166..31119af 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "author": "Luis Blanco ", "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": {