1import { Vec3 } from 'gl-matrix';
2import { Pane } from 'tweakpane';
3
4export const InitPane = (device: GPUDevice, UNIFORMS: any, uniformBuffer0: GPUBuffer) => {
5 const container = document.getElementById("pane-container") as HTMLElement;
6 const header = document.getElementById("pane-container-header") as HTMLElement;
7
8 const pane = new Pane({
9 container: container,
10 });
11 let offsetX = 0;
12 let offsetY = 0;
13 let isDragging = false;
14 header.addEventListener('mousedown', (e) => {
15 isDragging = true;
16 offsetX = e.clientX - container.offsetLeft;
17 offsetY = e.clientY - container.offsetTop;
18 container.style.cursor = 'move';
19 });
20 document.addEventListener('mousemove', (e) => {
21 if (isDragging) {
22 let x = e.clientX - offsetX;
23 let y = e.clientY - offsetY;
24
25 const viewportWidth = window.innerWidth;
26 const viewportHeight = window.innerHeight;
27
28 const containerWidth = container.offsetWidth;
29 const containerHeight = container.offsetHeight;
30
31 const minX = 0;
32 const maxX = viewportWidth - containerWidth;
33 const minY = 0;
34 const maxY = viewportHeight - containerHeight;
35
36 x = Math.max(minX, Math.min(x, maxX));
37 y = Math.max(minY, Math.min(y, maxY));
38
39 container.style.left = `${x}px`;
40 container.style.top = `${y}px`;
41 }
42 });
43 document.addEventListener('mouseup', () => {
44 isDragging = false;
45 container.style.cursor = 'default';
46 });
47
48 //packed vars: samp_count, bounce, aperture, focal_length]
49 let packed0 = new Float32Array([UNIFORMS.sample_count, UNIFORMS.bounce_count, UNIFORMS.aperture, UNIFORMS.focal_length])
50 pane.addBinding(UNIFORMS, 'frameTimeMs', {
51 readonly: true,
52 label: "Frame Time ",
53 view: 'number',
54 min: 0,
55 max: 120.00,
56 });
57 pane.addBinding(UNIFORMS, 'frameTimeMs', {
58 readonly: true,
59 label: "Frame Time Graph",
60 view: 'graph',
61 min: 0,
62 max: 120.00,
63 });
64 const cameraFolder = pane.addFolder({ title: 'Camera' })
65 cameraFolder.addBinding(UNIFORMS, 'thin_lens', {
66 label: "Enable thin lens approx",
67 }).on('change', (e) => {
68 device.queue.writeBuffer(uniformBuffer0, 256, new Float32Array([e.value]));
69 window.framecount = 0;
70 });
71 cameraFolder.addBinding(UNIFORMS, 'sample_count', {
72 view: 'slider',
73 type: 'number',
74 label: 'Sample Count',
75 min: 1,
76 max: 5,
77 value: 1,
78 step: 1,
79 }).on('change', (e) => {
80 packed0[0] = e.value;
81 device.queue.writeBuffer(uniformBuffer0, 236, packed0);
82 window.framecount = 0;
83 });
84 cameraFolder.addBinding(UNIFORMS, 'bounce_count', {
85 view: 'slider',
86 type: 'number',
87 label: 'Max Bounces',
88 min: 1,
89 max: 10,
90 value: 1,
91 step: 1,
92 }).on('change', (e) => {
93 packed0[1] = e.value;
94 device.queue.writeBuffer(uniformBuffer0, 236, packed0);
95 window.framecount = 0;
96 });
97 cameraFolder.addBinding(UNIFORMS, 'aperture', {
98 view: 'slider',
99 type: 'number',
100 label: 'Aperture',
101 min: 0.1,
102 max: 1,
103 value: 0.1,
104 }).on('change', (e) => {
105 packed0[2] = e.value;
106 device.queue.writeBuffer(uniformBuffer0, 236, packed0);
107 window.framecount = 0;
108 });
109 cameraFolder.addBinding(UNIFORMS, 'focal_length', {
110 view: 'slider',
111 type: 'number',
112 label: 'Focal Length',
113 min: 1,
114 max: 200,
115 value: 1,
116 }).on('change', (e) => {
117 packed0[3] = e.value;
118 device.queue.writeBuffer(uniformBuffer0, 236, packed0);
119 window.framecount = 0;
120 });
121 const dirFolder = pane.addFolder({ title: 'Environment' });
122 dirFolder.addBinding(UNIFORMS, 'sun_angle', {
123 label: 'Sun Angle',
124 x: { min: -1, max: 1, step: 0.1 },
125 y: { min: -1, max: 1, step: 0.1 },
126 z: { min: -1, max: 1, step: 0.1 },
127 }).on('change', () => {
128 device.queue.writeBuffer(uniformBuffer0, 208, Vec3.fromValues(UNIFORMS.sun_angle.x, UNIFORMS.sun_angle.y, UNIFORMS.sun_angle.z));
129 window.framecount = 0;
130 });
131 dirFolder.addBinding(UNIFORMS, 'sun_color', {
132 color: { type: 'float' },
133 picker: 'inline',
134 label: 'Sun Color',
135 x: { min: -1, max: 1, step: 0.1 },
136 y: { min: -1, max: 1, step: 0.1 },
137 z: { min: -1, max: 1, step: 0.1 },
138 }).on('change', (e) => {
139 device.queue.writeBuffer(uniformBuffer0, 224, Vec3.fromValues(e.value.r * UNIFORMS.scale, e.value.g * UNIFORMS.scale, e.value.b * UNIFORMS.scale));
140 window.framecount = 0;
141 });
142}