From 47d85ec36a1fd010478cf0eeb4b6dab7077fc805 Mon Sep 17 00:00:00 2001 From: arcadeperfect Date: Tue, 26 Nov 2024 21:58:49 -0500 Subject: [PATCH] tweaked html --- index copy.html | 105 ++++++++++++++++++++++ index.html | 53 +++++------ styles copy.css | 234 ++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 38 ++++---- 4 files changed, 379 insertions(+), 51 deletions(-) create mode 100644 index copy.html create mode 100644 styles copy.css diff --git a/index copy.html b/index copy.html new file mode 100644 index 0000000..7d0e8ae --- /dev/null +++ b/index copy.html @@ -0,0 +1,105 @@ + + + + + + + Bevy Vaporwave + + + + + + +
+
+ + + alexharding.ooo +     + bluesky + +

Bevy Vaporwave

+
+
+

Github

+
+

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

+
+

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 the repo is public.

+
+

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
    • +
+
+

Blender Workflow

+
+ +
+
+
+ + alexharding.ooo +     + bluesky + +
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 3b0b888..e225b8e 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,23 @@ - Bevy Vaporwave - + -
- alexharding.ooo     bluesky

Bevy Vaporwave

-
+

Github


@@ -86,22 +64,30 @@

Blender Workflow



-
- -
- \ No newline at end of file diff --git a/styles copy.css b/styles copy.css new file mode 100644 index 0000000..19b0bd6 --- /dev/null +++ b/styles copy.css @@ -0,0 +1,234 @@ +/* CSS File */ + +:root { + --base-main-bg: black; + --base-main-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; +} + +/* Alternate Color Schemes omitted for brevity */ + +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap'); + +/* RESET */ +*, *::before, *::after { + box-sizing: border-box; +} +* { + margin: 0; +} + +html { + scroll-behavior: auto !important; + overflow-anchor: none; +} + +body { + min-height: 100vh; + display: flex; + flex-direction: column; + position: relative; + top: 0; +} +/* body { + min-height: 100vh; + display: flex; + flex-direction: column; + position: relative; + top: 0; +} */ + +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} +input, button, textarea, select { + font: inherit; +} +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} +#root, #__next { + isolation: isolate; +} + +a { + text-decoration: none; + color: var(--link) !important; /* Override the .main-column a color */ +} + +ul { + list-style-type: none; + text-decoration: none; +} + +/* END RESET */ + +/* BASE STYLING */ +body { + font-family: "Roboto", sans-serif; +} + +h1 { + font-size: 50px; + font-weight: var(--heading-weight); +} + +p { + font-size: 17px; +} + +/* 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: 20px 100px 0 20px; /* top right bottom left */ +} + +.main-column a { + color: var(--accent-main); +} + +/* MAIN COLUMN STYLING */ +.main-column p, +.main-column ul, +.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; + flex-direction: column; + gap: 10px; + margin-left: -2px; + padding-left: 0; + font-size: 24px; +} + +a:hover { + font-family: 'Comic Sans MS', 'Comic Sans', cursive; +} + +/* Add spacing for smartphones */ +.content { + margin-bottom: 150px; +} + +/* #wasm-container { + width: 100%; + height: 0; + padding-bottom: 56.25%; + position: relative; +} */ + +#wasm-container { + width: 100%; + height: 0; + padding-bottom: 56.25%; + position: relative; + /* Create a new stacking context */ + isolation: isolate; +} + +/* #wasm-container canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} */ + +#wasm-container canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + /* Ensure canvas can receive focus without affecting page scroll */ + outline: none; + /* Optional: prevent touch scrolling on mobile */ + touch-action: none; +} + +/* 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 { + font-size: 14px; + } + + .main-column { + padding: 10px; + } + + .main-heading { + font-size: 80px; + margin-top: 0; + } + + .video-wrapper { + width: 100%; + 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%; + } +} + +.nice-links { + text-decoration: none; + color: var(--link) !important; /* Override the .main-column a color */ + font-size: 20px; + display: inline; + position: static; + margin-left: 4px; /* Align with heading */ +} + diff --git a/styles.css b/styles.css index 51f3fee..b052b95 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,3 @@ -/* CSS File */ - :root { --base-main-bg: black; --base-main-text: rgb(35, 174, 151); @@ -15,8 +13,6 @@ --accent-main: #1fe0ac; } -/* Alternate Color Schemes omitted for brevity */ - @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap'); /* RESET */ @@ -28,20 +24,14 @@ } html { - /* Remove smooth scrolling */ - scroll-behavior: auto; - /* Prevent automatic scroll anchoring */ + scroll-behavior: auto !important; overflow-anchor: none; } -/* Ensure the page content starts at the top */ body { min-height: 100vh; display: flex; flex-direction: column; - /* Force initial scroll position */ - position: relative; - top: 0; } body { @@ -64,7 +54,7 @@ p, h1, h2, h3, h4, h5, h6 { a { text-decoration: none; - color: var(--link) !important; /* Override the .main-column a color */ + color: var(--link) !important; } ul { @@ -99,7 +89,7 @@ p { .main-column { background-color: var(--base-main-bg); color: var(--base-main-text); - padding: 20px 100px 0 20px; /* top right bottom left */ + padding: 20px 100px 0 20px; } .main-column a { @@ -112,7 +102,6 @@ p { .main-column ol, .main-column li { max-width: 750px; - /* Text is aligned to the left by default */ } li { @@ -143,6 +132,7 @@ a:hover { height: 0; padding-bottom: 56.25%; position: relative; + isolation: isolate; } #wasm-container canvas { @@ -151,6 +141,13 @@ a:hover { left: 0; width: 100%; height: 100%; + outline: none; + touch-action: none; +} + +#wasm-container:focus, +#wasm-container canvas:focus { + outline: none; } /* VIDEO WRAPPER */ @@ -159,7 +156,7 @@ a:hover { width: 100%; max-width: 750px; margin: 20px 0; - aspect-ratio: 16 / 9; /* Maintains the aspect ratio */ + aspect-ratio: 16 / 9; overflow: hidden; } @@ -187,8 +184,8 @@ a:hover { .video-wrapper { width: 100%; max-width: 100%; - margin: 10px 0; /* Adjusted for smaller screens */ - padding-bottom: 56.25%; /* Ensure aspect ratio is maintained */ + margin: 10px 0; + padding-bottom: 56.25%; } .main-column p, @@ -201,10 +198,9 @@ a:hover { .nice-links { text-decoration: none; - color: var(--link) !important; /* Override the .main-column a color */ + color: var(--link) !important; font-size: 20px; display: inline; position: static; - margin-left: 4px; /* Align with heading */ -} - + margin-left: 4px; +} \ No newline at end of file