16 |
111 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/docgen/custom_theme/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var fs = require('fs'),
4 | path = require('path'),
5 | File = require('vinyl'),
6 | vfs = require('vinyl-fs'),
7 | _ = require('lodash'),
8 | concat = require('concat-stream'),
9 | GithubSlugger = require('github-slugger'),
10 | createFormatters = require('documentation').util.createFormatters,
11 | LinkerStack = require('documentation').util.LinkerStack,
12 | hljs = require('highlight.js');
13 |
14 | function isFunction(section) {
15 | return section.kind === 'function' || section.kind === 'typedef' && section.type.type === 'NameExpression' && section.type.name === 'Function';
16 | }
17 |
18 | module.exports = function (comments, config) {
19 | var linkerStack = new LinkerStack(config).namespaceResolver(comments, function (namespace) {
20 | var slugger = new GithubSlugger();
21 | return '#' + slugger.slug(namespace);
22 | });
23 |
24 | var formatters = createFormatters(linkerStack.link);
25 |
26 | hljs.configure(config.hljs || {});
27 |
28 | var sharedImports = {
29 | imports: {
30 | slug(str) {
31 | var slugger = new GithubSlugger();
32 | return slugger.slug(str);
33 | },
34 | shortSignature(section) {
35 | var prefix = '';
36 | if (section.kind === 'class') {
37 | prefix = 'new ';
38 | } else if (!isFunction(section)) {
39 | return section.name;
40 | }
41 | return prefix + section.name + formatters.parameters(section, true);
42 | },
43 | signature(section) {
44 | var returns = '';
45 | var prefix = '';
46 | if (section.kind === 'class') {
47 | prefix = 'new ';
48 | } else if (!isFunction(section)) {
49 | return section.name;
50 | }
51 | if (section.returns.length) {
52 | returns = ': ' + formatters.type(section.returns[0].type);
53 | }
54 | return prefix + section.name + formatters.parameters(section) + returns;
55 | },
56 | md(ast, inline) {
57 | if (inline && ast && ast.children.length && ast.children[0].type === 'paragraph') {
58 | ast = {
59 | type: 'root',
60 | children: ast.children[0].children.concat(ast.children.slice(1))
61 | };
62 | }
63 | return formatters.markdown(ast);
64 | },
65 | formatType: formatters.type,
66 | autolink: formatters.autolink,
67 | highlight(example) {
68 | if (config.hljs && config.hljs.highlightAuto) {
69 | return hljs.highlightAuto(example).value;
70 | }
71 | return hljs.highlight('js', example).value;
72 | }
73 | }
74 | };
75 |
76 | sharedImports.imports.renderSectionList = _.template(fs.readFileSync(path.join(__dirname, 'section_list._'), 'utf8'), sharedImports);
77 | sharedImports.imports.renderSection = _.template(fs.readFileSync(path.join(__dirname, 'section._'), 'utf8'), sharedImports);
78 | sharedImports.imports.renderNote = _.template(fs.readFileSync(path.join(__dirname, 'note._'), 'utf8'), sharedImports);
79 | sharedImports.imports.renderParamProperty = _.template(fs.readFileSync(path.join(__dirname, 'paramProperty._'), 'utf8'), sharedImports);
80 |
81 | var pageTemplate = _.template(fs.readFileSync(path.join(__dirname, 'index._'), 'utf8'), sharedImports);
82 |
83 | // push assets into the pipeline as well.
84 | return new Promise(resolve => {
85 | vfs.src([__dirname + '/assets/**'], { base: __dirname }).pipe(concat(function (files) {
86 | resolve(files.concat(new File({
87 | path: 'index.html',
88 | contents: new Buffer(pageTemplate({
89 | docs: comments,
90 | config
91 | }), 'utf8')
92 | })));
93 | }));
94 | });
95 | };
96 |
--------------------------------------------------------------------------------
/docgen/custom_theme/note._:
--------------------------------------------------------------------------------
1 |
17 |
96 |
110 |
18 |
19 |
20 |
25 |
95 | ![<%- config['project-name'] %>](assets/name_1000.png)
v<%- config['project-version'] %>
26 |
91 | -
27 | <% docs.forEach(function(doc) { %>
28 | <% var hasMembers = doc.members.static.length || doc.members.instance.length %>
29 |
-
32 | <%- doc.name %>
33 | <% if (hasMembers) { %>▸<% } %>
34 |
35 | <% if (hasMembers) { %>
36 | 37 | <% if (doc.members.static && doc.members.static.length) { %> 38 |86 | <% } %> 87 |
-
39 |
- Static members 40 | <% doc.members.static.forEach(function(member) { %> 41 |
- 44 | <%- member.name %> 45 | 46 | <% }) %> 47 |
-
51 |
- Instance members 52 | <% doc.members.instance.forEach(function(member) { %> 53 |
- 56 | <%- member.name %> 57 | 58 | <% }) %> 59 |
-
63 |
- Inner members 64 | <% doc.members.inner.forEach(function(member) { %> 65 |
- 68 | #<%- member.name %> 69 | 70 | <% }) %> 71 |
-
75 |
- Events 76 | <% doc.members.events.forEach(function(member) { %> 77 |
- 80 | ⓔ <%- member.name %> 81 | 82 | <% }) %> 83 |
88 | <% }) %>
89 |
92 | See on GitHub
93 |
94 | <%= formatType(property.type) %>
3 | <% if (property.default) { %>
4 | (default <%- property.default %>)
5 | <% } %>
5 | <% if (typeof nested === 'undefined') { %>
6 |
16 | <% } %>
17 |
18 | <%= md(section.description) %>
19 |
20 | 7 | <%- section.name %> 8 |
9 | <% } %> 10 | <% if (section.context && section.context.github) { %> 11 | 12 | <%= section.context.github.path %> 13 | 14 | <% } %> 15 |<%= signature(section) %>
21 | <% if (section.type) { %>
22 | 23 | Type: 24 | <%= formatType(section.type) %> 25 |
26 | <% } %> 27 | <% if (section.augments.length) { %> 28 |29 | Extends 30 | <% if (section.augments) { %> 31 | <%= section.augments.map(function(tag) { 32 | return autolink(tag.name); 33 | }).join(', ') %> 34 | <% } %> 35 |
36 | <% } %> 37 | 38 | <% if (section.deprecated) { %>Deprecated: <%= md(section.deprecated, true) %>
<% }%>
39 | <% if (section.version) { %>Version: <%- section.version %>
<% }%>
40 | <% if (section.license) { %>License: <%- section.license %>
<% }%>
41 | <% if (section.author) { %>Author: <%- section.author %>
<% }%>
42 | <% if (section.copyright) { %>Copyright: <%= md(section.copyright, true) %>
<% }%>
43 | <% if (section.since) { %>Since: <%- section.since %>
<% }%>
44 |
45 | <% if (section.params.length) { %>
46 | Parameters
47 |
48 | <% section.params.forEach(function(param) { %>
49 |
80 | <% } %>
81 |
82 | <% if (section.properties.length) { %>
83 |
50 |
57 |
76 | <% } %>
77 |
78 | <% }) %>
79 |
51 | <%- param.name%>
55 | <% if (param.properties && param.properties.length) { %>
56 | (<%= formatType(param.type) %><% if (param.default) { %>
52 | = <%- param.default %><% } %>)
53 | <%= md(param.description, true) %>
54 | | Name | 64 |Description | 65 |
|---|
Properties
84 |
85 | <% section.properties.forEach(function(property) { %>
86 |
107 | <% } %>
108 |
109 | <% if (section.returns.length) { %>
110 | <% section.returns.forEach(function(ret) { %>
111 |
87 | <%- property.name%>
105 | <% }) %>
106 | (<%= formatType(property.type) %>)
88 | <% if (property.default) { %>
89 | (default <%- property.default %>)
90 | <% } %><% if (property.description) {
91 | %>: <%= md(property.description, true) %><%
92 | } %>
93 | <% if (property.properties && property.properties.length) { %>
94 | -
95 | <% property.properties.forEach(function(property) { %>
96 |
<%- property.name %><%= formatType(property.type) %> 97 | <% if (property.default) { %> 98 | (default<%- property.default %>) 99 | <% } %> 100 | <%= md(property.description) %>
101 | <% }) %>
102 |
Returns
112 | <%= formatType(ret.type) %><% if (ret.description) { %>:
113 | <%= md(ret.description, true) %>
114 | <% }%>
115 | <% }) %>
116 | <% } %>
117 |
118 | <% if (section.throws.length) { %>
119 | Throws
120 | -
121 | <% section.throws.forEach(function(throws) { %>
122 |
- <%= formatType(throws.type) %>: <%= md(throws.description, true) %> 123 | <% }); %> 124 |
Example
129 | <% section.examples.forEach(function(example) { %>
130 | <% if (example.caption) { %><%= md(example.caption) %>
<% } %> 131 |<%= highlight(example.description) %>132 | <% }) %> 133 | <% } %> 134 | 135 | <% if (section.members.static && section.members.static.length) { %> 136 |
Static Members
137 | <%= renderSectionList({ members: section.members.static, renderSection: renderSection, renderParamProperty: renderParamProperty, noun: 'Static Member' }) %>
138 | <% } %>
139 |
140 | <% if (section.members.instance && section.members.instance.length) { %>
141 | Instance Members
142 | <%= renderSectionList({ members: section.members.instance, renderSection: renderSection, renderParamProperty: renderParamProperty, noun: 'Instance Member' }) %>
143 | <% } %>
144 |
145 | <% if (section.members.events && section.members.events.length) { %>
146 | Events
147 | <%= renderSectionList({ members: section.members.events, renderSection: renderSection, renderParamProperty: renderParamProperty, noun: 'Event' }) %>
148 | <% } %>
149 |
2 | <% members.forEach(function(member) { %>
3 |
21 |
--------------------------------------------------------------------------------
/examples/_doubleRotateCamCrew.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 | <% }) %>
20 |
5 |
10 |
6 | ▸
7 | <%= shortSignature(member) %>
8 |
9 |
11 | <%= renderSection({
12 | section: member,
13 | renderSection: renderSection,
14 | renderParamProperty: renderParamProperty,
15 | nested: true
16 | }) %>
17 |
18 |
8 | 
9 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/examples/chosecamera.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | The origin axes is always at (0,0,0) and point towards the positive direction with a length of 10mm.
11 | The ortho-plane axes always follow the ortho plane and thus can rotate and translate. They go both ways and are much longer.
12 | By default, the two set of axes are visible 13 | • 14 | source 15 |
16 | Toggle11 | The ortho-plane axes always follow the ortho plane and thus can rotate and translate. They go both ways and are much longer.
Toggle12 | By default, the two set of axes are visible 13 | • 14 | source 15 |
57 |
58 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
58 |
59 | Choose the camera! For the orthographic cameras (aka. non-perspective ), you can pan the image by dragging and rotate with SHIFT + dragging.
60 | •
61 | source
62 |
63 |
74 |
79 |
80 |
241 |
242 |
243 |
244 |
--------------------------------------------------------------------------------
/examples/colormaps.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | perspective
75 | axial
76 | coronal
77 | sagittal
78 |
26 |
27 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
93 |
94 |
95 |
96 |
--------------------------------------------------------------------------------
/examples/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | overflow: hidden;
3 | width: 100%;
4 | height: 100%;
5 | margin: 0;
6 | font-family: monospace;
7 | }
8 |
9 | a {
10 | text-decoration: none;
11 | color: #FF91D7;
12 | }
13 |
14 | code {
15 | background: #d6ffec;
16 | padding: 2px 6px 2px 6px;
17 | border-radius: 3px;
18 | color: #256948;
19 | }
20 |
21 | #renderCanvas {
22 | width: 100%;
23 | height: 100%;
24 | }
25 |
26 | #spinner {
27 | display: none;
28 | pointer-events: none;
29 | position: absolute;
30 | width: 100px;
31 | height: 100px;
32 | background: #ffffff;
33 | border-radius: 50%;
34 | padding: 15px;
35 | bottom: 0;
36 | left: 0;
37 | right: 0;
38 | margin: auto;
39 | top: 0;
40 | -webkit-box-shadow: 0px 0px 43px 0px rgba(0,0,0,0.19);
41 | -moz-box-shadow: 0px 0px 43px 0px rgba(0,0,0,0.19);
42 | box-shadow: 0px 0px 43px 0px rgba(0,0,0,0.19);
43 | }
44 |
45 | #fileInput {
46 | /*position: absolute;
47 | margin: 10px;*/
48 | }
49 |
50 | #info {
51 | pointer-events: none;
52 | position: fixed;
53 | width: 100vw;
54 | height: 10vh;
55 | background: rgba(255, 255, 255, 0.75);
56 | color: #5a5a5a;
57 | bottom: 0;
58 | font-size: 2em;
59 | text-align: center;
60 | line-height: 10vh;
61 | }
62 |
63 |
64 | #header {
65 | position: fixed;
66 | top: 0;
67 | left: 0;
68 | right: 0;
69 | width: 100vw;
70 | background-color: white;
71 | display: inline;
72 | }
73 |
74 | #header img {
75 | width: 230px;
76 | padding: 10px;
77 | }
78 |
79 | #header .description {
80 | float: right;
81 | width: calc(100vw - 270px);
82 | text-align: right;
83 | padding: 17px 15px 15px 0px;
84 | }
85 |
86 | #header a {
87 | color: #27dd85;
88 | }
89 |
--------------------------------------------------------------------------------
/examples/double.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
28 | Hover the colormaps on the left so that they can apply on the loaded volume.
29 | For UI purpose, we can easily get a
33 | 29 | For UI purpose, we can easily get a
canvas representation of the colormaps using the method .getColormapsCanvas() or the list of them with .getListOfColormaps() and then applying one with the method .setColormapSlotN()
30 | •
31 | source
32 |
8 |
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/examples/doubleRotate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | When loading two volumes registered in the same space, they will align thanks to the use of their affine transformation, even though they don't have the same size, resolution of internal alignment.
11 | Then, it becomes interesting to use Quickvoxel features such as colormap, blending, brightness and contrast. Each of these feature apply independantly to each volume. 12 | • 13 | source 14 |
15 | 11 | Then, it becomes interesting to use Quickvoxel features such as colormap, blending, brightness and contrast. Each of these feature apply independantly to each volume. 12 | • 13 | source 14 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/examples/doubleSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | Loading two volumes and use blending + colormapping does not seem to slow down any rotation of the orthogonal planes
11 | •
12 | source
13 |
14 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
9 |
10 | When loading more more than one volume, a spinner is an easy way to tell your user that something is currently happening
11 | •
12 | source
13 |
14 | 
23 |
24 |
25 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/examples/doubleTranslate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/examples/doubleTranslateCameraCrew.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | Plane translation made easy. As you notice the perspective camera (also called 'main') follows the center of the planes
11 | •
12 | source
13 |
14 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/examples/images/lego_spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pixpipe/quickvoxelcore/88e0bfec82b3bf497cd091dbee2e8284867a440b/examples/images/lego_spinner.gif
--------------------------------------------------------------------------------
/examples/js/addsourcelink.js:
--------------------------------------------------------------------------------
1 | let sourcelinkEl = document.getElementById('sourcelink')
2 | let repoBaseUrl = 'https://github.com/Pixpipe/quickvoxelcore/blob/master/examples/'
3 | let filenameSplit = window.location.pathname.split('/')
4 | let basename = filenameSplit[filenameSplit.length-1]
5 |
6 | sourcelinkEl.href = repoBaseUrl + basename
7 |
8 |
9 | // evaluate boolean
10 | function bool(v){ return v==="false" || v==="null" || v==="NaN" || v==="undefined" || v==="0" ? false : !!v; }
11 |
12 | // hides the header with a GET argument (convenient for iframed demos)
13 | var url = new URL(window.location.href)
14 | var hideheader = bool(url.searchParams.get("hideheader"))
15 |
16 | if (hideheader) {
17 | document.getElementById('header').style.display = 'none'
18 | }
19 |
--------------------------------------------------------------------------------
/examples/oblique.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | Thanks to the
14 | CameraCrew object and the method .defineCamera(), we can change the camera, from perspective (called 'main') to orthogonal (called 'sagittal', 'axial' and 'coronal')
11 | •
12 | source
13 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/examples/oblique2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | You can easily translate and rotate the ortho plane system using the methods
14 | .translateAlongXDominant(), .translateAlongYDominant(), .translateAlongZDominant() and .rotateAroundXDominant(), .rotateAroundYDominant(), .rotateAroundZDominant(). Units are in millimeters and radian.
11 | •
12 | source
13 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/examples/simple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | Obliquing made easy
11 | •
12 | source
13 |
14 |
8 |
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/examples/simpleFile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | This example loads a MRI from a NIfTI file with the method
11 | The 3 color axis show the origin(0, 0, 0) . Axis length are 10mm, the green, blue and red axis respectivelly points toward +x, +y and +z in MNI space (or Talairach coordinates)
12 | •
13 | source
14 |
15 | .addVolumeFromUrl(), decodes it with Pixpipe and displays it as a registered 3D texture in subject coordinates.11 | The 3 color axis show the origin
8 |
9 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/examples/simpleSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | You can load local file using a simple file dialog and the method
17 | .addVolumeFromFile()
11 | •
12 | source
13 | 14 | 15 |
16 |
9 |
10 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
10 |
11 | Quickvoxel Core provides some events such as
15 | startAddingVolume and volumeReady, giving the possibility to show and hide a spinner based on the loading and processing stage or the data
12 | •
13 | source
14 |
24 |
25 |
26 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/examples/time.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
81 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/examples/translate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 | A fMRI is loaded and displayed on top of the structural MRI. Since it has a time dimension, we programatically play the time series
11 | •
12 | source
13 |
14 |
9 |
10 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quickvoxelcore",
3 | "version": "0.1.6",
4 | "description": "The core for QuickVoxel app",
5 | "homepage": "https://github.com/Pixpipe/quickvoxelcore",
6 | "repository": "jonathanlurie/quickvoxelcore",
7 | "moduleName": "quickvoxelcore",
8 | "entry": "src/main.js",
9 | "main": "dist/quickvoxelcore.js",
10 | "es6": "dist/quickvoxelcore.es6.js",
11 | "min": "dist/quickvoxelcore.min.js",
12 | "scripts": {
13 | "test": "echo \"Error: no test specified\" && exit 1",
14 | "build": "rollup -c",
15 | "dev": "serve . & rollup -w -c rollup.config.dev.js",
16 | "doc": "documentation build src/main.js --project-name 'Quickvoxel Core' --config ./docgen/config.yml --sort-order 'alpha' --theme ./docgen/custom_theme/ -o ./doc/ -f html; documentation build src/main.js --project-name 'Quickvoxel Core' --config ./docgen/config.yml --sort-order 'alpha' -f md > documentation.md",
17 | "lintfix": "standard --fix src/**/*.js",
18 | "lint": "standard src/**/*.js"
19 | },
20 | "author": "Jonathan Lurie",
21 | "license": "MIT",
22 | "devDependencies": {
23 | "babel-core": "^6.26.0",
24 | "babel-plugin-external-helpers": "^6.22.0",
25 | "babel-preset-es2015-rollup": "^3.0.0",
26 | "babylonjs": "^3.2.0-rc.2",
27 | "documentation": "^6.1.0",
28 | "pixpipe": "^0.2.0",
29 | "rollup": "^0.57.0",
30 | "rollup-plugin-babel": "^3.0.2",
31 | "rollup-plugin-commonjs": "^9.1.0",
32 | "rollup-plugin-glsl": "^1.2.0",
33 | "rollup-plugin-node-builtins": "^2.1.2",
34 | "rollup-plugin-node-globals": "^1.1.0",
35 | "rollup-plugin-node-resolve": "^3.0.0",
36 | "rollup-plugin-replace": "^2.0.0",
37 | "rollup-plugin-uglify": "^3.0.0",
38 | "serve": "^6.3.1",
39 | "standard": "^11.0.1"
40 | },
41 | "dependencies": {}
42 | }
43 |
--------------------------------------------------------------------------------
/rollup.config.dev.js:
--------------------------------------------------------------------------------
1 | import pkg from './package.json'
2 |
3 | /*
4 | The dev version of the Rollup config does not transpile to ES5
5 | and outputs a single umd package.
6 | */
7 |
8 | import commonjs from 'rollup-plugin-commonjs'
9 | import nodeResolve from 'rollup-plugin-node-resolve'
10 | import builtins from 'rollup-plugin-node-builtins'
11 | import globals from 'rollup-plugin-node-globals'
12 | import glsl from 'rollup-plugin-glsl'
13 | import replace from 'rollup-plugin-replace'
14 |
15 | export default [
16 | {
17 | input: pkg.entry,
18 | output: {
19 | file: pkg.es6,
20 | name: pkg.name,
21 | sourcemap: true,
22 | format: 'umd'
23 | },
24 |
25 | plugins: [
26 | replace({
27 | exclude: 'node_modules/**',
28 | delimiters: ['<@', '@>'],
29 | APP_NAME: pkg.name,
30 | APP_VERSION: pkg.version
31 | }),
32 | nodeResolve({
33 | preferBuiltins: false
34 | }),
35 | commonjs(),
36 | globals(),
37 | builtins(),
38 | glsl({
39 | include: 'src/shaders/*.glsl',
40 | })
41 | ]
42 | }
43 | ];
44 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import pkg from './package.json'
2 |
3 | import builtins from 'rollup-plugin-node-builtins'
4 | import globals from 'rollup-plugin-node-globals'
5 | import commonjs from 'rollup-plugin-commonjs'
6 | import nodeResolve from 'rollup-plugin-node-resolve'
7 | import babel from 'rollup-plugin-babel'
8 | import uglify from 'rollup-plugin-uglify'
9 | import glsl from 'rollup-plugin-glsl'
10 | import replace from 'rollup-plugin-replace'
11 |
12 | export default [
13 |
14 | // bundle UMD ES6
15 | {
16 | input: pkg.entry,
17 | output: {
18 | file: pkg.es6,
19 | name: pkg.name,
20 | sourcemap: true,
21 | format: 'umd'
22 | },
23 |
24 | plugins: [
25 | replace({
26 | exclude: 'node_modules/**',
27 | delimiters: ['<@', '@>'],
28 | APP_NAME: pkg.name,
29 | APP_VERSION: pkg.version
30 | }),
31 | nodeResolve({
32 | preferBuiltins: false
33 | }),
34 | commonjs(),
35 | globals(),
36 | builtins(),
37 | glsl({
38 | include: 'src/shaders/*.glsl',
39 | })
40 | ]
41 | },
42 |
43 | // bundle UMD ES5
44 | {
45 | input: pkg.entry,
46 | output: {
47 | file: pkg.main,
48 | name: pkg.name,
49 | sourcemap: true,
50 | format: 'umd'
51 | },
52 |
53 | plugins: [
54 | replace({
55 | exclude: 'node_modules/**',
56 | delimiters: ['<@', '@>'],
57 | APP_NAME: pkg.name,
58 | APP_VERSION: pkg.version
59 | }),
60 | nodeResolve({
61 | preferBuiltins: false
62 | }),
63 | commonjs({ include: 'node_modules/**' }), // so Rollup can convert other modules to ES module
64 | globals(),
65 | builtins(),
66 | glsl({
67 | include: 'src/shaders/*.glsl',
68 | }),
69 | babel({
70 | exclude: 'node_modules/**',
71 | babelrc: false,
72 | presets: [ 'es2015-rollup' ]
73 | })
74 | ]
75 | },
76 |
77 | // bundle UMD ES5 MINIFIED
78 | {
79 | input: pkg.entry,
80 | output: {
81 | file: pkg.min,
82 | name: pkg.name,
83 | sourcemap: false,
84 | format: 'umd'
85 | },
86 |
87 | plugins: [
88 | replace({
89 | exclude: 'node_modules/**',
90 | delimiters: ['<@', '@>'],
91 | APP_NAME: pkg.name,
92 | APP_VERSION: pkg.version
93 | }),
94 | nodeResolve({
95 | preferBuiltins: false
96 | }),
97 | commonjs({ include: 'node_modules/**' }), // so Rollup can convert other modules to ES module
98 | globals(),
99 | builtins(),
100 | glsl({
101 | include: 'src/shaders/*.glsl',
102 | }),
103 | babel({
104 | exclude: 'node_modules/**',
105 | babelrc: false,
106 | presets: [ 'es2015-rollup' ]
107 | }),
108 | uglify()
109 | ]
110 | }
111 |
112 | ]
113 |
--------------------------------------------------------------------------------
/src/ColormapManager.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Author Jonathan Lurie - http://me.jonathanlurie.fr
3 | * License MIT
4 | * Link https://github.com/Pixpipe/quickvoxelcore
5 | * Lab MCIN - Montreal Neurological Institute
6 | */
7 |
8 | import { Colormap } from 'pixpipe/dist/pixpipe.esmodule.js'
9 | import { RawTexture as BJSRawTexture, Engine as BJSEngine, Texture as BJSTexture} from 'babylonjs/es6.js'
10 |
11 |
12 | /**
13 | * An instance of ColormapManager is used by RenderEngine so generate colormaps to apply on the volume.
14 | * Several types of colormaps are available, they are generated as `pixpipe.Image2D`, from which are made
15 | * `BABYLON.RawTexture` (2D) and HTML5 `Canvas`. The texture is to be sent to the shader while the canvas
16 | * can be used for UI purpose. Note that the original `pixpipe.Image2D` colormap is just used temporary
17 | * and is not kept in memory.
18 | */
19 | class ColormapManager {
20 |
21 | /**
22 | * Constructor
23 | * @param {BABYLON.Scene} scene - the babylonjs scene (necessary to generate textures)
24 | * @param {Number} [nbSamples=512] - number of samples generated per colormap
25 | */
26 | constructor (scene, nbSamples=512) {
27 | this._scene = scene
28 | this._nbSamples = nbSamples
29 | this._colormapTextures = {}
30 | this._colormapCanvas = {}
31 |
32 | this._createColormapTextures()
33 | this._defaultColormap = 'greys'
34 | }
35 |
36 |
37 | /**
38 | * @private
39 | * Generate BabylonJS textures correcponding to Pixpipe builtin colormaps
40 | */
41 | _createColormapTextures () {
42 | var styles = Colormap.getAvailableStyles()
43 | var cm = new Colormap()
44 |
45 | for (let i=0; i
10 |
11 | This example shows we can programatically change the position of the orthogonal planes. As we can see, the coronal plane was shifted above the origin
12 | •
13 | source
14 |
15 |