zoe
/
starchart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add the shader! (hooray!)

This commit is contained in:
zoe 2023-08-25 23:45:16 +02:00
parent 95ebf2b525
commit 11f40e5d6b
7 changed files with 229 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/stars/kind.rs
View File

@ -10,6 +10,7 @@ pub enum Kind {
Star,
Nova,
Supernova,
Banana,
}
impl Kind {

2
src/stars/position.rs
View File

@ -17,7 +17,7 @@ impl Position {
Self {
right: rand.f64() * 100.0,
bottom: rand.f64() * 100.0,
width: rand.u8(16..82),
width: rand.u8(16..112),
}
}
}

BIN
web/public/images/banana.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
web/public/images/banana.webp~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

211
web/public/models/banana.gltf Normal file
View File

@ -0,0 +1,211 @@
{
"asset":{
"generator":"Khronos glTF Blender I/O v3.5.30",
"version":"2.0"
},
"scene":0,
"scenes":[
{
"name":"Scene",
"nodes":[
0
]
}
],
"nodes":[
{
"mesh":0,
"name":"Cylinder",
"scale":[
0.20239891111850739,
0.20239891111850739,
0.20239891111850739
],
"translation":[
0,
0.01713314652442932,
0
]
}
],
"materials":[
{
"doubleSided":true,
"name":"Light",
"pbrMetallicRoughness":{
"baseColorFactor":[
1,
0.7184775471687317,
0.0997823104262352,
1
],
"metallicFactor":0,
"roughnessFactor":0.5
}
},
{
"doubleSided":true,
"name":"Dark",
"pbrMetallicRoughness":{
"baseColorFactor":[
0.12822629511356354,
0.006969457026571035,
0.02585199475288391,
1
],
"metallicFactor":0
}
}
],
"meshes":[
{
"name":"Cylinder",
"primitives":[
{
"attributes":{
"POSITION":0,
"TEXCOORD_0":1,
"NORMAL":2
},
"indices":3,
"material":0
},
{
"attributes":{
"POSITION":4,
"TEXCOORD_0":5,
"NORMAL":6
},
"indices":7,
"material":1
}
]
}
],
"accessors":[
{
"bufferView":0,
"componentType":5126,
"count":36,
"max":[
1.0150490999221802,
5.494449615478516,
0.80901700258255
],
"min":[
-1.5585846900939941,
-1.6041733026504517,
-1
],
"type":"VEC3"
},
{
"bufferView":1,
"componentType":5126,
"count":36,
"type":"VEC2"
},
{
"bufferView":2,
"componentType":5126,
"count":36,
"type":"VEC3"
},
{
"bufferView":3,
"componentType":5123,
"count":150,
"type":"SCALAR"
},
{
"bufferView":4,
"componentType":5126,
"count":34,
"max":[
-0.25792595744132996,
6.0098876953125,
0.5532032251358032
],
"min":[
-1.6626043319702148,
-1.9625250101089478,
-0.683796763420105
],
"type":"VEC3"
},
{
"bufferView":5,
"componentType":5126,
"count":34,
"type":"VEC2"
},
{
"bufferView":6,
"componentType":5126,
"count":34,
"type":"VEC3"
},
{
"bufferView":7,
"componentType":5123,
"count":78,
"type":"SCALAR"
}
],
"bufferViews":[
{
"buffer":0,
"byteLength":432,
"byteOffset":0,
"target":34962
},
{
"buffer":0,
"byteLength":288,
"byteOffset":432,
"target":34962
},
{
"buffer":0,
"byteLength":432,
"byteOffset":720,
"target":34962
},
{
"buffer":0,
"byteLength":300,
"byteOffset":1152,
"target":34963
},
{
"buffer":0,
"byteLength":408,
"byteOffset":1452,
"target":34962
},
{
"buffer":0,
"byteLength":272,
"byteOffset":1860,
"target":34962
},
{
"buffer":0,
"byteLength":408,
"byteOffset":2132,
"target":34962
},
{
"buffer":0,
"byteLength":156,
"byteOffset":2540,
"target":34963
}
],
"buffers":[
{
"byteLength":2696,
"uri":"data:application/octet-stream;base64,AAAAAPhw9z4AAIC/AAAAAPhw9z4AAIC/MgC5vpbIiEAAAIC/MgC5vpbIiEAAAIC/cXhzP/hw9z56N56+WPgWP5bIiEB6N56+GHkWP/hw9z69G08//ONnPpbIiEC9G08/GHkWv/hw9z69G08/Mflyv5bIiEC9G08/cXhzv/hw9z56N56+Rfynv5bIiEB6N56+kA6DPUz/GEAAAIC/kA6DPUz/GEAAAIC/Ie2BP0z/GEB6N56+6tomP0z/GEC9G08/RhcGv0z/GEC9G08/nxZjv0z/GEB6N56+ukI6v41Vzb+7zrc+SP4Qv4tVzb+iagy+Xgh9v4tVzb/bMuO+Xgh9v4tVzb/bMuO+OIm0v41Vzb+iagy+AOefv4tVzb+7zrc+0p4Bv4jSr0C6ng0/ArSnv4jSr0C6ng0/tH/Hv4jSr0BMYFi+3w6EvojSr0BMYFi+bINov4jSr0BODS+/bINov4jSr0BODS+/QKnjPfSKU7/2vlK+aeyTv/aKU7/2vlK+jOoFvvaKU79d7wk/17EFv/SKU78+fyq/17EFv/SKU78+fyq/C+lpv/SKU79d7wk/AAAAMwAAAD8AAIA/AAAAPwAAADMAAAAAAACAPwAAAADNzEw/AAAAP83MTD8AAAAAmpkZPwAAAD+amRk/AAAAAM7MzD4AAAA/zszMPgAAAADPzEw+AAAAP8/MTD4AAAAAAAAAM5hrfj4AAIA/mGt+Ps7MTD+Ua34+mpkZP5hrfj7OzMw+mGt+PtDMTD6Ya34+mpkZPwAAAD/NzEw/AAAAPwAAADMAAAA/AACAPwAAAD/PzEw+AAAAP87MzD4AAAA/mpkZPwAAAADOzMw+AAAAAM/MTD4AAAAAzMxMPwAAAAAAAAAzAAAAAAAAgD8AAAAA7LBIPwAAAD8DFG4+/v//Pjb1Hj/+//8+223yvAAAAD8CW4U/AAAAP5RKtz4BAAA/guJHPV8HDr6oNX2/guJHPV8HDr6oNX2/coqOPKjGCz5okX2/coqOPKjGCz5okX2/0SJrPxWMir4PnJO+pb1hP9IAvj4rGJW+rK0YP1XBaL6dEUU/RGkPP5jdkz4nwkY/H4ULv1CNl7xGlFY/F9kOv6d5R70GElQ/095wv3Zxmz3D9ai+8tJtv3/7Or74wqS+XI9CPSsYFTxbsX+/XI9CPSsYFTxbsX+/845zP+kmsT3iWJe+pHAdP/2HdD1nREk/24oNv2DlUL1L6lQ/QBNxv8l2vr2vlKW+qFfqPpF++767uD0/n806PzxOIb+e74e+63M1vS0hX76amXm/63M1vS0hX76amXm/VFJnv/5llz42q56+L24Tv8l2vj1X7E8/kKD4PlTj5T6OBkA/2V8Wv0tZhrtJLk8/l5BvvzC7J76u2J++GXNHP/s6ED+xv4y+BcUPvfypcT4Cmni/BcUPvfypcT4Cmni/odZEPzSiFL8VHYm+duBsv5ayTD6dEaW+foz5PoZa874fhTs/sANnvKfoiL7wp3a/sANnvKfoiL7wp3a/nMQQvxe30TgYJlM/DQADAAUADQAFAA4ADgAFAAcADgAHAA8ADwAHAAkADwAJABAAEAAJAAsAEAALABEAEQALAAIAEQACAAwACgARAAwACgAMAAAACAAQABEACAARAAoABgAPABAABgAQAAgABAAOAA8ABAAPAAYAAQANAA4AAQAOAAQAIwAfABYAIwAWABcAIAAjABcAIAAXABIAIgAeABMAIgATABUAHwAhABQAHwAUABYAHgAgABIAHgASABMABQADAB0ABQAdABsAAgALABoAAgAaABwABwAFABsABwAbABgACwAJABkACwAZABoACQAHABgACQAYABkABAAGACAABAAgAB4ACgAAACEACgAhAB8AAQAEAB4AAQAeACIABgAIACMABgAjACAACAAKAB8ACAAfACMAHemYvwU0+7/LO7y+HemYvwU0+7/LO7y+HemYvwU0+7/LO7y+kE9YvwU0+79pq+i9kE9YvwU0+79pq+i9MIB6vwU0+7+8SJg+MIB6vwU0+7+8SJg+IpK0vwU0+7+8SJg+IpK0vwU0+7+8SJg+cKrFvwU0+79pq+i9cKrFvwU0+79pq+i9NbYdvwBRwEAKGi6+NbYdvwBRwEAKGi6+qdWRvwBRwEDq2Qy/qdWRvwBRwEDq2Qy/qdWRvwBRwEDq2Qy/AuFQvwBRwEDt5uM+AuFQvwBRwEDt5uM+0Dq7vwBRwEDt5uM+0Dq7vwBRwEDt5uM+ONDUvwBRwEAKGi6+ONDUvwBRwEAKGi6+ukI6v41Vzb+7zrc+SP4Qv4tVzb+iagy+Xgh9v4tVzb/bMuO+Xgh9v4tVzb/bMuO+OIm0v41Vzb+iagy+AOefv4tVzb+7zrc+0p4Bv4jSr0C6ng0/ArSnv4jSr0C6ng0/tH/Hv4jSr0BMYFi+3w6EvojSr0BMYFi+bINov4jSr0BODS+/bINov4jSr0BODS+/AAAAMwAAAD8AAEA/XI8CPwAAgD8AAAA/zcxMPwAAAD/Tbno/lQMtP5qZGT8AAAA/EB1kP720cT/OzMw+AAAAP/DiGz+9tHE/z8xMPgAAAD8tkQU/lQMtP6bd9D6VAy0/zcxMPwAAAAAAAAAzAAAAAAAAgD5cjwI/AACAPwAAAAAgOsg+vbRxP5qZGT8AAAAAgBffPb20cT/OzMw+AAAAAJglsjyVAy0/z8xMPgAAAACamRk/AAAAP83MTD8AAAA/AAAAMwAAAD8AAIA/AAAAP8/MTD4AAAA/zszMPgAAAD+amRk/AAAAAM7MzD4AAAAAz8xMPgAAAADMzEw/AAAAAAAAADMAAAAAAACAPwAAAABCYCW+yeUfvw+cQ79CYCW+yeUfvw+cQ79CYCW+yeUfvw+cQ7+CcwY/6pVSv/cGX76CcwY/6pVSv/cGX77pt48+CYo/v7HhGT/pt48+CYo/v7HhGT/1Shm/z2YFv4y5Gz/1Shm/z2YFv4y5Gz+MSlq/Dr7wvjAqab6MSlq/Dr7wvjAqab66SQw/F9lOP/aXXb66SQw/F9lOP/aXXb4U0AS+dZMoP9bFPb8U0AS+dZMoP9bFPb8U0AS+dZMoP9bFPb81Xpo+aW9AP90kFj81Xpo+aW9AP90kFj8FxQ+/pSwTP+xRGD8FxQ+/pSwTP+xRGD+TOlG/guIHP3h6Zb6TOlG/guIHP3h6Zb6oV+o+kX77vru4PT+fzTo/PE4hv57vh77rczW9LSFfvpqZeb/rczW9LSFfvpqZeb9UUme//mWXPjarnr4vbhO/yXa+PVfsTz+QoPg+VOPlPo4GQD/ZXxa/S1mGu0kuTz+XkG+/MLsnvq7Yn74Zc0c/+zoQP7G/jL4FxQ+9/KlxPgKaeL8FxQ+9/KlxPgKaeL8dABwAEQAdABEAEwAXABYABQAXAAUAAwAKAAEABAAEAAYACAAEAAgACgAaABgAAAAaAAAACQAZABcAAwAZAAMAAgAWABsABwAWAAcABQAbABoACQAbAAkABwAQAAsADgAOABQAEgAOABIAEAAeAB0AEwAeABMAFQAcAB8ADAAcAAwAEQAgAB4AFQAgABUADQAfACEADwAfAA8ADAA="
}
]
}

