Global

Members

MAX_BAILOUT :number

Type:
  • number
Source:

MAX_ITER :number

Type:
  • number
Source:

MAX_POWER :number

Type:
  • number
Source:

MAX_RAY_LENGTH :number

Type:
  • number
Source:

MAX_SCALE :number

Type:
  • number
Source:

MIN_BAILOUT :number

Type:
  • number
Source:

MIN_EPSILON :number

Type:
  • number
Source:

MIN_ITER :number

Type:
  • number
Source:

MIN_POWER :number

Type:
  • number
Source:

adapter :GPUAdapter

WebGPU Adapter
Type:
  • GPUAdapter
Source:

bailout :number

Type:
  • number
Source:

camera :Camera

Camera object
Type:
Source:

camera_enabled :boolean

Flag to enable camera updates
Type:
  • boolean
Source:

context :GPUCanvasContext

WebGPU Canvas Context
Type:
  • GPUCanvasContext
Source:

currentSection :Object

Current section being recorded
Type:
  • Object
Source:

device :GPUDevice

WebGPU Device
Type:
  • GPUDevice
Source:

dt :number

Delta time between frames
Type:
  • number
Source:

epsilon :number

Type:
  • number
Source:

input :Object

Input controls
Type:
  • Object
Source:

isRecording :boolean

Flag to indicate if recording is active
Type:
  • boolean
Source:

lastTime :number

Last recorded time
Type:
  • number
Source:

max_iter :number

Type:
  • number
Source:

nextStartTime :number

Next start time for a section
Type:
  • number
Source:

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 ... ] }
Source:

pipeline :GPURenderPipeline

Pipeline for rendering
Type:
  • GPURenderPipeline
Source:

pipeline_bindgroup :GPUBindGroup

Pipeline bind group
Type:
  • GPUBindGroup
Source:

power :number

Type:
  • number
Source:

range_bailout :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_bailout_text :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_epsilon :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_epsilon_text :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_max_iterations :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_max_iterations_text :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_power :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_power_text :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_scale :HTMLInputElement

Type:
  • HTMLInputElement
Source:

range_scale_text :HTMLInputElement

Type:
  • HTMLInputElement
Source:

renderpass_descriptor :GPURenderPassDescriptor

Render pass descriptor for WebGPU
Type:
  • GPURenderPassDescriptor
Source:

(constant) saveTime :number

Interval for saving data (in milliseconds)
Type:
  • number
Source:

state_parameters :number

State of parameters (0 - default, 1 - changed, 2 - awaiting upload)
Type:
  • number
Source:

surface :HTMLCanvasElement

Surface for rendering
Type:
  • HTMLCanvasElement
Source:

swapchain_format :GPUTextureFormat

Swap chain format for WebGPU
Type:
  • GPUTextureFormat
Source:

ts :number

Timestamp for the current frame
Type:
  • number
Source:

uniforms_camera :Float32Array

Uniform data for camera
Type:
  • Float32Array
Source:

uniforms_camera_buffer :GPUBuffer

Uniform buffer for camera
Type:
  • GPUBuffer
Source:

uniforms_parameters :Float32Array

Uniform data for parameters
Type:
  • Float32Array
Source:

uniforms_parameters_buffer :GPUBuffer

Uniform buffer for parameters
Type:
  • GPUBuffer
Source:

Methods

adapt()

Adapts camera and rendering parameters based on the distance to the fractal surface.
Source:

distanceToBulb(pos) → {number}

Calculates the distance to the fractal bulb.
Parameters:
Name Type Description
pos Array Position array [x, y, z].
Source:
Returns:
The calculated distance.
Type
number

draw()

Handles the rendering of each frame, updating GPU resources and executing the render pass.
Source:

hexToRgb(hex) → {Object|null}

Converts a hex color string to an RGB object.
Parameters:
Name Type Description
hex string The hex color string.
Source:
Returns:
RGB color object or null if invalid.
Type
Object | null

init()

Initializes the application. Sets up UI, events, WebGPU, and D3 visualization.
Source:

init_events()

Sets up event listeners for UI interactions and other user inputs.
Source:

init_ui()

Initializes UI elements by querying and storing references to DOM elements.
Source:

(async) init_webgpu() → {Promise.<void>}

Initializes WebGPU components including device, context, pipeline, and uniforms.
Source:
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.
Source:

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.
Source:

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.
Source:

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.
Source:
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.
Source:
Returns:
The computed distance.
Type
number

on_scale_changed()

Handles changes to the scale range input. Updates the camera scale and UI tooltip.
Source:

preprocessData() → {Array}

Preprocesses data for D3 visualization.
Source:
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.
Source:
Returns:
The distance from the ray origin to the fractal surface.
Type
number

renderRecordingState()

Renders the state of recording in the visualization.
Source:

renderVisualization()

Renders the visualization using D3.
Source:

reset_mouse_accumulation()

Resets mouse movement accumulation.
Source:

reset_user()

Resets the user settings to default values. Resets camera position, rotation, and UI elements to their default states.
Source:

run()

Main loop function which updates and renders each frame.
Source:

setup_uniforms()

Sets up uniform buffers for camera and parameters.
Source:

surface_mousedown()

Handles mouse button press on the surface. Toggles camera control and manages recording state.
Source:

surface_mousemove(e)

Handles mouse movement over the surface.
Parameters:
Name Type Description
e MouseEvent The mouse event object.
Source:

surface_resized()

Handles the resize event for the surface. Updates the dimensions of the rendering surface and the camera aspect ratio.
Source:

update()

Updates the logic for each frame, including camera and input processing.
Source:

update_parameter_tooltips()

Updates the text content of UI text to reflect current parameter values.
Source:

update_uniforms()

Updates the uniform buffers with current camera and parameter data.
Source:

upload_uniforms()

Uploads the updated uniforms to the GPU.
Source: