https://github.com/SuboptimalEng/volume-rendering

Skip to content
Toggle navigation
 
Sign in

  * Product
      +  
        Actions
        Automate any workflow
      +  
        Packages
        Host and manage packages
      +  
        Security
        Find and fix vulnerabilities
      +  
        Codespaces
        Instant dev environments
      +  
        Copilot
        Write better code with AI
      +  
        Code review
        Manage code changes
      +  
        Issues
        Plan and track work
      +  
        Discussions
        Collaborate outside of code
    Explore
      + All features
      + Documentation
      + GitHub Skills
      + Blog
  * Solutions
    For
      + Enterprise
      + Teams
      + Startups
      + Education
    By Solution
      + CI/CD & Automation
      + DevOps
      + DevSecOps
    Resources
      + Learning Pathways
      + White papers, Ebooks, Webinars
      + Customer Stories
      + Partners
  * Open Source
      +  
        GitHub Sponsors
        Fund open source developers
      +  
        The ReadME Project
        GitHub community articles
    Repositories
      + Topics
      + Trending
      + Collections
  * Pricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search
[                    ]
Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

[                    ] [ ] Include my email address so I can be
contacted
Cancel Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name [                    ] 
Query [                    ]

To see all available qualifiers, see our documentation.

Cancel Create saved search
Sign in
Sign up
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session. You switched accounts on another tab or window. Reload
to refresh your session. Dismiss alert
{{ message }}
SuboptimalEng / volume-rendering Public

  * Notifications
  * Fork 1
  * Star 70
  * 

 The code for my volume rendering implementation in Three.js, GLSL,
and React.

License

View license
70 stars 1 fork Branches Tags Activity
Star
Notifications

  * Code
  * Issues 1
  * Pull requests 0
  * Actions
  * Projects 0
  * Security
  * Insights

Additional navigation options

  * Code
  * Issues
  * Pull requests
  * Actions
  * Projects
  * Security
  * Insights

SuboptimalEng/volume-rendering

This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
 main
BranchesTags
  
Go to file
Code

Folders and files

       Name                Name          Last commit     Last commit
                                           message          date
Latest commit

 

History

47 Commits
 
_demos              _demos                               

public              public                               

src                 src                                  

.eslintrc.cjs       .eslintrc.cjs                        

.gitignore          .gitignore                           

LICENSE             LICENSE                              

README.md           README.md                            

index.html          index.html                           

package-lock.json   package-lock.json                    

package.json        package.json                         

postcss.config.js   postcss.config.js                    

tailwind.config.js  tailwind.config.js                   

tsconfig.json       tsconfig.json                        

tsconfig.node.json  tsconfig.node.json                   

vite.config.ts      vite.config.ts                       

View all files

Repository files navigation

  * README
  * License

 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.

[foot-01]

[foot-02]

[bonsai-01]

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.

  * Foot - https://klacansky.com/open-scivis-datasets/foot/
    foot_256x256x256_uint8.raw
  * Skull - https://klacansky.com/open-scivis-datasets/skull/
    skull_256x256x256_uint8.raw
  * Bonsai - https://klacansky.com/open-scivis-datasets/bonsai/
    bonsai_256x256x256_uint8.raw

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

 

  * Will Usher's Blog Post - https://www.willusher.io/webgl/2019/01/
    13/volume-rendering-with-webgl
  * Open Scientific Visualization Datasets - https://klacansky.com/
    open-scivis-datasets
  * The Art of Code - https://www.youtube.com/watch?v=S8AWd66hoCo
  * Inigo Quilez - https://iquilezles.org/articles/palettes/

License

 

Shield: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 4.0 International License.

CC BY-NC-SA 4.0

About

 The code for my volume rendering implementation in Three.js, GLSL,
and React.

Topics

javascript typescript shaders glsl volume-rendering three-js

Resources

Readme

License

View license
Activity

Stars

70 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages 0

No packages published

Languages

  * GLSL 46.3%
  * TypeScript 41.4%
  * CSS 6.6%
  * JavaScript 3.7%
  * HTML 2.0%

Footer

 (c) 2024 GitHub, Inc.

Footer navigation

  * Terms
  * Privacy
  * Security
  * Status
  * Docs
  * Contact
  * Manage cookies
  * Do not share my personal information

You can't perform that action at this time.