Months are now coloring using shaders

This commit is contained in:
leca 2024-01-29 00:57:46 +03:00
parent ce7ae68c84
commit 47a6fceed4
5 changed files with 70 additions and 13 deletions

View File

@ -19,6 +19,47 @@
</script> </script>
<script src="view/graphics.js" type="module"></script> <script src="view/graphics.js" type="module"></script>
<script src="view/controls.js" type="module"></script> <script src="view/controls.js" type="module"></script>
<script id="vertexShader" type="x-shader/x-vertex">
const float PI = 3.14159;
varying vec4 v_color;
varying float rad;
void main() {
rad = atan(position.z, position.x) - PI/2.;
if (rad < 0.) rad = 2. * PI - abs(rad);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, position.z, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
const float PI = 3.14159;
varying vec4 v_color;
varying float rad;
vec4 colors[12] = vec4[12](
vec4(0.0980, 0.4627, 0.8235, 1), // jan
vec4(0.102, 0.1406, 0.4922, 1), // feb
vec4(1, 0, 1, 1), // mar
vec4(1, 1, 0, 1), // apr
vec4(0, 1, 1, 1), // may
vec4(0, 1, 0, 1), // jun
vec4(1, 0, 0, 1), // jul
vec4(0, 0, 1, 1), // aug
vec4(0.5, 1, 1, 1), // sep
vec4(1, 0.5, 1, 1), // oct
vec4(1, 1, 0.5, 1), // nov
vec4(1, 1, 1, 1) // dec
);
void main() {
int month = int(floor(rad / (PI/6.)));
gl_FragColor = colors[month];
}
</script>
</body> </body>
</html> </html>

8
package-lock.json generated
View File

@ -12,7 +12,7 @@
"three": "^0.156.1" "three": "^0.156.1"
}, },
"devDependencies": { "devDependencies": {
"electron": "^27.0.0" "electron": "^27.3.0"
} }
}, },
"node_modules/@electron/get": { "node_modules/@electron/get": {
@ -261,9 +261,9 @@
"optional": true "optional": true
}, },
"node_modules/electron": { "node_modules/electron": {
"version": "27.0.0", "version": "27.3.0",
"resolved": "https://registry.npmjs.org/electron/-/electron-27.0.0.tgz", "resolved": "https://registry.npmjs.org/electron/-/electron-27.3.0.tgz",
"integrity": "sha512-mr3Zoy82l8XKK/TgguE5FeNeHZ9KHXIGIpUMjbjZWIREfAv+X2Q3vdX6RG0Pmi1K23AFAxANXQezIHBA2Eypwg==", "integrity": "sha512-o+pYSNG8kfXPkQWu1lhLwHboQ9n+3cuhi6GBhiryUeqY76C1oEnrxYRzCuaD9T0V7qbbvO0ID0MXfFNVQJXVBQ==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {

View File

@ -5,7 +5,7 @@
"main": "main.js", "main": "main.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"start" : "electron ." "start": "electron ."
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -21,6 +21,6 @@
"three": "^0.156.1" "three": "^0.156.1"
}, },
"devDependencies": { "devDependencies": {
"electron": "^27.0.0" "electron": "^27.3.0"
} }
} }

View File

@ -6,7 +6,19 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js';
const segmentHeight = 2; 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(); const scene = new THREE.Scene();
@ -43,7 +55,8 @@ let switched = true;
for (let i = 0; i < viewDistance * 2 + 1; i++) { for (let i = 0; i < viewDistance * 2 + 1; i++) {
let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`; 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)); segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material));
scene.add(segments[i].getSegment()); scene.add(segments[i].getSegment());
scene.add(segments[i].getText()); scene.add(segments[i].getText());
@ -55,8 +68,9 @@ addEventListener("changedViewYear", (e) => {
let newYear = camera.getViewingYear(); let newYear = camera.getViewingYear();
if (newYear > viewingYear) { // + if (newYear > viewingYear) { // +
let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)] // let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)]
let material = new THREE.MeshBasicMaterial({ color: color }); // let material = new THREE.MeshBasicMaterial({ color: color });
let material = spiralMaterial;
scene.remove(segments[0].getSegment()) scene.remove(segments[0].getSegment())
scene.remove(segments[0].getText()) 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].getSegment());
scene.add(segments[segments.length - 1].getText()); scene.add(segments[segments.length - 1].getText());
} else { } else {
let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)] // let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)]
let material = new THREE.MeshBasicMaterial({ color: color }); // let material = new THREE.MeshBasicMaterial({ color: color });
let material = spiralMaterial;
scene.remove(segments[segments.length - 1].getSegment()) scene.remove(segments[segments.length - 1].getSegment())
scene.remove(segments[segments.length - 1].getText()) scene.remove(segments[segments.length - 1].getText())
segments.pop(); segments.pop();
segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material)) segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material))
scene.add(segments[0].getSegment()); scene.add(segments[0].getSegment());
scene.add(segments[0].getText()); scene.add(segments[0].getText());
} }

View File

@ -49,6 +49,7 @@ const calculateTextGeometry = (string) => {
}; };
const spiralGeometry = calculateSpiralGeometry(2) const spiralGeometry = calculateSpiralGeometry(2)
// spiralGeometry.setAttribute('position', new THREE.BufferAttribute( linePositions, 3 ));
export class SpiralSegment { export class SpiralSegment {
constructor(year, height, material) { constructor(year, height, material) {