Skip to content

Commit 095c2a6

Browse files
Add the Pixel Preview render mode (#3881)
* Add pixel preview render mode * Fix fmt * Remove unused sampler * Remove unnecessary mutex * Code review --------- Co-authored-by: Keavon Chambers <keavon@keavon.com>
1 parent 35b812c commit 095c2a6

File tree

10 files changed

+320
-19
lines changed

10 files changed

+320
-19
lines changed

desktop/src/render/composite_shader.wgsl

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// =============
2+
// VERTEX SHADER
3+
// =============
4+
15
struct VertexOutput {
26
@builtin(position) clip_position: vec4<f32>,
37
@location(0) tex_coords: vec2<f32>,
@@ -6,19 +10,21 @@ struct VertexOutput {
610
@vertex
711
fn vs_main(@builtin(vertex_index) vertex_index: u32) -> VertexOutput {
812
var out: VertexOutput;
9-
1013
let pos = array(
11-
vec2f( -1.0, -1.0),
12-
vec2f( 3.0, -1.0),
13-
vec2f( -1.0, 3.0),
14+
vec2f(-1.0, -1.0),
15+
vec2f(3.0, -1.0),
16+
vec2f(-1.0, 3.0),
1417
);
1518
let xy = pos[vertex_index];
16-
out.clip_position = vec4f(xy , 0.0, 1.0);
17-
let coords = (xy / 2. + 0.5);
19+
out.clip_position = vec4f(xy, 0.0, 1.0);
20+
let coords = xy / 2. + 0.5;
1821
out.tex_coords = vec2f(coords.x, 1. - coords.y);
1922
return out;
2023
}
2124

25+
// ===============
26+
// FRAGMENT SHADER
27+
// ===============
2228

2329
struct Constants {
2430
viewport_scale: vec2<f32>,

editor/src/messages/portfolio/document/document_message_handler.rs

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2519,11 +2519,12 @@ impl DocumentMessageHandler {
25192519
.icon("RenderModeOutline")
25202520
.tooltip_label("Render Mode: Outline")
25212521
.on_update(|_| DocumentMessage::SetRenderMode { render_mode: RenderMode::Outline }.into()),
2522-
// TODO: See issue #320
2523-
// RadioEntryData::new("PixelPreview")
2524-
// .icon("RenderModePixels")
2525-
// .tooltip_label("Render Mode: Pixel Preview")
2526-
// .on_update(|_| todo!()),
2522+
RadioEntryData::new("PixelPreview").icon("RenderModePixels").tooltip_label("Render Mode: Pixel Preview").on_update(|_| {
2523+
DocumentMessage::SetRenderMode {
2524+
render_mode: RenderMode::PixelPreview,
2525+
}
2526+
.into()
2527+
}),
25272528
RadioEntryData::new("SvgPreview")
25282529
.icon("RenderModeSvg")
25292530
.tooltip_label("Render Mode: SVG Preview")
@@ -2534,7 +2535,7 @@ impl DocumentMessageHandler {
25342535
if disabled {
25352536
for entry in &mut entries {
25362537
entry.tooltip_description = "
2537-
*Normal* and *Outline* render modes are not available in this browser. For compatibility, *SVG Preview* mode is active as a fallback.\n\
2538+
*Normal*, *Outline*, and *Pixel Preview* render modes are not available in this browser. For compatibility, *SVG Preview* mode is active as a fallback.\n\
25382539
\n\
25392540
This functionality requires WebGPU support. Check webgpu.org for browser implementation status.
25402541
"

node-graph/interpreted-executor/src/util.rs

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ pub fn wrap_network_in_scope(mut network: NodeNetwork, editor_api: Arc<WasmEdito
2828
let render_node = DocumentNode {
2929
inputs: vec![NodeInput::node(NodeId(0), 0)],
3030
implementation: DocumentNodeImplementation::Network(NodeNetwork {
31-
exports: vec![NodeInput::node(NodeId(3), 0)],
31+
exports: vec![NodeInput::node(NodeId(4), 0)],
3232
nodes: [
3333
DocumentNode {
3434
call_argument: concrete!(Context),
@@ -61,9 +61,19 @@ pub fn wrap_network_in_scope(mut network: NodeNetwork, editor_api: Arc<WasmEdito
6161
},
6262
..Default::default()
6363
},
64+
DocumentNode {
65+
call_argument: concrete!(Context),
66+
inputs: vec![NodeInput::scope("editor-api"), NodeInput::node(NodeId(2), 0)],
67+
implementation: DocumentNodeImplementation::ProtoNode(graphene_std::pixel_preview::pixel_preview::IDENTIFIER),
68+
context_features: graphene_std::ContextDependencies {
69+
extract: ContextFeatures::FOOTPRINT | ContextFeatures::VARARGS,
70+
inject: ContextFeatures::FOOTPRINT | ContextFeatures::VARARGS,
71+
},
72+
..Default::default()
73+
},
6474
DocumentNode {
6575
call_argument: concrete!(graphene_std::application_io::RenderConfig),
66-
inputs: vec![NodeInput::node(NodeId(2), 0)],
76+
inputs: vec![NodeInput::node(NodeId(3), 0)],
6777
implementation: DocumentNodeImplementation::ProtoNode(graphene_std::render_node::create_context::IDENTIFIER),
6878
context_features: graphene_std::ContextDependencies {
6979
// We add the extract index annotation here to force the compiler to add a context nullification node before this node so the render context is properly nullified so the render cache node can do its's work

node-graph/libraries/vector-types/src/vector/style.rs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -665,8 +665,8 @@ pub enum RenderMode {
665665
Normal = 0,
666666
/// Render only the outlines of shapes at the current viewport resolution
667667
Outline,
668-
// /// Render with normal coloration at the document resolution, showing the pixels when the current viewport resolution is higher
669-
// PixelPreview,
668+
/// Render with normal coloration at the document export resolution; at zoom > 100% this shows individual export pixels upscaled with nearest-neighbor filtering
669+
PixelPreview,
670670
/// Render a preview of how the object would be exported as an SVG.
671671
SvgPreview,
672672
}

node-graph/libraries/wgpu-executor/src/lib.rs

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
mod context;
2+
mod resample;
23
pub mod shader_runtime;
34
pub mod texture_conversion;
45

6+
use crate::resample::Resampler;
57
use crate::shader_runtime::ShaderRuntime;
68
use anyhow::Result;
79
use core_types::Color;
810
use dyn_any::StaticType;
911
use futures::lock::Mutex;
1012
use glam::UVec2;
1113
use graphene_application_io::{ApplicationIo, EditorApi, SurfaceHandle, SurfaceId};
12-
pub use rendering::RenderContext;
1314
use std::sync::Arc;
1415
use vello::{AaConfig, AaSupport, RenderParams, Renderer, RendererOptions, Scene};
1516
use wgpu::util::TextureBlitter;
1617
use wgpu::{Origin3d, TextureAspect};
1718

1819
pub use context::Context as WgpuContext;
1920
pub use context::ContextBuilder as WgpuContextBuilder;
21+
pub use rendering::RenderContext;
2022
pub use wgpu::Backends as WgpuBackends;
2123
pub use wgpu::Features as WgpuFeatures;
2224

2325
#[derive(dyn_any::DynAny)]
2426
pub struct WgpuExecutor {
2527
pub context: WgpuContext,
2628
vello_renderer: Mutex<Renderer>,
29+
resampler: Resampler,
2730
pub shader_runtime: ShaderRuntime,
2831
}
2932

@@ -154,6 +157,10 @@ impl WgpuExecutor {
154157
Ok(())
155158
}
156159

160+
pub fn resample_texture(&self, source: &wgpu::Texture, target_size: UVec2, transform: &glam::DAffine2) -> wgpu::Texture {
161+
self.resampler.resample(&self.context, source, target_size, transform)
162+
}
163+
157164
#[cfg(target_family = "wasm")]
158165
pub fn create_surface(&self, canvas: graphene_application_io::WasmSurfaceHandle) -> Result<SurfaceHandle<Surface>> {
159166
let surface = self.context.instance.create_surface(wgpu::SurfaceTarget::Canvas(canvas.surface))?;
@@ -196,9 +203,12 @@ impl WgpuExecutor {
196203
.map_err(|e| anyhow::anyhow!("Failed to create Vello renderer: {:?}", e))
197204
.ok()?;
198205

206+
let resampler = Resampler::new(&context.device);
207+
199208
Some(Self {
200209
shader_runtime: ShaderRuntime::new(&context),
201210
context,
211+
resampler,
202212
vello_renderer: vello_renderer.into(),
203213
})
204214
}
Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
use crate::WgpuContext;
2+
use glam::{DAffine2, UVec2, Vec2};
3+
4+
pub struct Resampler {
5+
pipeline: wgpu::RenderPipeline,
6+
bind_group_layout: wgpu::BindGroupLayout,
7+
}
8+
9+
impl Resampler {
10+
pub fn new(device: &wgpu::Device) -> Self {
11+
let shader = device.create_shader_module(wgpu::include_wgsl!("resample_shader.wgsl"));
12+
13+
let bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
14+
label: Some("resample_bind_group_layout"),
15+
entries: &[
16+
wgpu::BindGroupLayoutEntry {
17+
binding: 0,
18+
visibility: wgpu::ShaderStages::FRAGMENT,
19+
ty: wgpu::BindingType::Texture {
20+
multisampled: false,
21+
view_dimension: wgpu::TextureViewDimension::D2,
22+
sample_type: wgpu::TextureSampleType::Float { filterable: false },
23+
},
24+
count: None,
25+
},
26+
wgpu::BindGroupLayoutEntry {
27+
binding: 1,
28+
visibility: wgpu::ShaderStages::FRAGMENT,
29+
ty: wgpu::BindingType::Buffer {
30+
ty: wgpu::BufferBindingType::Uniform,
31+
has_dynamic_offset: false,
32+
min_binding_size: None,
33+
},
34+
count: None,
35+
},
36+
],
37+
});
38+
39+
let pipeline_layout = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
40+
label: Some("resample_pipeline_layout"),
41+
bind_group_layouts: &[&bind_group_layout],
42+
push_constant_ranges: &[],
43+
});
44+
45+
let pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
46+
label: Some("resample_pipeline"),
47+
layout: Some(&pipeline_layout),
48+
vertex: wgpu::VertexState {
49+
module: &shader,
50+
entry_point: Some("vs_main"),
51+
buffers: &[],
52+
compilation_options: wgpu::PipelineCompilationOptions::default(),
53+
},
54+
fragment: Some(wgpu::FragmentState {
55+
module: &shader,
56+
entry_point: Some("fs_main"),
57+
targets: &[Some(wgpu::ColorTargetState {
58+
format: wgpu::TextureFormat::Rgba8Unorm,
59+
blend: None,
60+
write_mask: wgpu::ColorWrites::ALL,
61+
})],
62+
compilation_options: wgpu::PipelineCompilationOptions::default(),
63+
}),
64+
primitive: wgpu::PrimitiveState {
65+
topology: wgpu::PrimitiveTopology::TriangleList,
66+
..Default::default()
67+
},
68+
depth_stencil: None,
69+
multisample: wgpu::MultisampleState::default(),
70+
multiview: None,
71+
cache: None,
72+
});
73+
74+
Resampler { pipeline, bind_group_layout }
75+
}
76+
77+
pub fn resample(&self, context: &WgpuContext, source: &wgpu::Texture, target_size: UVec2, transform: &DAffine2) -> wgpu::Texture {
78+
let device = &context.device;
79+
let queue = &context.queue;
80+
81+
let output_texture = device.create_texture(&wgpu::TextureDescriptor {
82+
label: Some("resample_output"),
83+
size: wgpu::Extent3d {
84+
width: target_size.x.max(1),
85+
height: target_size.y.max(1),
86+
depth_or_array_layers: 1,
87+
},
88+
mip_level_count: 1,
89+
sample_count: 1,
90+
dimension: wgpu::TextureDimension::D2,
91+
format: wgpu::TextureFormat::Rgba8Unorm,
92+
usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC | wgpu::TextureUsages::TEXTURE_BINDING,
93+
view_formats: &[],
94+
});
95+
96+
let source_view = source.create_view(&wgpu::TextureViewDescriptor::default());
97+
let output_view = output_texture.create_view(&wgpu::TextureViewDescriptor::default());
98+
99+
let params_buffer = device.create_buffer(&wgpu::BufferDescriptor {
100+
label: Some("resample_params"),
101+
size: 32,
102+
usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
103+
mapped_at_creation: false,
104+
});
105+
106+
let params_data = [transform.matrix2.x_axis.as_vec2(), transform.matrix2.y_axis.as_vec2(), transform.translation.as_vec2(), Vec2::ZERO];
107+
queue.write_buffer(&params_buffer, 0, bytemuck::cast_slice(&params_data));
108+
109+
let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
110+
label: Some("resample_bind_group"),
111+
layout: &self.bind_group_layout,
112+
entries: &[
113+
wgpu::BindGroupEntry {
114+
binding: 0,
115+
resource: wgpu::BindingResource::TextureView(&source_view),
116+
},
117+
wgpu::BindGroupEntry {
118+
binding: 1,
119+
resource: params_buffer.as_entire_binding(),
120+
},
121+
],
122+
});
123+
124+
let mut encoder = device.create_command_encoder(&wgpu::CommandEncoderDescriptor { label: Some("resample_encoder") });
125+
126+
{
127+
let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
128+
label: Some("resample_pass"),
129+
color_attachments: &[Some(wgpu::RenderPassColorAttachment {
130+
view: &output_view,
131+
resolve_target: None,
132+
ops: wgpu::Operations {
133+
load: wgpu::LoadOp::Clear(wgpu::Color::TRANSPARENT),
134+
store: wgpu::StoreOp::Store,
135+
},
136+
depth_slice: None,
137+
})],
138+
depth_stencil_attachment: None,
139+
timestamp_writes: None,
140+
occlusion_query_set: None,
141+
});
142+
143+
render_pass.set_pipeline(&self.pipeline);
144+
render_pass.set_bind_group(0, &bind_group, &[]);
145+
render_pass.draw(0..3, 0..1);
146+
}
147+
148+
queue.submit([encoder.finish()]);
149+
150+
output_texture
151+
}
152+
}
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// =============
2+
// VERTEX SHADER
3+
// =============
4+
5+
struct VertexOutput {
6+
@builtin(position) clip_position: vec4<f32>,
7+
@location(0) tex_coords: vec2<f32>,
8+
}
9+
10+
@vertex
11+
fn vs_main(@builtin(vertex_index) vertex_index: u32) -> VertexOutput {
12+
var out: VertexOutput;
13+
let pos = array(
14+
vec2f(-1.0, -1.0),
15+
vec2f(3.0, -1.0),
16+
vec2f(-1.0, 3.0),
17+
);
18+
let xy = pos[vertex_index];
19+
out.clip_position = vec4f(xy, 0.0, 1.0);
20+
let coords = xy / 2. + 0.5;
21+
out.tex_coords = vec2f(coords.x, 1. - coords.y);
22+
return out;
23+
}
24+
25+
// ===============
26+
// FRAGMENT SHADER
27+
// ===============
28+
29+
@group(0) @binding(0)
30+
var t_source: texture_2d<f32>;
31+
32+
struct Params {
33+
matrix: mat2x2<f32>,
34+
translation: vec2<f32>,
35+
_pad: vec2<f32>,
36+
};
37+
38+
// We need to use a uniform buffer for the params because push constants are not supported on web
39+
@group(0) @binding(1)
40+
var<uniform> params: Params;
41+
42+
@fragment
43+
fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
44+
let position = params.matrix * in.tex_coords + params.translation;
45+
let texel = vec2<i32>(floor(position));
46+
let texture_size = vec2<i32>(textureDimensions(t_source));
47+
if (texel.x >= 0 && texel.x < texture_size.x && texel.y >= 0 && texel.y < texture_size.y) {
48+
return textureLoad(t_source, texel, 0);
49+
}
50+
return vec4<f32>(0.0);
51+
}

node-graph/nodes/gstd/src/lib.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
pub mod any;
2+
pub mod pixel_preview;
23
pub mod render_cache;
34
pub mod render_node;
45
pub mod text;

0 commit comments

Comments
 (0)