Skip to content
Snippets Groups Projects
Commit 6c62c871 authored by bauderse68422's avatar bauderse68422 :elephant:
Browse files

initial commit

parent 9d05eed3
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 10523 additions and 0 deletions
.gitignore 0 → 100644
+ 73
− 0
View file @ 6c62c871
#
build
magnetic_reconnection_512x512x512_float32.raw
zeiss_680x680x680_uint8.raw
#LaTeX specific #
##################
*.aux
*.bbl
*.bcf
*.blg
*.brf
*.fls
*.glg
*.glo
*.gls
*.idx
*.ilg
*.ind
*.ist
*.lof
*.log
*.lol
*.lot
*.nlo
*.nls
*.out
*.toc
thesis.fdb_latexmk
thesis.synctex.gz
thesis.run.xml
# Compiled source #
###################
*.com
*.class
*.dll
*.o
*.so
build
# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# Logs and databases #
######################
*.log
*.sql
*.sqlite
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
.vscode
.jshintrc 0 → 100644
+ 17
− 0
View file @ 6c62c871
{
"strict": "global",
"esversion": 9,
"browser": true,
"globals": {
"console": true,
"glUtils": true,
"fileloader": true,
"Mat4x4": true,
"Vector3": true,
"Vector4": true,
"Camera": true,
"Controls": true,
"setRenderer": true,
"store": true
}
}
bin/http.exe 0 → 100644
+ 0
− 0
View file @ 6c62c871
File added
bin/serve.bat 0 → 100644
+ 1
− 0
View file @ 6c62c871
http.exe -p 80 ..\raycaster
raycaster/favicon.ico 0 → 100644
+ 0
− 0
View file @ 6c62c871
raycaster/favicon.ico

1.37 KiB

