Engine-3D: Kamera-Presets + Weiss-Modus im render3d-Viewport

Der Engine-3D-Viewport (render3d/wgpu) war reines Ansehen (Orbit/Zoom). Jetzt:

- Kamera-Presets als Overlay: Top/Unten/Vorne/Hinten/Links/Rechts/Iso.
  Richtungen exakt wie der three.js-Pfad (applyView3d); framen die aktuelle
  Modell-Bounding-Box (fitTargetDist) und springen auf den Preset-Winkel,
  danach Orbit/Pan/Zoom weiter frei. Rein JS.
- Render-Modus Schattiert/Weiss: mode-Uniform in Globals (WGSL/Rust),
  Weiss = beleuchtetes Clay-Grau; wasm-Binding set_render_mode_white,
  durchgereicht via useWasm3dRenderer.
- Overlay-CSS self-contained (wasm3dOverlay.css), Theme-aware.

three.js unangetastet. Auswahl/Grips/Zeichnen + Wireframe/HLR bewusst noch
offen (naechste Scheibe).
This commit is contained in:
2026-07-03 20:56:56 +02:00
parent bd80eb1c59
commit b6d14ca2b2
6 changed files with 276 additions and 13 deletions
+9
View File
@@ -35,6 +35,8 @@ struct Globals {
sky_color: [f32; 4],
ground_color: [f32; 4],
sun_color: [f32; 4],
/// x = Darstellungsart (0 = shaded/Material, 1 = weiss/Clay); siehe shaders.rs.
mode: [f32; 4],
}
impl Default for Globals {
@@ -49,6 +51,7 @@ impl Default for Globals {
ground_color: [0.30, 0.29, 0.27, 1.0],
// Directional-Sonne: warmweiss, moderat.
sun_color: [0.55, 0.53, 0.49, 1.0],
mode: [0.0, 0.0, 0.0, 0.0],
}
}
}
@@ -258,6 +261,12 @@ impl Renderer {
self.globals.sun_color = [sun[0], sun[1], sun[2], 1.0];
}
/// Darstellungsart umschalten: `true` = weisses Clay-Material (Beleuchtung
/// bleibt aktiv, siehe shaders.rs), `false` = normale Bauteil-/Vertexfarbe.
pub fn set_white_mode(&mut self, white: bool) {
self.globals.mode[0] = if white { 1.0 } else { 0.0 };
}
/// Stellt sicher, dass ein Tiefenpuffer passend zur Ziel-Groesse existiert.
fn ensure_depth(&mut self, device: &wgpu::Device, w: u32, h: u32) {
let ok = matches!(&self.depth, Some(d) if d.width == w && d.height == h);
+8 -1
View File
@@ -16,6 +16,7 @@
// sky_color : vec4<f32> Himmels-Ambient (rgb; von oben)
// ground_color : vec4<f32> Boden-Ambient (rgb; von unten)
// sun_color : vec4<f32> Farbe/Staerke des Directional-Lights (rgb)
// mode : vec4<f32> x = Darstellungsart (0 = shaded/Material, 1 = weiss/Clay)
//
// Vertex-Attribute: position (world), normal (world), color (Albedo).
@@ -28,6 +29,7 @@ struct Globals {
sky_color : vec4<f32>,
ground_color : vec4<f32>,
sun_color : vec4<f32>,
mode : vec4<f32>,
};
@group(0) @binding(0) var<uniform> globals : Globals;
@@ -65,7 +67,12 @@ fn fs_main(in : VsOut) -> @location(0) vec4<f32> {
// Gerichteter Lambert-Anteil (Sonne); Rueckseiten (n.l < 0) tragen nichts bei.
let diffuse = max(dot(n, l), 0.0) * globals.sun_color.rgb;
var shaded = in.color * (ambient + diffuse);
// Weiss-Modus (Clay-Look): Material-/Vertexfarbe durch ein einheitliches
// Hellgrau ersetzen, Beleuchtung (Ambient + Directional) bleibt aktiv — so
// liest sich die Volumetrie ohne Bauteil-Farben ab (Vectorworks „white").
let albedo = mix(in.color, vec3<f32>(0.82, 0.82, 0.80), globals.mode.x);
var shaded = albedo * (ambient + diffuse);
// Sanfte Kantenbetonung: senkrechte Flaechen (n.y nahe 0) minimal abdunkeln,
// damit sich Waende vom hellen Deckel/Boden abheben (ohne Postprocessing).
+7
View File
@@ -216,6 +216,13 @@ impl WebModelRenderer {
};
}
/// Darstellungsart umschalten: `true` = weisses Clay-Material (beleuchtet,
/// ohne Bauteil-Farben — Vectorworks „white"), `false` = normale Material-
/// farbe (shaded, Default). Wirkt erst beim naechsten `render`.
pub fn set_render_mode_white(&mut self, white: bool) {
self.renderer.set_white_mode(white);
}
/// Surface an eine neue Pixelgroesse anpassen (DPR beachtet der Aufrufer).
pub fn resize(&mut self, width: u32, height: u32) {
let (w, h) = (width.max(1), height.max(1));