From 47a6fceed4f7b03348b7c12eaf0ff982bbb5b45e Mon Sep 17 00:00:00 2001 From: leca Date: Mon, 29 Jan 2024 00:57:46 +0300 Subject: [PATCH] Months are now coloring using shaders --- index.html | 41 +++++++++++++++++++++++++++++++++++++++++ package-lock.json | 8 ++++---- package.json | 4 ++-- view/graphics.js | 29 ++++++++++++++++++++++------- view/spiral.js | 1 + 5 files changed, 70 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 8895e1d..a755d48 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,47 @@ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 333b84b..ffae698 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "three": "^0.156.1" }, "devDependencies": { - "electron": "^27.0.0" + "electron": "^27.3.0" } }, "node_modules/@electron/get": { @@ -261,9 +261,9 @@ "optional": true }, "node_modules/electron": { - "version": "27.0.0", - "resolved": "https://registry.npmjs.org/electron/-/electron-27.0.0.tgz", - "integrity": "sha512-mr3Zoy82l8XKK/TgguE5FeNeHZ9KHXIGIpUMjbjZWIREfAv+X2Q3vdX6RG0Pmi1K23AFAxANXQezIHBA2Eypwg==", + "version": "27.3.0", + "resolved": "https://registry.npmjs.org/electron/-/electron-27.3.0.tgz", + "integrity": "sha512-o+pYSNG8kfXPkQWu1lhLwHboQ9n+3cuhi6GBhiryUeqY76C1oEnrxYRzCuaD9T0V7qbbvO0ID0MXfFNVQJXVBQ==", "dev": true, "hasInstallScript": true, "dependencies": { diff --git a/package.json b/package.json index 6ab14a2..e0f424d 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start" : "electron ." + "start": "electron ." }, "repository": { "type": "git", @@ -21,6 +21,6 @@ "three": "^0.156.1" }, "devDependencies": { - "electron": "^27.0.0" + "electron": "^27.3.0" } } diff --git a/view/graphics.js b/view/graphics.js index f81686d..b3b911c 100644 --- a/view/graphics.js +++ b/view/graphics.js @@ -6,7 +6,19 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js'; const segmentHeight = 2; -let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f }); +// let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f }); +const spiralMaterial = new THREE.ShaderMaterial( { + + uniforms: { + time: { value: 1.0 }, + resolution: { value: new THREE.Vector2() }, + position: new THREE.Vector3() + }, + + vertexShader: document.getElementById( 'vertexShader' ).textContent, + fragmentShader: document.getElementById( 'fragmentShader' ).textContent + +} ); const scene = new THREE.Scene(); @@ -43,7 +55,8 @@ let switched = true; for (let i = 0; i < viewDistance * 2 + 1; i++) { let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`; - let material = new THREE.MeshPhongMaterial({ color: color }); + // let material = new THREE.MeshPhongMaterial({ color: color }); + let material = spiralMaterial; segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material)); scene.add(segments[i].getSegment()); scene.add(segments[i].getText()); @@ -55,8 +68,9 @@ addEventListener("changedViewYear", (e) => { let newYear = camera.getViewingYear(); if (newYear > viewingYear) { // + - let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)] - let material = new THREE.MeshBasicMaterial({ color: color }); + // let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)] + // let material = new THREE.MeshBasicMaterial({ color: color }); + let material = spiralMaterial; scene.remove(segments[0].getSegment()) scene.remove(segments[0].getText()) @@ -67,15 +81,16 @@ addEventListener("changedViewYear", (e) => { scene.add(segments[segments.length - 1].getSegment()); scene.add(segments[segments.length - 1].getText()); } else { - let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)] - let material = new THREE.MeshBasicMaterial({ color: color }); + // let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)] + // let material = new THREE.MeshBasicMaterial({ color: color }); + let material = spiralMaterial; scene.remove(segments[segments.length - 1].getSegment()) scene.remove(segments[segments.length - 1].getText()) segments.pop(); segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material)) - + scene.add(segments[0].getSegment()); scene.add(segments[0].getText()); } diff --git a/view/spiral.js b/view/spiral.js index caea009..8d53d2e 100644 --- a/view/spiral.js +++ b/view/spiral.js @@ -49,6 +49,7 @@ const calculateTextGeometry = (string) => { }; const spiralGeometry = calculateSpiralGeometry(2) +// spiralGeometry.setAttribute('position', new THREE.BufferAttribute( linePositions, 3 )); export class SpiralSegment { constructor(year, height, material) {