Show HN: Volume rendering 3D data in Three.js and GLSL
source link: https://github.com/SuboptimalEng/volume-rendering
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Repository files navigation
🌊 Volume Rendering
Volume rendering is a common technique used to render 3D medical imaging data such as MRIs or CT scans. This repo contains my implementation of the algorithm in Three.js, GLSL, and React.
I've posted a 30 second demo on my Twitter and r/GraphicsProgramming. This would not have been possible without Will Usher's blog post on volume rendering in WebGL. Check it out if you want more technical details on the subject.
Setup
git clone https://github.com/SuboptimalEng/volume-rendering.git
cd volume-rendering/
npm install
npm run dev
But wait, there's more! After running these commands, you will be able to open the project in localhost. However, there will be no image rendered on screen. Why, you may ask? Simple, I did not want to upload multiple 16MB data files to GitHub. To see the demo in action, you will need to download one of these files and upload them via the UI.
Note: The website I linked has tons of models, but not all of them will work. I've hard-coded this project to work with 256x256x256 uint8 files that are scaled 1x1x1.
References
License
Shield:
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK