diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..4a7bdca --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +vaporwave.alexharding.ooo \ No newline at end of file diff --git a/assets/gltf/sphere.bin b/assets/gltf/sphere.bin index 6495272..5e1c645 100644 Binary files a/assets/gltf/sphere.bin and b/assets/gltf/sphere.bin differ diff --git a/assets/gltf/sphere.gltf b/assets/gltf/sphere.gltf index 8f5e2f7..3b332c4 100644 --- a/assets/gltf/sphere.gltf +++ b/assets/gltf/sphere.gltf @@ -16,7 +16,7 @@ { "extras":{ "gltf_primitive_index":0, - "gltf_primitive_extras":"{\"visibleEdges\": [[14, 2], [18, 3], [20, 4], [21, 5], [23, 10], [24, 2], [25, 6], [26, 3], [28, 4], [29, 8], [30, 5], [31, 9], [32, 6], [34, 8], [35, 9], [36, 10], [37, 6], [2, 12], [5, 15], [3, 17], [2, 18], [3, 20], [4, 21], [10, 22], [5, 23], [6, 24], [2, 27], [8, 28], [3, 29], [9, 30], [4, 31], [10, 32], [6, 33], [8, 35], [9, 36], [10, 38], [38, 36], [37, 33], [37, 38], [37, 32], [38, 32], [23, 36], [23, 30], [36, 30], [31, 35], [31, 28], [35, 28], [29, 34], [29, 26], [34, 26], [27, 33], [27, 24], [33, 24], [25, 32], [25, 22], [32, 22], [30, 31], [30, 21], [31, 21], [28, 20], [29, 20], [26, 27], [26, 18], [27, 18], [24, 14], [25, 14], [22, 23], [22, 15], [23, 15], [20, 17], [17, 18], [17, 12], [18, 12], [12, 14]]}" + "gltf_primitive_extras":"{\"visibleEdges\": [[14, 2], [15, 1], [18, 3], [21, 5], [22, 1], [23, 10], [24, 2], [25, 6], [26, 3], [27, 7], [29, 8], [30, 5], [31, 9], [32, 6], [33, 7], [34, 8], [35, 9], [36, 10], [39, 7], [40, 8], [41, 9], [1, 14], [5, 15], [2, 18], [10, 22], [5, 23], [6, 24], [1, 25], [7, 26], [2, 27], [8, 28], [3, 29], [9, 30], [10, 32], [6, 33], [7, 34], [8, 35], [9, 36], [41, 36], [41, 40], [41, 35], [40, 35], [40, 39], [40, 34], [39, 34], [23, 36], [23, 30], [36, 30], [31, 35], [31, 28], [35, 28], [29, 34], [29, 26], [34, 26], [27, 33], [33, 24], [25, 32], [25, 22], [32, 22], [30, 31], [30, 21], [31, 21], [28, 29], [26, 27], [26, 18], [27, 18], [24, 25], [24, 14], [25, 14], [22, 23], [22, 15], [23, 15]]}" }, "mesh":0, "name":"Icosphere" diff --git a/index copy.html b/index copy.html new file mode 100644 index 0000000..68c04f2 --- /dev/null +++ b/index copy.html @@ -0,0 +1,88 @@ + + + + + + + Bevy Vector Style + + + + + +
+
+ alexharding.ooo +

Bevy Vaporwave

+
+
+

Github

+
+

Side project to learn the basics of wgsl and develop a look for my main Bevy project.

+
+

I'm learning. The code is pretty garbage. I doubt I will continue work on this, but I will roll what I learned into the main project and hopefully it will be better that time. If you're intetested though Have at it.

+
+

Features:

+ +
+

I developed a simple workflow with Blender which allows you to mark edges for rendering, paint vertex colors and store the data in a custom gltf attribute (see video below). It isn't great but it does the job. The blender files and a python script are in the repo. Bevy then builds a mesh out of line primitives for the wireframe and uses the original mesh for a fill. The mesh is duplicated, dilated along normals and pushed backwards in clip space by a shader to create the outline.

+
+

Issues:

+ +
+
+ +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 7a5bf1e..7d914ed 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,12 @@
- alexharding.ooo + + + alexharding.ooo +     + bluesky +

Bevy Vaporwave


@@ -42,6 +47,27 @@

Github

  • The mesh building algorithm is very slow with large meshes

    • +

    Blender Workflow

    +
    + +
    +
    +
    + + alexharding.ooo +     + bluesky + +
    +
    +
    diff --git a/src/main.rs b/src/main.rs index 429c35a..0f672c2 100644 --- a/src/main.rs +++ b/src/main.rs @@ -110,7 +110,7 @@ const ATTRIBUTE_SMOOTHED_NORMAL: MeshVertexAttribute = fn main() { App::new() - .insert_resource(VisibleModel::Astro) + .insert_resource(VisibleModel::Sphere) .insert_resource(ClearColor(Color::BLACK)) .insert_resource(ShaderSettings::default()) .add_plugins( diff --git a/styles copy.css b/styles copy.css index 8583ea3..1aacb02 100644 --- a/styles copy.css +++ b/styles copy.css @@ -1,286 +1,210 @@ :root { --base-main-bg: black; --base-main-text: rgb(35, 174, 151); - --base-sidebar-bg: #000000; - --base-sidebar-text: rgb(35, 174, 151); --heading-weight: normal; - + --accent-main: #c6e01f; + --link: #ff56b9; +} + +.color-scheme-home { + --base-main-bg: rgb(34, 34, 34); + --base-main-text: rgb(35, 174, 151); + --heading-weight: normal; --accent-main: #1fe0ac; - --accent-sidebar: #1fe0ac; - } - - .color-scheme-home { - --base-main-bg: #222; - --base-main-text: #EEE; - --base-sidebar-bg: #EEE; - --base-sidebar-text: #222; - --accent-main: #EEE; - --accent-sidebar: #00ff15; - } - - /* Alternate Color Scheme 1 */ - .color-scheme-1 { +} + +/* Alternate Color Scheme 1 */ +.color-scheme-1 { --base-main-bg: #f0f8ff; --base-main-text: #f50000; - --base-sidebar-bg: #333; - --base-sidebar-text: #f0f8ff; --accent-main: #06ff0e; - --accent-sidebar: #00ff15; - } - - /* Alternate Color Scheme 2 */ - .color-scheme-2 { +} + +/* Alternate Color Scheme 2 */ +.color-scheme-2 { --base-main-bg: #00ff15; --base-main-text: #111; - --base-sidebar-bg: #111; - --base-sidebar-text: #ffebcd; --accent-main: #ff56b9; - --accent-sidebar: #00ff15; - } - - .color-scheme-3 { +} + +.color-scheme-3 { --base-main-bg: rgb(10, 10, 10); --base-main-text: #ffebcd; - --base-sidebar-bg: #ffebcd; - --base-sidebar-text: rgb(10, 10, 1); --accent-main: #ff56b9; - --accent-sidebar: #00ff15; - } - - @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); - - /* RESET */ - - *, *::before, *::after { +} + +@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + +/* RESET */ +*, *::before, *::after { box-sizing: border-box; - } - * { +} +* { margin: 0; - } - - body { +} + +body { line-height: 1.5; -webkit-font-smoothing: antialiased; - } - img, picture, video, canvas, svg { +} +img, picture, video, canvas, svg { display: block; max-width: 100%; - } - input, button, textarea, select { +} +input, button, textarea, select { font: inherit; - } - p, h1, h2, h3, h4, h5, h6 { +} +p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; - } - #root, #__next { +} +#root, #__next { isolation: isolate; - } - - a { +} + +a { text-decoration: none; - color: inherit; - } - - ul { + color: var(--link) !important; /* Override the .main-column a color */ + + /* color: inherit; */ +} + +ul { list-style-type: none; text-decoration: none; - } - - /* END RESET */ - - /* BASE STYLING */ - - body { +} + +/* END RESET */ + +/* BASE STYLING */ +body { font-family: "Roboto", sans-serif; - /* font-family: "Roboto Mono", monospace; */ - } - - h1 { - font-size: 145px; +} + +h1 { + font-size: 50px; font-weight: var(--heading-weight); - } - - p { +} + +p { font-size: 17px; - /* max-width: 650px; */ - } - - /* END BASE STYLING */ - - /* GRID LAYOUT */ - - .grid { - display: grid; - grid-template-columns: 1fr 250px; - height: 100vh; - } - - .main-column { +} + +/* END BASE STYLING */ + +/* MAIN LAYOUT */ +.grid { + display: block; + min-height: 100vh; +} + +.main-column { background-color: var(--base-main-bg); color: var(--base-main-text); - padding-left: 0; - margin-left: 0; - } - - .main-column a { + padding: 20px 20px 0 20px; /* top right bottom left */ +} + +.main-column a { color: var(--accent-main); - } - - .center-column { - background-color: var(--base-main-bg); - } - - .sidebar-column { - background-color: var(--base-sidebar-bg); - color: var(--base-sidebar-text); - position: relative; - z-index: 1; - } - - /* END GRID LAYOUT */ - - /* HOME PAGE STYLING */ - - .main-menu { +} + +/* MAIN COLUMN STYLING */ +.main-column p, +.main-column ul, +.main-column ol, +.main-column li { + max-width: 750px; +} + +li { + list-style-type: square; +} + + + +/* MENU STYLING */ +.main-menu { display: flex; flex-direction: column; - gap: 10px; /* Adjust the gap between menu items */ + gap: 10px; margin-left: -2px; padding-left: 0; font-size: 24px; - } - - a:hover { - font-family: 'Comic Sans MS', 'Comic Sans', cursive; /* Default font */ - } - - /* MAIN COLUMN STYLING */ - - .main-column p, - .main-column ul, - .main-column ol, - .main-column li { - max-width: 750px; /* Adjust the max width as needed */ - } - - li { - list-style-type: square; - } - - .main-heading { - margin-top: -40px; - margin-left: -9px; - } - - .main-column { - padding-left: 0px; - } - - /* SIDE BAR STYLING */ - - .social-links { - padding-left: 10px; - padding-top: 8px; - display: flex; - flex-direction: column; - gap: 10px; /* Adjust the gap between social links */ - position: relative; - z-index: 2; - } - - .big-side-text { - font-size: 200px; - line-height: 170px; - word-wrap: break-word; - overflow-wrap: break-word; /* Ensures compatibility across different browsers */ - font-weight: var(--heading-weight); - padding-top: 0px; - padding-left: 5px; - position: relative; - z-index: 1; - } - - /* VIDEO PLAYER STYLING */ - - .video-wrapper { - position: relative; - width: calc(100% + 20px); /* Account for padding on main column */ - left: -20px; /* Shift to the left to negate padding */ - padding-bottom: 56.25%; /* 16:9 aspect ratio */ +} + +a:hover { + font-family: 'Comic Sans MS', 'Comic Sans', cursive; +} + +/* Add spacing for smartphones */ +.content { + margin-bottom: 150px; +} + +#wasm-container { + width: 100%; height: 0; - overflow: hidden; - } - - .video-wrapper iframe { + padding-bottom: 56.25%; + position: relative; +} + +#wasm-container canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - } - - /* Add spacing for smartphones */ - .content { - margin-bottom: 150px; /* Adjust the bottom margin as needed */ - } - - #wasm-container { - width: 100%; - height: 0; - padding-bottom: 56.25%; +} + +.video-wrapper { position: relative; - - } - - #wasm-container canvas { + width: 750px; /* Explicitly set the width to match body text */ + margin: 20px 0; /* Aligns with the text on the left */ + padding-bottom: 56.25%; /* Maintains 16:9 aspect ratio */ + height: 0; + overflow: hidden; +} + +.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - } - - - /* Media Queries for Smartphones */ - - @media (max-width: 600px) { +} + + + +/* Media Queries for Smartphones */ +@media (max-width: 600px) { body { - font-size: 14px; - } - - .grid { - display:flex; - flex-direction: column; - grid-template-columns: 1fr; - grid-template-rows: auto auto; - height: auto; + font-size: 14px; } - - .main-column, .sidebar-column { - padding: 10px; + + .main-column { + padding: 10px; } - - .sidebar-column { - order: -1; /* Move sidebar above main content */ - } - + .main-heading { - font-size: 80px; - margin-top: 0; - } - - .big-side-text { - font-size: 100px; - line-height: 100px; + font-size: 80px; + margin-top: 0; } - - .social-links { - font-size: 16px; - flex-direction: row; - } - + .video-wrapper { - width: 100%; - left: 0; + width: 100%; + left: 0; } - } \ No newline at end of file +} + + +.back-arrow { + text-decoration: none; + color: var(--link) !important; /* Override the .main-column a color */ + /* or we could use more specific selector: .main-column .back-arrow */ + font-size: 20px; + display: block; + position: static; + /* margin-top: 20px; */ + margin-left: 4px; /* Align with heading */ + /* margin-bottom: -15px; */ +} + diff --git a/styles.css b/styles.css index 4c4c9b0..0201beb 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,5 @@ +/* CSS File */ + :root { --base-main-bg: black; --base-main-text: rgb(35, 174, 151); @@ -13,27 +15,9 @@ --accent-main: #1fe0ac; } -/* Alternate Color Scheme 1 */ -.color-scheme-1 { - --base-main-bg: #f0f8ff; - --base-main-text: #f50000; - --accent-main: #06ff0e; -} - -/* Alternate Color Scheme 2 */ -.color-scheme-2 { - --base-main-bg: #00ff15; - --base-main-text: #111; - --accent-main: #ff56b9; -} - -.color-scheme-3 { - --base-main-bg: rgb(10, 10, 10); - --base-main-text: #ffebcd; - --accent-main: #ff56b9; -} +/* Alternate Color Schemes omitted for brevity */ -@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap'); /* RESET */ *, *::before, *::after { @@ -64,8 +48,6 @@ p, h1, h2, h3, h4, h5, h6 { a { text-decoration: none; color: var(--link) !important; /* Override the .main-column a color */ - - /* color: inherit; */ } ul { @@ -100,7 +82,7 @@ p { .main-column { background-color: var(--base-main-bg); color: var(--base-main-text); - padding: 20px 20px 0 20px; /* top right bottom left */ + padding: 20px 100px 0 20px; /* top right bottom left */ } .main-column a { @@ -113,14 +95,13 @@ p { .main-column ol, .main-column li { max-width: 750px; + /* Text is aligned to the left by default */ } li { list-style-type: square; } - - /* MENU STYLING */ .main-menu { display: flex; @@ -135,24 +116,6 @@ a:hover { font-family: 'Comic Sans MS', 'Comic Sans', cursive; } -/* VIDEO PLAYER STYLING */ -.video-wrapper { - position: relative; - width: calc(100% + 20px); - left: -20px; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; -} - -.video-wrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - /* Add spacing for smartphones */ .content { margin-bottom: 150px; @@ -173,6 +136,22 @@ a:hover { height: 100%; } +/* VIDEO WRAPPER */ +.video-wrapper { + position: relative; + width: 100%; + max-width: 750px; + margin: 20px 0; + aspect-ratio: 16 / 9; /* Maintains the aspect ratio */ + overflow: hidden; +} + +.video-wrapper iframe { + width: 100%; + height: 100%; + border: 0; +} + /* Media Queries for Smartphones */ @media (max-width: 600px) { body { @@ -190,20 +169,24 @@ a:hover { .video-wrapper { width: 100%; - left: 0; + max-width: 100%; + margin: 10px 0; /* Adjusted for smaller screens */ + padding-bottom: 56.25%; /* Ensure aspect ratio is maintained */ } -} + .main-column p, + .main-column ul, + .main-column ol, + .main-column li { + max-width: 100%; + } +} -.back-arrow { +.nice-links { text-decoration: none; color: var(--link) !important; /* Override the .main-column a color */ - /* or we could use more specific selector: .main-column .back-arrow */ font-size: 20px; - display: block; + display: inline; position: static; - /* margin-top: 20px; */ margin-left: 4px; /* Align with heading */ - /* margin-bottom: -15px; */ } -