11
web/src/components/LargeStar.vue
View File

@ -28,7 +28,8 @@ onMounted(async () => {
const renderer = new THREE.WebGLRenderer({ canvas: canvas ?? undefined });
renderer.setClearAlpha(0.0);
const scene = new THREE.Scene();
const model = await loader.loadAsync("/models/generic.gltf");
const model = await loader.loadAsync("/models/banana.gltf");
const clock = new THREE.Clock();
model.scene.traverse((child) => {
if (child.isMesh) {
child.material = new THREE.MeshToonMaterial({
@ -67,9 +68,9 @@ onMounted(async () => {
const rgb = getRGB(props.star.core.color);
const starShader = StarShader;
starShader.uniforms.newRed.value = rgb[0] / 256;
starShader.uniforms.newGreen.value = rgb[1] / 256;
starShader.uniforms.newBlue.value = rgb[2] / 256;
starShader.uniforms.red.value = rgb[0] / 256;
starShader.uniforms.green.value = rgb[1] / 256;
starShader.uniforms.blue.value = rgb[2] / 256;
console.log(starShader.uniforms);
@ -79,6 +80,8 @@ onMounted(async () => {
function animate() {
model.scene.rotation.y += 0.01;
model.scene.rotation.z = Math.sin(clock.getElapsedTime()) / 6;
model.scene.rotation.x = Math.cos(clock.getElapsedTime()) / 5;
requestAnimationFrame(animate);
resizeCanvas();
composer.render();

18
web/src/scripts/star_shader.ts
View File

@ -8,9 +8,9 @@ const StarShader = {
uniforms: {
tDiffuse: { value: null },
opacity: { value: 1.0 },
newRed: { value: 1.0 },
newGreen: { value: 1.0 },
newBlue: { value: 1.0 },
red: { value: 1.0 },
green: { value: 1.0 },
blue: { value: 1.0 },
},
vertexShader: /* glsl */ `
@ -29,9 +29,9 @@ const StarShader = {
uniform float opacity;
uniform sampler2D tDiffuse;
uniform float newRed;
uniform float newGreen;
uniform float newBlue;
uniform float red;
uniform float green;
uniform float blue;
varying vec2 vUv;
@ -41,9 +41,9 @@ const StarShader = {
vec4 original_color = opacity * texel;
float brightness = (original_color.r + original_color.g + original_color.b) / 3.0;
if (original_color.a > 0.0) {
gl_FragColor.r = newRed * brightness;
gl_FragColor.g = newGreen * brightness;
gl_FragColor.b = newBlue * brightness;
gl_FragColor.r = red * brightness;
gl_FragColor.g = green * brightness;
gl_FragColor.b = blue * brightness;
}
gl_FragColor.a = original_color.a;