From 5661f65a6521d368487e803f999bd2484fea9138 Mon Sep 17 00:00:00 2001 From: arcadeperfect Date: Tue, 26 Nov 2024 19:27:06 -0500 Subject: [PATCH] website updates --- CNAME | 1 + assets/gltf/sphere.bin | Bin 12000 -> 12000 bytes assets/gltf/sphere.gltf | 2 +- index copy.html | 88 +++++++++ index.html | 28 ++- src/main.rs | 2 +- styles copy.css | 384 ++++++++++++++++------------------------ styles.css | 85 ++++----- 8 files changed, 306 insertions(+), 284 deletions(-) create mode 100644 CNAME create mode 100644 index copy.html 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 649527223d383722057ab4d36011d4c8232c13ad..5e1c6453e58b4678a660d2e9096c003b49bcb899 100644 GIT binary patch delta 959 zcmaD5`yh710maRYS`QfO3wC|A-u$)9o&g9*WuGpow%?*O-*WqN8+%gOAp3w|@(i_| z9*M7ySy2N6edNMaKS^S--R3h9U>}jsZm>@}>li>1$zuPyB@!yoyL{+DMxc`l@2ekqlCS&smT6s`y6YKXHnStxFm3h zPcBrR;L;;eVVBhsVGHsmx$Mak)$Y{WtLoUNaW{euqJ(|W@~Jf_ct8#!fz6Ae0pud8 PC2n9iP1?+)dyf$S@kwp* delta 1156 zcmaD5`yh710Y#fFO7ktr#gh*z+SD^I7qxk?qt^bQ)I&Q`*&uyePp-5sYu#-}Dw_cU zCZA9&v{8sKwLe`_Z9jE;i!G^apeJ_KH`qgs15(7ZwkMYZAIX zpoctwhLInw$a=wsZLCYM*}h + + + + + + 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:

+
    +
  • Arbitrarily define edges to render, not render every triangle
    • +
  • Varying colors per mesh, no textures
    • +
  • Optionally "Solid" wireframe, ie it occludes its own back faces and objects behind it
    • +
  • Outline for silhouette when visible edges are sparse
    • +
  • Support gltf animation
    • +
+
+

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:

+
    +
  • Wireframe thickness cannot be set because this is not supported by wgpu line primitives
    • +
  • Clip space method for outline isn't ideal, a stencil buffer approach would be better but I couldn't work out how to do that with wgpu / bevy render pipeline
    • +
  • Assets are post processed in a system triggered by SceneInstanceReady events. Something that ties into Bevy's async asset loading would be much better
    • +
  • The mesh building algorithm is very slow with large meshes
    • +
+
+
+ +
+
+ +
+ + + + + + \ 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; */ } -