Skip to content

Commit

Permalink
website updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@arcadeperfect
arcadeperfect committed Nov 27, 2024
1 parent 42502c4 commit 5661f65
Show file tree
Hide file tree
Showing 8 changed files with 306 additions and 284 deletions.
1 change: 1 addition & 0 deletions CNAME
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
vaporwave.alexharding.ooo
Binary file modified assets/gltf/sphere.bin
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion assets/gltf/sphere.gltf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
88 changes: 88 additions & 0 deletions index copy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bevy Vector Style</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap"
rel="stylesheet">
</head>

<body class="color-scheme-home">
<div class="grid">
<div class="main-column">
<a href="/" class="back-arrow">alexharding.ooo</a>
<h1 class="main-heading">Bevy Vaporwave</h1>
<div id="wasm-container"></div>
<br>
<h2><a href="https://github.com/arcadeperfect/bevy_vaporwave">Github</a></h2>
<br>
<p>Side project to learn the basics of wgsl and develop a look for my <a href="https://alexharding.ooo/posts/Rustroneer/">main Bevy project</a>.</p>
<br>
<p>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 <a href="https://github.com/arcadeperfect/bevy_vaporwave">Have at it</a>.</p>
<br>
<p>Features:</p>
<ul>
<li>Arbitrarily define edges to render, not render every triangle </li>
<li>Varying colors per mesh, no textures</li>
<li>Optionally "Solid" wireframe, ie it occludes its own back faces and objects behind it</li>
<li>Outline for silhouette when visible edges are sparse</li>
<li>Support gltf animation</li>
</ul>
<br>
<p>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.</p>
<br>
<p>Issues:</p>
<ul>
<li>Wireframe thickness cannot be set because this is not supported by wgpu line primitives</li>
<li>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</li>
<li>Assets are post processed in a system triggered by SceneInstanceReady events. Something that ties into Bevy's async asset loading would be much better </li>
<li>The mesh building algorithm is very slow with large meshes</li>
</ul>
<br>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/rfDhslnPBpA?si=I2cgElg45rW-49li&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
</div>

</div>
</div>

<script type="module">
import init from './out/bevy_vaporwave.js';

async function run() {
const wasmContainer = document.getElementById('wasm-container');

const observer = new MutationObserver((mutations) => {
for (let mutation of mutations) {
for (let node of mutation.addedNodes) {
if (node.tagName === 'CANVAS') {
node.style.width = '100%';
node.style.height = '100%';
wasmContainer.appendChild(node);
observer.disconnect();
}
}
}
});

observer.observe(document.body, { childList: true });

await init();
}

run();
</script>
</body>

</html>
28 changes: 27 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@
<body class="color-scheme-home">
<div class="grid">
<div class="main-column">
<a href="/" class="back-arrow">alexharding.ooo</a>
<!-- <a href="https://alexharding.ooo" class="back-arrow">alexharding.ooo</a> <a href="https://bsky.app/profile/alexharding.bsky.social" class="back-arrow">bluesky</a> -->
<span class="nav-links">
<a href="https://alexharding.ooo" class="nice-links">alexharding.ooo</a>
&nbsp;&nbsp;&nbsp;
<a href="https://bsky.app/profile/alexharding.bsky.social" class="nice-links">bluesky</a>
</span>
<h1 class="main-heading">Bevy Vaporwave</h1>
<div id="wasm-container"></div>
<br>
Expand Down Expand Up @@ -42,6 +47,27 @@ <h2><a href="https://github.com/arcadeperfect/bevy_vaporwave">Github</a></h2>
<li>The mesh building algorithm is very slow with large meshes</li>
</ul>
<br>
<h2>Blender Workflow</h2>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/rfDhslnPBpA?si=I2cgElg45rW-49li&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<br>
<br>
<span class="nav-links">
<a href="https://alexharding.ooo" class="nice-links">alexharding.ooo</a>
&nbsp;&nbsp;&nbsp;
<a href="https://bsky.app/profile/alexharding.bsky.social" class="nice-links">bluesky</a>
</span>
<br>
<br>

</div>

</div>
Expand Down
2 changes: 1 addition & 1 deletion src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Loading

0 comments on commit 5661f65

Please sign in to comment.