From 94b983a76ca6b2bf69217274bd5a5be8100470f9 Mon Sep 17 00:00:00 2001 From: arcadeperfect Date: Mon, 2 Sep 2024 23:28:33 -0400 Subject: [PATCH] web dev --- .idea/workspace.xml | 104 ++++++++++ .vscode/settings.json | 3 + index copy.html | 100 ++++++++++ index.html | 108 +++++++++- src/blender/assign_unique_indices.py | 59 +++--- src/main.rs | 46 +++-- src/window_resize_plugin.rs | 21 ++ styles copy.css | 40 ++++ styles.css | 286 +++++++++++++++++++++++++++ 9 files changed, 714 insertions(+), 53 deletions(-) create mode 100644 .idea/workspace.xml create mode 100644 .vscode/settings.json create mode 100644 index copy.html create mode 100644 src/window_resize_plugin.rs create mode 100644 styles copy.css create mode 100644 styles.css diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..4bf35c4 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1725297733529 + + + + + + \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index copy.html b/index copy.html new file mode 100644 index 0000000..f3bb05a --- /dev/null +++ b/index copy.html @@ -0,0 +1,100 @@ + + + + + + Bevy Vector Style + + + +
+
+

Bevy Vector Style

+
+ +
+
+
+ +
+

Second Header

+
+ +
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ + + + + diff --git a/index.html b/index.html index 1bd10d9..3561dd6 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,114 @@ - + + + + + + + + Bevy Vector Style + + + + +
+
+

Bevy Vector Style

+
+