raycaster/index.html 0 → 100644
+ 69
− 0
View file @ 6c62c871
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Volume Raycaster</title>
<link rel="stylesheet" type="text/css" href="./src/util/style.css">
</head>
<body>
<div class="main-container">
<div class="control-container">
<h1>WebGL Raycaster</h1>
<div class="container-shader">
<label for="select-shader">Shader</label>
<select id="select-shader" class="select-shader" name="select-shader">
<option value="singlePass">Single Pass Fragment Shader</option>
<option value="coloredCube">Colored Cube</option>
</select>
</div>
<div class="container-raw">
<label for="select-raw">Dataset</label>
<select id="select-raw" class="select-raw" name="select-raw">
<option value="Bonsai">Bonsai (20MB)</option>
<option value="Foot">Foot (20MB)</option>
<option value="Fuel">Fuel (1MB)</option>
<option value="Hydrogen Atom">Hydrogen Atom (2MB)</option>
<option value="Aneurism">Aneurism (20MB)</option>
<option value="Zeiss">Zeiss (310MB)</option>
<option value="MagneticReconnection">Magnetic Reconnection (530MB)</option>
</select>
</div>
<div class="container-resolution">
<p>Volume resolution:</p>
<p id="resoX">X: 256</p>
<p id="resoY">Y: 256</p>
<p id="resoZ">Z: 256</p>
</div>
<div class="container-brightness">
<label for="brightness">Brightness</label>
<input name="brightness" class="input-field" id="brightness" type="number" value="10" min="0"/>
</div>
<div class="container-samples">
<label for="samples">Samples</label>
<input name="samples" class="input-field" id="samples" type="number" value="512" min="1"/>
</div>
<div class="container-lowField">
<label for="lowField">Opacity Min Value</label>
<input name="lowField" class="input-field" id="lowValue" type="number" value="0"/>
</div>
<div class="container-highField">
<label for="hifhField">Opacity Max Value</label>
<input name="highField" class="input-field" id="highValue" type="number" value="255"/>
</div>
</div>
<div id="canvas-container-id" class="canvas-container-class">
<canvas id="webgl-canvas-id" class="webgl-canvas-class">
Use browser supporting "canvas".
</canvas>
</div>
</div>
<script src="main.js"></script>
<script src="./src/webGL/raycaster.js"></script>
<script src="./src/util/webgl-utils.js"></script>
<script src="./src/util/matrix.js"></script>
<script src="./src/util/fileLoader.js"></script>
<script src="./src/util/camera.js"></script>
<script src="./src/controller/controls.js"></script>
</body>
</html>
raycaster/main.js 0 → 100644
+ 217
− 0
View file @ 6c62c871
"use strict";
/**
* The main function initializes all necessary objects, fetches the shader and volumedata, and
* start the first render process with the default values from the store.
* @param {!WebGLRenderingContext} gl The webgl context
* @async
*/
async function main(gl) {
let canvas = glUtils.getCanvas();
store.globals.camera = new Camera();
let controls = new Controls(store.globals.camera, canvas);
const vShaderSource = await fileloader.loadShaderFile(store.shader + '.vert');
const fShaderSource = await fileloader.loadShaderFile(store.shader + '.frag');
store.globals.raw = await fileloader.loadRawFile(store.data.path);
store.globals.renderer = setRenderer(gl, vShaderSource, fShaderSource);
store.globals.camera.goToHomePosition(store.homeVector);
store.globals.renderer.modelViewMatrix = store.globals.camera.getViewMatrix();
}
document.addEventListener("DOMContentLoaded", function(event) {
main(glUtils.createGLContext());
});
window.addEventListener("resize", function(event) {
updateView();
});
document.getElementById('select-raw').onchange = function(event) {
const value = event.target.value;
const data = store.rawFiles.find(element => element.name === value);
store.data = data;
store.lowValue = store.data.minValue;
store.highValue = store.data.maxValue;
store.maxValue = store.data.maxValue;
store.step = store.data.step;
const lowField = document.getElementById('lowValue');
const highField = document.getElementById('highValue');
lowField.value = store.lowValue;
lowField.min = store.lowValue;
lowField.step = store.step;
highField.value = store.highValue;
highField.max = store.maxValue;
highField.step = store.step;
document.getElementById('resoX').innerHTML = 'X: ' + data.xSize;
document.getElementById('resoY').innerHTML = 'Y: ' + data.ySize;
document.getElementById('resoZ').innerHTML = 'Z: ' + data.zSize;
main(glUtils.createGLContext());
};
document.getElementById('lowValue').onchange = function(event) {
store.lowValue = event.target.value;
updateView();
};
document.getElementById('highValue').onchange = function(event) {
store.highValue = event.target.value;
updateView();
};
document.getElementById('brightness').onchange = function(event) {
store.brightness = event.target.value;
updateView();
};
document.getElementById('samples').onchange = function(event) {
store.numSamples = event.target.value;
updateView();
};
document.getElementById('select-shader').onchange = function(event) {
const value = event.target.value;
if (value === 'singlePass') {
store.homeVectorValue = 0.5;
store.raycast = true;
}
else if (value === 'coloredCube') {
store.homeVectorValue = 2.8;
store.raycast = false;
}
else {
store.raycast = false;
store.homeVectorValue = 2.8;
}
store.shader = event.target.value;
main(glUtils.createGLContext());
};
/**
* This function updates the necessary matrices and camera object values for initializing
* a new render process.
*/
function updateView() {
store.globals.renderer.modelViewMatrix = store.globals.camera.getViewMatrix();
store.globals.camera.input = true;
store.globals.camera.updateCamera();
}
/**
* The store contains the global values, the current dataset and the list of possible other datasets.
*/
const store = {
data: {
name: 'Bonsai',
path: 'bonsai_256x256x256_uint8.raw',
xSize: 256,
ySize: 256,
zSize: 256,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
globals: {
renderer: {},
camera: {},
raw: {}
},
raycast: true,
lowValue: 0,
highValue: 255,
maxValue: 255,
brightness: 10,
numSamples: 512,
homeVector: {},
homeVectorValue: 0.5,
shader: 'singlePass',
rawFiles: [
{
name: 'Bonsai',
path: 'bonsai_256x256x256_uint8.raw',
xSize: 256,
ySize: 256,
zSize: 256,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
{
name: 'Foot',
path: 'foot_256x256x256_uint8.raw',
xSize: 256,
ySize: 256,
zSize: 256,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
{
name: 'Fuel',
path: 'fuel_64x64x64_uint8.raw',
xSize: 64,
ySize: 64,
zSize: 64,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
{
name: 'Hydrogen Atom',
path: 'hydrogen_atom_128x128x128_uint8.raw',
xSize: 128,
ySize: 128,
zSize: 128,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
{
name: 'Aneurism',
path: 'aneurism_256x256x256_uint8.raw',
xSize: 256,
ySize: 256,
zSize: 256,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
{
name: 'Zeiss',
path: 'zeiss_680x680x680_uint8.raw',
xSize: 680,
ySize: 680,
zSize: 680,
minValue: 0,
maxValue: 255,
resolution: "uint8",
step: 1
},
{
name: 'MagneticReconnection',
path: 'magnetic_reconnection_512x512x512_float32.raw',
xSize: 512,
ySize: 512,
zSize: 512,
minValue: 0,
maxValue: 1000,
resolution: "float32",
step: 1
}
]
};
raycaster/out/Camera.html 0 → 100644
+ 284
− 0
View file @ 6c62c871
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: Camera</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: Camera</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>Camera<span class="signature">()</span><span class="type-signature"></span></h2>
<div class="class-description">Class representing a cameraobject in WebGL. This class is based on the following code https://github.com/PacktPublishing/Real-Time-3D-Graphics-with-WebGL-2/blob/master/common/js/Camera.js</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Camera"><span class="type-signature"></span>new Camera<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Creates a new camera object with the default values.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="src_util_camera.js.html">src/util/camera.js</a>, <a href="src_util_camera.js.html#line12">line 12</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="getViewMatrix"><span class="type-signature"></span>getViewMatrix<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Mat4x4.html">Mat4x4</a>}</span></h4>
<div class="description">
Returns the current inverted view matrix.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="src_util_camera.js.html">src/util/camera.js</a>, <a href="src_util_camera.js.html#line126">line 126</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Mat4x4.html">Mat4x4</a></span>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Fileloader.html">Fileloader</a></li><li><a href="module-glUtils.html">glUtils</a></li><li><a href="module-Renderer.html">Renderer</a></li></ul><h3>Classes</h3><ul><li><a href="Camera.html">Camera</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Mat4x4.html">Mat4x4</a></li><li><a href="Vector3.html">Vector3</a></li><li><a href="Vector4.html">Vector4</a></li></ul><h3>Global</h3><ul><li><a href="global.html#main">main</a></li><li><a href="global.html#store">store</a></li><li><a href="global.html#updateView">updateView</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Mar 10 2020 18:17:55 GMT+0100 (GMT+01:00)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
\ No newline at end of file
raycaster/out/Controls.html 0 → 100644
+ 246
− 0
View file @ 6c62c871
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: Controls</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: Controls</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>Controls<span class="signature">(camera, canvas)</span><span class="type-signature"></span></h2>
<div class="class-description">Class representing a controller object. This class is based on the following code https://github.com/PacktPublishing/Real-Time-3D-Graphics-with-WebGL-2/blob/master/common/js/Controls.js</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Controls"><span class="type-signature"></span>new Controls<span class="signature">(camera, canvas)</span><span class="type-signature"></span></h4>
<div class="description">
Creates a controlling object for handling the user inputs.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>camera</code></td>
<td class="type">
<span class="param-type"><a href="Camera.html">Camera</a></span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>canvas</code></td>
<td class="type">
<span class="param-type">HTMLCanvasElement</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="src_controller_controls.js.html">src/controller/controls.js</a>, <a href="src_controller_controls.js.html#line14">line 14</a>
</li></ul></dd>
</dl>
</div>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Fileloader.html">Fileloader</a></li><li><a href="module-glUtils.html">glUtils</a></li><li><a href="module-Renderer.html">Renderer</a></li></ul><h3>Classes</h3><ul><li><a href="Camera.html">Camera</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Mat4x4.html">Mat4x4</a></li><li><a href="Vector3.html">Vector3</a></li><li><a href="Vector4.html">Vector4</a></li></ul><h3>Global</h3><ul><li><a href="global.html#main">main</a></li><li><a href="global.html#store">store</a></li><li><a href="global.html#updateView">updateView</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Mar 10 2020 18:17:55 GMT+0100 (GMT+01:00)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
\ No newline at end of file
raycaster/out/Mat4x4.html 0 → 100644
+ 3544
− 0
View file @ 6c62c871
This diff is collapsed.
raycaster/out/Vector3.html 0 → 100644
+ 337
− 0
View file @ 6c62c871
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: Vector3</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: Vector3</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>Vector3<span class="signature">(optionalVector)</span><span class="type-signature"> &rarr; {<a href="Vector3.html">Vector3</a>}</span></h2>
<div class="class-description">This class represents a vector with three components.</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Vector3"><span class="type-signature"></span>new Vector3<span class="signature">(optionalVector)</span><span class="type-signature"> &rarr; {<a href="Vector3.html">Vector3</a>}</span></h4>
<div class="description">
Creates a new empty vector or a copy from an existing Vector3 object.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>optionalVector</code></td>
<td class="type">
<span class="param-type"><a href="Vector3.html">Vector3</a></span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="src_util_matrix.js.html">src/util/matrix.js</a>, <a href="src_util_matrix.js.html#line445">line 445</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Returns either a copy of the given vector or a vector with default values of zero.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Vector3.html">Vector3</a></span>
</dd>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="normalizeVector"><span class="type-signature"></span>normalizeVector<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
This function normalizes the current Vector3 object.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="src_util_matrix.js.html">src/util/matrix.js</a>, <a href="src_util_matrix.js.html#line462">line 462</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Fileloader.html">Fileloader</a></li><li><a href="module-glUtils.html">glUtils</a></li><li><a href="module-Renderer.html">Renderer</a></li></ul><h3>Classes</h3><ul><li><a href="Camera.html">Camera</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Mat4x4.html">Mat4x4</a></li><li><a href="Vector3.html">Vector3</a></li><li><a href="Vector4.html">Vector4</a></li></ul><h3>Global</h3><ul><li><a href="global.html#main">main</a></li><li><a href="global.html#store">store</a></li><li><a href="global.html#updateView">updateView</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Mar 10 2020 18:17:55 GMT+0100 (GMT+01:00)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
\ No newline at end of file
raycaster/out/Vector4.html 0 → 100644
+ 245
− 0
View file @ 6c62c871
This diff is collapsed.
raycaster/out/fonts/OpenSans-Bold-webfont.eot 0 → 100644
+ 0
− 0
View file @ 6c62c871
File added
raycaster/out/fonts/OpenSans-Bold-webfont.svg 0 → 100644
+ 1830
− 0
View file @ 6c62c871
This diff is collapsed.
raycaster/out/fonts/OpenSans-Bold-webfont.woff 0 → 100644
+ 0
− 0
View file @ 6c62c871
File added
raycaster/out/fonts/OpenSans-BoldItalic-webfont.eot 0 → 100644
+ 0
− 0
View file @ 6c62c871
File added
raycaster/out/fonts/OpenSans-BoldItalic-webfont.svg 0 → 100644
+ 1830
− 0
View file @ 6c62c871
This diff is collapsed.
raycaster/out/fonts/OpenSans-BoldItalic-webfont.woff 0 → 100644
+ 0
− 0
View file @ 6c62c871
File added
raycaster/out/fonts/OpenSans-Italic-webfont.eot 0 → 100644
+ 0
− 0
View file @ 6c62c871
File added
raycaster/out/fonts/OpenSans-Italic-webfont.svg 0 → 100644
+ 1830
− 0
View file @ 6c62c871
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment