use cgmath::prelude::*; use rayon::prelude::*; use std::iter; use wgpu::util::DeviceExt; use winit::{ event::*, event_loop::EventLoop, keyboard::{KeyCode, PhysicalKey}, window::Window, }; #[cfg(target_arch = "wasm32")] use wasm_bindgen::prelude::*; mod camera; mod model; mod resources; mod texture; use model::{DrawLight, DrawModel, Vertex}; const NUM_INSTANCES_PER_ROW: u32 = 10; #[repr(C)] #[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)] struct CameraUniform { view_position: [f32; 4], view_proj: [[f32; 4]; 4], } impl CameraUniform { fn new() -> Self { Self { view_position: [0.0; 4], view_proj: cgmath::Matrix4::identity().into(), } } // UPDATED! fn update_view_proj(&mut self, camera: &camera::Camera, projection: &camera::Projection) { self.view_position = camera.position.to_homogeneous().into(); self.view_proj = (projection.calc_matrix() * camera.calc_matrix()).into() } } struct Instance { position: cgmath::Vector3, rotation: cgmath::Quaternion, } impl Instance { fn to_raw(&self) -> InstanceRaw { InstanceRaw { model: (cgmath::Matrix4::from_translation(self.position) * cgmath::Matrix4::from(self.rotation)) .into(), normal: cgmath::Matrix3::from(self.rotation).into(), } } } #[repr(C)] #[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)] #[allow(dead_code)] struct InstanceRaw { model: [[f32; 4]; 4], normal: [[f32; 3]; 3], } impl model::Vertex for InstanceRaw { fn desc() -> wgpu::VertexBufferLayout<'static> { use std::mem; wgpu::VertexBufferLayout { array_stride: mem::size_of::() as wgpu::BufferAddress, // We need to switch from using a step mode of Vertex to Instance // This means that our shaders will only change to use the next // instance when the shader starts processing a new instance step_mode: wgpu::VertexStepMode::Instance, attributes: &[ wgpu::VertexAttribute { offset: 0, // While our vertex shader only uses locations 0, and 1 now, in later tutorials we'll // be using 2, 3, and 4, for Vertex. We'll start at slot 5 not conflict with them later shader_location: 5, format: wgpu::VertexFormat::Float32x4, }, // A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot // for each vec4. We don't have to do this in code though. wgpu::VertexAttribute { offset: mem::size_of::<[f32; 4]>() as wgpu::BufferAddress, shader_location: 6, format: wgpu::VertexFormat::Float32x4, }, wgpu::VertexAttribute { offset: mem::size_of::<[f32; 8]>() as wgpu::BufferAddress, shader_location: 7, format: wgpu::VertexFormat::Float32x4, }, wgpu::VertexAttribute { offset: mem::size_of::<[f32; 12]>() as wgpu::BufferAddress, shader_location: 8, format: wgpu::VertexFormat::Float32x4, }, wgpu::VertexAttribute { offset: mem::size_of::<[f32; 16]>() as wgpu::BufferAddress, shader_location: 9, format: wgpu::VertexFormat::Float32x3, }, wgpu::VertexAttribute { offset: mem::size_of::<[f32; 19]>() as wgpu::BufferAddress, shader_location: 10, format: wgpu::VertexFormat::Float32x3, }, wgpu::VertexAttribute { offset: mem::size_of::<[f32; 22]>() as wgpu::BufferAddress, shader_location: 11, format: wgpu::VertexFormat::Float32x3, }, ], } } } #[repr(C)] #[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)] struct LightUniform { position: [f32; 3], // Due to uniforms requiring 16 byte (4 float) spacing, we need to use a padding field here _padding: u32, color: [f32; 3], _padding2: u32, } struct State<'a> { window: &'a Window, surface: wgpu::Surface<'a>, device: wgpu::Device, queue: wgpu::Queue, config: wgpu::SurfaceConfiguration, render_pipeline: wgpu::RenderPipeline, obj_model: model::Model, camera: camera::Camera, projection: camera::Projection, camera_controller: camera::CameraController, camera_uniform: CameraUniform, camera_buffer: wgpu::Buffer, camera_bind_group: wgpu::BindGroup, instances: Vec, #[allow(dead_code)] instance_buffer: wgpu::Buffer, depth_texture: texture::Texture, size: winit::dpi::PhysicalSize, light_uniform: LightUniform, light_buffer: wgpu::Buffer, light_bind_group: wgpu::BindGroup, light_render_pipeline: wgpu::RenderPipeline, #[allow(dead_code)] debug_material: model::Material, mouse_pressed: bool, } fn create_render_pipeline( device: &wgpu::Device, layout: &wgpu::PipelineLayout, color_format: wgpu::TextureFormat, depth_format: Option, vertex_layouts: &[wgpu::VertexBufferLayout], shader: wgpu::ShaderModuleDescriptor, ) -> wgpu::RenderPipeline { let shader = device.create_shader_module(shader); device.create_render_pipeline(&wgpu::RenderPipelineDescriptor { label: Some(&format!("{:?}", shader)), layout: Some(layout), vertex: wgpu::VertexState { module: &shader, entry_point: "vs_main", buffers: vertex_layouts, }, fragment: Some(wgpu::FragmentState { module: &shader, entry_point: "fs_main", targets: &[Some(wgpu::ColorTargetState { format: color_format, blend: Some(wgpu::BlendState { alpha: wgpu::BlendComponent::REPLACE, color: wgpu::BlendComponent::REPLACE, }), write_mask: wgpu::ColorWrites::ALL, })], }), primitive: wgpu::PrimitiveState { topology: wgpu::PrimitiveTopology::TriangleList, strip_index_format: None, front_face: wgpu::FrontFace::Ccw, cull_mode: Some(wgpu::Face::Back), // Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE polygon_mode: wgpu::PolygonMode::Fill, // Requires Features::DEPTH_CLIP_CONTROL unclipped_depth: false, // Requires Features::CONSERVATIVE_RASTERIZATION conservative: false, }, depth_stencil: depth_format.map(|format| wgpu::DepthStencilState { format, depth_write_enabled: true, depth_compare: wgpu::CompareFunction::Less, stencil: wgpu::StencilState::default(), bias: wgpu::DepthBiasState::default(), }), multisample: wgpu::MultisampleState { count: 1, mask: !0, alpha_to_coverage_enabled: false, }, // If the pipeline will be used with a multiview render pass, this // indicates how many array layers the attachments will have. multiview: None, }) } impl<'a> State<'a> { async fn new(window: &'a Window) -> State<'a> { let size = window.inner_size(); // The instance is a handle to our GPU // BackendBit::PRIMARY => Vulkan + Metal + DX12 + Browser WebGPU let instance = wgpu::Instance::new(wgpu::InstanceDescriptor { backends: wgpu::Backends::all(), ..Default::default() }); let surface = instance.create_surface(window).unwrap(); let adapter = instance .request_adapter(&wgpu::RequestAdapterOptions { power_preference: wgpu::PowerPreference::HighPerformance, compatible_surface: Some(&surface), force_fallback_adapter: false, }) .await .unwrap(); let (device, queue) = adapter .request_device( &wgpu::DeviceDescriptor { label: None, required_features: wgpu::Features::empty(), // WebGL doesn't support all of wgpu's features, so if // we're building for the web we'll have to disable some. required_limits: if cfg!(target_arch = "wasm32") { wgpu::Limits::downlevel_webgl2_defaults() } else { wgpu::Limits::default() }, }, None, // Trace path ) .await .unwrap(); let surface_caps = surface.get_capabilities(&adapter); // Shader code in this tutorial assumes an Srgb surface texture. Using a different // one will result all the colors comming out darker. If you want to support non // Srgb surfaces, you'll need to account for that when drawing to the frame. let surface_format = surface_caps .formats .iter() .copied() .find(|f| f.is_srgb()) .unwrap_or(surface_caps.formats[0]); let config = wgpu::SurfaceConfiguration { usage: wgpu::TextureUsages::RENDER_ATTACHMENT, format: surface_format, width: size.width, height: size.height, present_mode: surface_caps.present_modes[0], alpha_mode: surface_caps.alpha_modes[0], desired_maximum_frame_latency: 2, // The max number of frames that can be in the queue view_formats: vec![], }; surface.configure(&device, &config); let texture_bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor { entries: &[ wgpu::BindGroupLayoutEntry { binding: 0, visibility: wgpu::ShaderStages::FRAGMENT, ty: wgpu::BindingType::Texture { multisampled: false, sample_type: wgpu::TextureSampleType::Float { filterable: true }, view_dimension: wgpu::TextureViewDimension::D2, }, count: None, }, wgpu::BindGroupLayoutEntry { binding: 1, visibility: wgpu::ShaderStages::FRAGMENT, ty: wgpu::BindingType::Sampler(wgpu::SamplerBindingType::Filtering), count: None, }, // normal map wgpu::BindGroupLayoutEntry { binding: 2, visibility: wgpu::ShaderStages::FRAGMENT, ty: wgpu::BindingType::Texture { multisampled: false, sample_type: wgpu::TextureSampleType::Float { filterable: true }, view_dimension: wgpu::TextureViewDimension::D2, }, count: None, }, wgpu::BindGroupLayoutEntry { binding: 3, visibility: wgpu::ShaderStages::FRAGMENT, ty: wgpu::BindingType::Sampler(wgpu::SamplerBindingType::Filtering), count: None, }, ], label: Some("texture_bind_group_layout"), }); // UPDATED! let camera = camera::Camera::new((0.0, 5.0, 10.0), cgmath::Deg(-90.0), cgmath::Deg(-20.0)); let projection = camera::Projection::new(config.width, config.height, cgmath::Deg(45.0), 0.1, 100.0); let camera_controller = camera::CameraController::new(4.0, 0.4); let mut camera_uniform = CameraUniform::new(); camera_uniform.update_view_proj(&camera, &projection); let camera_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor { label: Some("Camera Buffer"), contents: bytemuck::cast_slice(&[camera_uniform]), usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST, }); const SPACE_BETWEEN: f32 = 3.0; let iter = { cfg_if::cfg_if! { if #[cfg(target_arch = "wasm32")] { (0..NUM_INSTANCES_PER_ROW) .into_iter() } else { (0..NUM_INSTANCES_PER_ROW) .into_par_iter() } } }; let instances = iter .clone() .flat_map(|z| { // UPDATED! iter.clone().map(move |x| { let x = SPACE_BETWEEN * (x as f32 - NUM_INSTANCES_PER_ROW as f32 / 2.0); let z = SPACE_BETWEEN * (z as f32 - NUM_INSTANCES_PER_ROW as f32 / 2.0); let position = cgmath::Vector3 { x, y: 0.0, z }; let rotation = if position.is_zero() { cgmath::Quaternion::from_axis_angle( cgmath::Vector3::unit_z(), cgmath::Deg(0.0), ) } else { cgmath::Quaternion::from_axis_angle(position.normalize(), cgmath::Deg(45.0)) }; Instance { position, rotation } }) }) .collect::>(); let instance_data = instances.iter().map(Instance::to_raw).collect::>(); let instance_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor { label: Some("Instance Buffer"), contents: bytemuck::cast_slice(&instance_data), usage: wgpu::BufferUsages::VERTEX, }); let camera_bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor { entries: &[wgpu::BindGroupLayoutEntry { binding: 0, visibility: wgpu::ShaderStages::VERTEX | wgpu::ShaderStages::FRAGMENT, ty: wgpu::BindingType::Buffer { ty: wgpu::BufferBindingType::Uniform, has_dynamic_offset: false, min_binding_size: None, }, count: None, }], label: Some("camera_bind_group_layout"), }); let camera_bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor { layout: &camera_bind_group_layout, entries: &[wgpu::BindGroupEntry { binding: 0, resource: camera_buffer.as_entire_binding(), }], label: Some("camera_bind_group"), }); let obj_model = resources::load_model("cube.obj", &device, &queue, &texture_bind_group_layout) .await .unwrap(); let light_uniform = LightUniform { position: [2.0, 2.0, 2.0], _padding: 0, color: [1.0, 1.0, 1.0], _padding2: 0, }; let light_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor { label: Some("Light VB"), contents: bytemuck::cast_slice(&[light_uniform]), usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST, }); let light_bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor { entries: &[wgpu::BindGroupLayoutEntry { binding: 0, visibility: wgpu::ShaderStages::VERTEX | wgpu::ShaderStages::FRAGMENT, ty: wgpu::BindingType::Buffer { ty: wgpu::BufferBindingType::Uniform, has_dynamic_offset: false, min_binding_size: None, }, count: None, }], label: None, }); let light_bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor { layout: &light_bind_group_layout, entries: &[wgpu::BindGroupEntry { binding: 0, resource: light_buffer.as_entire_binding(), }], label: None, }); let depth_texture = texture::Texture::create_depth_texture(&device, &config, "depth_texture"); let render_pipeline_layout = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor { label: Some("Render Pipeline Layout"), bind_group_layouts: &[ &texture_bind_group_layout, &camera_bind_group_layout, &light_bind_group_layout, ], push_constant_ranges: &[], }); let render_pipeline = { let shader = wgpu::ShaderModuleDescriptor { label: Some("Normal Shader"), source: wgpu::ShaderSource::Wgsl(include_str!("shader.wgsl").into()), }; create_render_pipeline( &device, &render_pipeline_layout, config.format, Some(texture::Texture::DEPTH_FORMAT), &[model::ModelVertex::desc(), InstanceRaw::desc()], shader, ) }; let light_render_pipeline = { let layout = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor { label: Some("Light Pipeline Layout"), bind_group_layouts: &[&camera_bind_group_layout, &light_bind_group_layout], push_constant_ranges: &[], }); let shader = wgpu::ShaderModuleDescriptor { label: Some("Light Shader"), source: wgpu::ShaderSource::Wgsl(include_str!("light.wgsl").into()), }; create_render_pipeline( &device, &layout, config.format, Some(texture::Texture::DEPTH_FORMAT), &[model::ModelVertex::desc()], shader, ) }; let debug_material = { let diffuse_bytes = include_bytes!("../res/cobble-diffuse.png"); let normal_bytes = include_bytes!("../res/cobble-normal.png"); let diffuse_texture = texture::Texture::from_bytes( &device, &queue, diffuse_bytes, "res/alt-diffuse.png", false, ) .unwrap(); let normal_texture = texture::Texture::from_bytes( &device, &queue, normal_bytes, "res/alt-normal.png", true, ) .unwrap(); model::Material::new( &device, "alt-material", diffuse_texture, normal_texture, &texture_bind_group_layout, ) }; Self { window, surface, device, queue, config, render_pipeline, obj_model, camera, projection, camera_controller, camera_buffer, camera_bind_group, camera_uniform, instances, instance_buffer, depth_texture, size, light_uniform, light_buffer, light_bind_group, light_render_pipeline, #[allow(dead_code)] debug_material, mouse_pressed: false, } } pub fn window(&self) -> &Window { &self.window } fn resize(&mut self, new_size: winit::dpi::PhysicalSize) { if new_size.width > 0 && new_size.height > 0 { self.projection.resize(new_size.width, new_size.height); self.size = new_size; self.config.width = new_size.width; self.config.height = new_size.height; self.surface.configure(&self.device, &self.config); self.depth_texture = texture::Texture::create_depth_texture(&self.device, &self.config, "depth_texture"); } } fn input(&mut self, event: &WindowEvent) -> bool { match event { WindowEvent::KeyboardInput { event: KeyEvent { physical_key: PhysicalKey::Code(key), state, .. }, .. } => self.camera_controller.process_keyboard(*key, *state), WindowEvent::MouseWheel { delta, .. } => { self.camera_controller.process_scroll(delta); true } WindowEvent::MouseInput { button: MouseButton::Left, state, .. } => { self.mouse_pressed = *state == ElementState::Pressed; true } _ => false, } } fn update(&mut self, dt: instant::Duration) { self.camera_controller.update_camera(&mut self.camera, dt); self.camera_uniform .update_view_proj(&self.camera, &self.projection); self.queue.write_buffer( &self.camera_buffer, 0, bytemuck::cast_slice(&[self.camera_uniform]), ); // Update the light let old_position: cgmath::Vector3<_> = self.light_uniform.position.into(); self.light_uniform.position = (cgmath::Quaternion::from_axis_angle((0.0, 1.0, 0.0).into(), cgmath::Deg(1.0)) * old_position) .into(); self.queue.write_buffer( &self.light_buffer, 0, bytemuck::cast_slice(&[self.light_uniform]), ); } fn render(&mut self) -> Result<(), wgpu::SurfaceError> { let output = self.surface.get_current_texture()?; let view = output .texture .create_view(&wgpu::TextureViewDescriptor::default()); let mut encoder = self .device .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("Render Encoder"), }); { let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor { label: Some("Render Pass"), color_attachments: &[Some(wgpu::RenderPassColorAttachment { view: &view, resolve_target: None, ops: wgpu::Operations { load: wgpu::LoadOp::Clear(wgpu::Color { r: 0.1, g: 0.2, b: 0.3, a: 1.0, }), store: wgpu::StoreOp::Store, }, })], depth_stencil_attachment: Some(wgpu::RenderPassDepthStencilAttachment { view: &self.depth_texture.view, depth_ops: Some(wgpu::Operations { load: wgpu::LoadOp::Clear(1.0), store: wgpu::StoreOp::Store, }), stencil_ops: None, }), occlusion_query_set: None, timestamp_writes: None, }); render_pass.set_vertex_buffer(1, self.instance_buffer.slice(..)); render_pass.set_pipeline(&self.light_render_pipeline); render_pass.draw_light_model( &self.obj_model, &self.camera_bind_group, &self.light_bind_group, ); render_pass.set_pipeline(&self.render_pipeline); render_pass.draw_model_instanced( &self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group, &self.light_bind_group, ); } self.queue.submit(iter::once(encoder.finish())); output.present(); Ok(()) } } #[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))] pub async fn run() { cfg_if::cfg_if! { if #[cfg(target_arch = "wasm32")] { std::panic::set_hook(Box::new(console_error_panic_hook::hook)); console_log::init_with_level(log::Level::Info).expect("Could't initialize logger"); } else { env_logger::init(); } } let event_loop = EventLoop::new().unwrap(); let title = env!("CARGO_PKG_NAME"); let window = winit::window::WindowBuilder::new() .with_title(title) .build(&event_loop) .unwrap(); #[cfg(target_arch = "wasm32")] { // Winit prevents sizing with CSS, so we have to set // the size manually when on web. use winit::dpi::PhysicalSize; window.request_inner_size(PhysicalSize::new(450, 400)).unwrap(); use winit::platform::web::WindowExtWebSys; web_sys::window() .and_then(|win| win.document()) .and_then(|doc| { let dst = doc.get_element_by_id("wasm-example")?; let canvas = web_sys::Element::from(window.canvas()?); dst.append_child(&canvas).ok()?; Some(()) }) .expect("Couldn't append canvas to document body."); } let mut state = State::new(&window).await; // NEW! let mut last_render_time = instant::Instant::now(); // let window = &window; event_loop.run(move |event, control_flow| { // let _ = window; match event { Event::DeviceEvent { event: DeviceEvent::MouseMotion{ delta, }, .. // We're not using device_id currently } => if state.mouse_pressed { state.camera_controller.process_mouse(delta.0, delta.1) } Event::WindowEvent { ref event, window_id, } if window_id == state.window().id() && !state.input(event) => { match event { #[cfg(not(target_arch="wasm32"))] WindowEvent::CloseRequested | WindowEvent::KeyboardInput { event: KeyEvent { state: ElementState::Pressed, physical_key: PhysicalKey::Code(KeyCode::Escape), .. }, .. } => control_flow.exit(), WindowEvent::Resized(physical_size) => { state.resize(*physical_size); } WindowEvent::RedrawRequested => { state.window().request_redraw(); let now = instant::Instant::now(); let dt = now - last_render_time; last_render_time = now; state.update(dt); match state.render() { Ok(_) => {} // Reconfigure the surface if it's lost or outdated Err(wgpu::SurfaceError::Lost | wgpu::SurfaceError::Outdated) => state.resize(state.size), // The system is out of memory, we should probably quit Err(wgpu::SurfaceError::OutOfMemory) => control_flow.exit(), // We're ignoring timeouts Err(wgpu::SurfaceError::Timeout) => log::warn!("Surface timeout"), } } _ => {} } } _ => {} } }).unwrap(); }