Second Header

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ + SIDEBAR +
+
+ - + \ No newline at end of file diff --git a/src/blender/assign_unique_indices.py b/src/blender/assign_unique_indices.py index 41c4ee6..e9c9ab9 100644 --- a/src/blender/assign_unique_indices.py +++ b/src/blender/assign_unique_indices.py @@ -1,43 +1,46 @@ -''' -this script assigns a unique index to each vertex in the active object and stores it as a custom attribute. -this is we can be sure bevy and blender are using the same indices for the vertices. -''' - import bpy import bmesh -def add_vertex_index_attribute(): - # Get the active object - obj = bpy.context.active_object +def add_indices(): + selected_objects = bpy.context.selected_objects - # Check if the object exists and is a mesh - if obj is None or obj.type != 'MESH': - print("Please select a mesh object") + if not selected_objects: + print("No objects selected. Please select at least one object.") return - # Create a BMesh from the object data - bm = bmesh.new() - bm.from_mesh(obj.data) + for primitive_idx, obj in enumerate(selected_objects): + if obj.type != 'MESH': + print(f"Skipping {obj.name}: Not a mesh object") + continue + + # Assign primitive index to the object + obj["gltf_primitive_index"] = primitive_idx + + # Create a BMesh from the object data + bm = bmesh.new() + bm.from_mesh(obj.data) - # Ensure lookup table is up-to-date - bm.verts.ensure_lookup_table() + # Ensure lookup table is up-to-date + bm.verts.ensure_lookup_table() - # Create a new custom attribute layer - index_layer = bm.verts.layers.int.new('_INDEX') + # Create a new custom attribute layer for vertex indices + vert_index_layer = bm.verts.layers.int.new('_VERT_INDEX') - # Iterate through all vertices and assign unique IDs - for idx, v in enumerate(bm.verts): - v[index_layer] = idx + # Iterate through all vertices and assign unique IDs + for idx, v in enumerate(bm.verts): + v[vert_index_layer] = idx - # Update the mesh with BMesh data - bm.to_mesh(obj.data) - obj.data.update() + # Update the mesh with BMesh data + bm.to_mesh(obj.data) + obj.data.update() - # Free the BMesh - bm.free() + # Free the BMesh + bm.free() - print(f"Added '_INDEX' attribute to {len(obj.data.vertices)} vertices") + print(f"Object: {obj.name}") + print(f" Assigned primitive index: {primitive_idx}") + print(f" Added '_VERT_INDEX' attribute to {len(obj.data.vertices)} vertices") # Run the function -add_vertex_index_attribute() \ No newline at end of file +add_indices() \ No newline at end of file diff --git a/src/main.rs b/src/main.rs index a8530b0..0d1717b 100644 --- a/src/main.rs +++ b/src/main.rs @@ -12,6 +12,9 @@ use bevy::{ scene::SceneInstanceReady, }; +// mod window_resize_plugin; +// use window_resize_plugin::WindowResizePlugin; + use bevy_egui::{egui, EguiContexts, EguiPlugin}; use bevy_panorbit_camera::{PanOrbitCamera, PanOrbitCameraPlugin}; use fill_material::FillMaterial; @@ -79,6 +82,7 @@ const ATTRIBUTE_INDEX: MeshVertexAttribute = fn main() { App::new() + // .add_plugins(WindowResizePlugin) .insert_resource(ClearColor(Color::BLACK)) .insert_resource(ShaderSettings::default()) .add_plugins( @@ -138,38 +142,38 @@ fn setup( graph: graph.clone(), }); - // let astro = commands - // .spawn(( - // SceneBundle { - // scene: assets.load(GltfAssetLabel::Scene(0).from_asset(ASTROPATH)), - // transform: Transform::from_xyz(0.0, -1.2, 0.0) - // .with_rotation(Quat::from_rotation_y(0.0)) - // .with_scale(Vec3::splat(1.)), - // ..default() - // }, - // WireframeSettings { - // gltf_path: None, - // // gltf_path: Some(String::from(ASTROPATH)), - - // }, - // )) - // .id(); - - let torus = commands + let astro = commands .spawn(( SceneBundle { - scene: assets.load(GltfAssetLabel::Scene(0).from_asset(TORUSPATH)), - transform: Transform::from_xyz(0.0, 0.0, 0.0) + scene: assets.load(GltfAssetLabel::Scene(0).from_asset(ASTROPATH)), + transform: Transform::from_xyz(0.0, -1.2, 0.0) .with_rotation(Quat::from_rotation_y(0.0)) .with_scale(Vec3::splat(1.)), ..default() }, WireframeSettings { - + // gltf_path: None, + // gltf_path: Some(String::from(ASTROPATH)), + }, )) .id(); + // let torus = commands + // .spawn(( + // SceneBundle { + // scene: assets.load(GltfAssetLabel::Scene(0).from_asset(TORUSPATH)), + // transform: Transform::from_xyz(0.0, 0.0, 0.0) + // .with_rotation(Quat::from_rotation_y(0.0)) + // .with_scale(Vec3::splat(1.)), + // ..default() + // }, + // WireframeSettings { + + // }, + // )) + // .id(); + // let fox = commands // .spawn(( // SceneBundle { diff --git a/src/window_resize_plugin.rs b/src/window_resize_plugin.rs new file mode 100644 index 0000000..449c870 --- /dev/null +++ b/src/window_resize_plugin.rs @@ -0,0 +1,21 @@ +use bevy::prelude::*; +use bevy::window::WindowResized; + +pub struct WindowResizePlugin; + +impl Plugin for WindowResizePlugin { + fn build(&self, app: &mut App) { + app.add_systems(Update, window_resize_system); + } +} + +fn window_resize_system(mut resize_events: EventReader, mut windows: Query<&mut Window>) { + for event in resize_events.read() { + let aspect_ratio = 16.0 / 9.0; // You can adjust this to your desired aspect ratio + let new_height = event.width / aspect_ratio; + + if let Ok(mut window) = windows.get_single_mut() { + window.resolution.set(event.width, new_height); + } + } +} \ No newline at end of file diff --git a/styles copy.css b/styles copy.css new file mode 100644 index 0000000..3535c0a --- /dev/null +++ b/styles copy.css @@ -0,0 +1,40 @@ +body, html { + margin: 0; + padding: 0; + height: 100%; +} +.container { + display: flex; + flex-direction: column; + height: 100vh; +} +.row { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} +.header { + flex: 0 0 auto; +} +.content { + flex: 1 0 auto; + overflow: hidden; /* Prevents scrolling within this container */ +} +.footer { + flex: 0 0 auto; +} +#wasm-container { + width: 50%; + height: 0; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + position: relative; + background-color: red; +} +#wasm-container canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..20b596e --- /dev/null +++ b/styles.css @@ -0,0 +1,286 @@ +:root { + --base-main-bg: black; + --base-main-text: white; + --base-sidebar-bg: white; + --base-sidebar-text: black; + --heading-weight: normal; + + --accent-main: #1fe0ac; + --accent-sidebar: #00ff15; +} + +.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 { + --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 { + --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 { + --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 { + 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: inherit; +} + +ul { + list-style-type: none; + text-decoration: none; +} + +/* END RESET */ + +/* BASE STYLING */ + +body { + font-family: "Roboto", sans-serif; + /* font-family: "Roboto Mono", monospace; */ +} + +h1 { + font-size: 145px; + font-weight: var(--heading-weight); +} + +p { + font-size: 17px; + /* max-width: 650px; */ +} + +/* END BASE STYLING */ + +/* GRID LAYOUT */ + +.grid { + display: grid; + grid-template-columns: 1fr 250px; + height: 100vh; +} + +.main-column { + background-color: var(--base-main-bg); + color: var(--base-main-text); + padding-left: 0; + margin-left: 0; +} + +.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 { + display: flex; + flex-direction: column; + gap: 10px; /* Adjust the gap between menu items */ + 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 */ + 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; /* Adjust the bottom margin as needed */ +} + +#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%; +} + + +/* 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; + } + + .main-column, .sidebar-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; + } + + .social-links { + font-size: 16px; + flex-direction: row; + } + + .video-wrapper { + width: 100%; + left: 0; + } +}