Members
MAX_BAILOUT :number
Type:
- number
MAX_ITER :number
Type:
- number
MAX_POWER :number
Type:
- number
MAX_RAY_LENGTH :number
Type:
- number
MAX_SCALE :number
Type:
- number
MIN_BAILOUT :number
Type:
- number
MIN_EPSILON :number
Type:
- number
MIN_ITER :number
Type:
- number
MIN_POWER :number
Type:
- number
adapter :GPUAdapter
WebGPU Adapter
Type:
- GPUAdapter
bailout :number
Type:
- number
camera :Camera
Camera object
Type:
camera_enabled :boolean
Flag to enable camera updates
Type:
- boolean
context :GPUCanvasContext
WebGPU Canvas Context
Type:
- GPUCanvasContext
currentSection :Object
Current section being recorded
Type:
- Object
device :GPUDevice
WebGPU Device
Type:
- GPUDevice
dt :number
Delta time between frames
Type:
- number
epsilon :number
Type:
- number
input :Object
Input controls
Type:
- Object
isRecording :boolean
Flag to indicate if recording is active
Type:
- boolean
lastTime :number
Last recorded time
Type:
- number
max_iter :number
Type:
- number
nextStartTime :number
Next start time for a section
Type:
- number
pathData
pathData is an array of sections, each section representing a continuous movement period
Each section has the following structure:
{
startTime: [timestamp of the start of the section],
endTime: [timestamp of the end of the section],
camera: [{
pos: [x1, y1, z1], // Position of the camera at each second
rot: [pitch, 0, yaw],
...
}],
parameters: [
{ epsilon: value, max_iter: value, power: value, bailout: value }, // Parameters at each second
...
]
}
pipeline :GPURenderPipeline
Pipeline for rendering
Type:
- GPURenderPipeline
pipeline_bindgroup :GPUBindGroup
Pipeline bind group
Type:
- GPUBindGroup
power :number
Type:
- number
range_bailout :HTMLInputElement
Type:
- HTMLInputElement
range_bailout_text :HTMLInputElement
Type:
- HTMLInputElement
range_epsilon :HTMLInputElement
Type:
- HTMLInputElement
range_epsilon_text :HTMLInputElement
Type:
- HTMLInputElement
range_max_iterations :HTMLInputElement
Type:
- HTMLInputElement
range_max_iterations_text :HTMLInputElement
Type:
- HTMLInputElement
range_power :HTMLInputElement
Type:
- HTMLInputElement
range_power_text :HTMLInputElement
Type:
- HTMLInputElement
range_scale :HTMLInputElement
Type:
- HTMLInputElement
range_scale_text :HTMLInputElement
Type:
- HTMLInputElement
renderpass_descriptor :GPURenderPassDescriptor
Render pass descriptor for WebGPU
Type:
- GPURenderPassDescriptor
(constant) saveTime :number
Interval for saving data (in milliseconds)
Type:
- number
state_parameters :number
State of parameters (0 - default, 1 - changed, 2 - awaiting upload)
Type:
- number
surface :HTMLCanvasElement
Surface for rendering
Type:
- HTMLCanvasElement
swapchain_format :GPUTextureFormat
Swap chain format for WebGPU
Type:
- GPUTextureFormat
ts :number
Timestamp for the current frame
Type:
- number
uniforms_camera :Float32Array
Uniform data for camera
Type:
- Float32Array
uniforms_camera_buffer :GPUBuffer
Uniform buffer for camera
Type:
- GPUBuffer
uniforms_parameters :Float32Array
Uniform data for parameters
Type:
- Float32Array
uniforms_parameters_buffer :GPUBuffer
Uniform buffer for parameters
Type:
- GPUBuffer
Methods
adapt()
Adapts camera and rendering parameters based on the distance to the fractal surface.
distanceToBulb(pos) → {number}
Calculates the distance to the fractal bulb.
Parameters:
Name | Type | Description |
---|---|---|
pos |
Array | Position array [x, y, z]. |
Returns:
The calculated distance.
- Type
- number
draw()
Handles the rendering of each frame, updating GPU resources and executing the render pass.
hexToRgb(hex) → {Object|null}
Converts a hex color string to an RGB object.
Parameters:
Name | Type | Description |
---|---|---|
hex |
string | The hex color string. |
Returns:
RGB color object or null if invalid.
- Type
- Object | null
init()
Initializes the application. Sets up UI, events, WebGPU, and D3 visualization.
init_events()
Sets up event listeners for UI interactions and other user inputs.
init_ui()
Initializes UI elements by querying and storing references to DOM elements.
(async) init_webgpu() → {Promise.<void>}
Initializes WebGPU components including device, context, pipeline, and uniforms.
Returns:
A promise that resolves when WebGPU is fully initialized.
- Type
- Promise.<void>
jumpTo(data)
Adjusts camera and rendering parameters based on the selected data point.
Parameters:
Name | Type | Description |
---|---|---|
data |
Object | Data point containing the parameters to jump to. |
keydown(e)
Handles keydown events for the document.
Manages recording state and other key-based interactions.
Parameters:
Name | Type | Description |
---|---|---|
e |
KeyboardEvent | The keyboard event object. |
keyup(e)
Handles keyup events for the document.
Updates the input state based on the released key.
Parameters:
Name | Type | Description |
---|---|---|
e |
KeyboardEvent | The keyboard event object. |
lineSpacing(epsilon) → {string}
Determines the line spacing for the D3 visualization based on epsilon.
Parameters:
Name | Type | Description |
---|---|---|
epsilon |
number | The epsilon value used for line spacing. |
Returns:
The dash array string for SVG path.
- Type
- string
mandelbulb_sdf(pos) → {number}
Computes the Signed Distance Function (SDF) for the Mandelbulb fractal at a given position.
Parameters:
Name | Type | Description |
---|---|---|
pos |
Float32Array | The position to compute the SDF at. |
Returns:
The computed distance.
- Type
- number
on_scale_changed()
Handles changes to the scale range input.
Updates the camera scale and UI tooltip.
preprocessData() → {Array}
Preprocesses data for D3 visualization.
Returns:
The preprocessed data array.
- Type
- Array
ray_marching(ray_origin, ray_dir) → {number}
Performs ray marching to compute the distance from a ray origin to the Mandelbulb fractal surface.
Parameters:
Name | Type | Description |
---|---|---|
ray_origin |
Float32Array | The origin of the ray. |
ray_dir |
Float32Array | The direction of the ray. |
Returns:
The distance from the ray origin to the fractal surface.
- Type
- number
renderRecordingState()
Renders the state of recording in the visualization.
renderVisualization()
Renders the visualization using D3.
reset_mouse_accumulation()
Resets mouse movement accumulation.
reset_user()
Resets the user settings to default values.
Resets camera position, rotation, and UI elements to their default states.
run()
Main loop function which updates and renders each frame.
setup_uniforms()
Sets up uniform buffers for camera and parameters.
surface_mousedown()
Handles mouse button press on the surface.
Toggles camera control and manages recording state.
surface_mousemove(e)
Handles mouse movement over the surface.
Parameters:
Name | Type | Description |
---|---|---|
e |
MouseEvent | The mouse event object. |
surface_resized()
Handles the resize event for the surface.
Updates the dimensions of the rendering surface and the camera aspect ratio.
update()
Updates the logic for each frame, including camera and input processing.
update_parameter_tooltips()
Updates the text content of UI text to reflect current parameter values.
update_uniforms()
Updates the uniform buffers with current camera and parameter data.
upload_uniforms()
Uploads the updated uniforms to the GPU.