main.js

"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
        }
    ]
};