Load one of the provided volume files through the GUI. Rotate the orbit camera around the bounding box using the left mouse button. Zoom using the scroll wheel. Maximum Intensity Projection or First Hit Compositing can be selected in the dropdown menu. The histogram can be used to create pins for controlling the transfer function. Press Ctrl + Left Mouse button to create a new pin. Left-Click a pin to select it. Press Shift + Left Mouse button to delete a selected pin. Left-Click a selected pin to change its color value. Left-Click, hold and drag a pin to select new thresholds for density and intensity. Hover over a bin to show number of density values within.
This framework uses three.js and d3.js for volume rendering and setting the appearance, respectively. The following files are provided:
- index.html: contains the HTML content. Please enter your names! Otherwise, it does not need to be changed (but can be, if required).
- style.css: CSS styles (can be adjusted, but does not need to be changed).
- three.js/build/three.js: Contains the three.js library. Do not modify!
- shaders: Folder containing a dummy vertex and fragment shader. Add your shaders to this folder!
- js: Folder containing all JavaScript files. Add new classes as separate js-files in this folder!
- vis1.js: Main script file. Needs to be modified.
- shader.js: Base shader class. Does not need to be modified. Derive your custom shader materials from this class!
- testShader.js: Example shader class demonstrating how to create and use a shader material using external .essl files. Should not be used in the final submission.
- camera.js: Simple orbit camera that moves nicely around our volumes. Does not need to be modified.
Created 2021 by Manuela Waldner, Diana Schalko, amd Laura Luidolt based on the Vis1 Task 1 Qt framework initially created by Johanna Schmidt, Tobias Klein, and Laura Luidolt.
Javascript files should go to folder 'js' and end with '.js'. All new javascript files have to be included in index.html.
Recommended IDE: Webstorm (free educational version available using TU Wien e-mail address)
Important: do not run index.html from the file system! Only execute it from inside WebStorm (by selecting a browser icon from the top right panel that appears when you open index.html) or from hosting the project within another web server. Opening index.html directly in the browser without a server will result in an error when trying to load the the .essl shader files.
.essl is the OpenGL ES shading language. Shader files should all be located in the folder 'shaders' and end with '.essl'.
Recommended code editor: Visual Studio Code (free): https://code.visualstudio.com/
Install syntax highlighting for shading languages: https://marketplace.visualstudio.com/items?itemName=slevesque.shader
Enable syntax highlighting: open shader file --> in the bar on the bottom right, switch from plain text to GLSL.