To experience real-time image processing in your webbrowser

Drag plugin to your bookmarks bar:




To try out the tool on your own, you can visit OpenNeuro to use it on a sample MRI file.

See for different examples of image processing and vertex transformation performed with the WebGL Image Processor:

AREA Selection
SOBEL Edge Detection and Vertex Transformation Splitscreen with original and processed content. SOBEL Edge detection and transformation in Y-Direction by Factor 0.5
Source: https://threejs.org/examples/webgl_framebuffer_texture.html
FULL
HIGHLIGHTING and Vertex Transformation Splitscreen with processed and original content. HIGHLIGHTING and transformation in Y-Direction by Factor 0.25
Source: https://threejs.org/examples/webgl_lightprobe.html
INVERTER
INVERTER Color of pixel getting inverted.
Source: https://openneuro.org/datasets/ds004697/versions/1.0.1/file-display/sub-003:ses-1:anat:sub-003_ses-1_T1w.nii.gz
LAPLACE Edge Detection
LAPLACE Edge Detection Edge detection filter with laplace calculation
Source: https://openneuro.org/datasets/ds004697/versions/1.0.1/file-display/sub-003:ses-1:anat:sub-003_ses-1_T1w.nii.gz
AREA
AREA Processing performed only for Region of Interest (ROI) selection Source: https://openneuro.org/datasets/ds004697/versions/1.0.1/file-display/sub-003:ses-1:anat:sub-003_ses-1_T1w.nii.gz
SMILEY
SMILEY Content gets fully overwritten with smiley
PSEUDOCOLOR
INVERTER Color of pixel getting inverted.
Source: https://openneuro.org/datasets/ds004697/versions/1.0.1/file-display/sub-003:ses-1:anat:sub-003_ses-1_T1w.nii.gz


F.A.Q.

  1. What can be done with this tool?
  2. Perform real-time image processing and vertex transformation on existing WebGL contents of other websites without access to their server infrastrucutre or data. You can use the tool on websites whereever WebGL is used as visualization framework. To perform different processing algorithms existing fragment shaders can be used or new ones can be added.
  3. How to use the tool?
  4. Drag the above available bookmarklet to your browsers bookmark list. When on a compatible site, click the bookmarklet and the neccessary JavaScript gets automatically injected. A User Interface will show up, to choose between different settings and shaders. To start processing now press your Insert key. To disable processing at anytime press the same key again.
  5. Which types of processing can be done?
  6. Image processing / Shaders: Dynamic color highlighting, Area selection processing, Sobel Edge Detection, Laplace Edge Detection, Color Inverter, Gaussian Blur, Full content replacement, Contrast enhancement, Sharpening, Pseudocoloring of grayscale images
    Vertex Transformation: Scaling of the existing content in X and Y direction.
  7. How can I develop my own processing algorithms?
  8. Program a new fragment shader, according to the existing ones. Add it into the directory "fragmentShader" and run npm to compile the program again. As soon as the new and custom version is deployed, your shader will show up in the list of available.
  9. Can I contribute to the framework?
  10. Yes, your're welcome to. Whether it is a new shader / processing algorithm or some work onto the backend, just let us know by submitting a pull request on the linked GitHub Repository.