diff --git a/index copy.html b/index copy.html deleted file mode 100644 index 68c04f2..0000000 --- a/index copy.html +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - - 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 7d914ed..667e846 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Bevy Vector Style + Bevy Vaporwave diff --git a/src/main.rs b/src/main.rs index 0f672c2..429c35a 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::Sphere) + .insert_resource(VisibleModel::Astro) .insert_resource(ClearColor(Color::BLACK)) .insert_resource(ShaderSettings::default()) .add_plugins( diff --git a/styles copy.css b/styles copy.css deleted file mode 100644 index 1aacb02..0000000 --- a/styles copy.css +++ /dev/null @@ -1,210 +0,0 @@ -: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 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; -} - -@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 { - 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 */ - - /* color: inherit; */ -} - -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 20px 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; -} - -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 canvas { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.video-wrapper { - position: relative; - 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) { - body { - font-size: 14px; - } - - .main-column { - padding: 10px; - } - - .main-heading { - font-size: 80px; - margin-top: 0; - } - - .video-wrapper { - width: 100%; - left: 0; - } -} - - -.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; */ -} -