CN107424211A - WebGL volume reconstruction methods - Google Patents
WebGL volume reconstruction methods Download PDFInfo
- Publication number
- CN107424211A CN107424211A CN201710452739.XA CN201710452739A CN107424211A CN 107424211 A CN107424211 A CN 107424211A CN 201710452739 A CN201710452739 A CN 201710452739A CN 107424211 A CN107424211 A CN 107424211A
- Authority
- CN
- China
- Prior art keywords
- image
- webgl
- axle position
- canvas
- point
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
- G06T17/10—Constructive solid geometry [CSG] using solid primitives, e.g. cylinders, cubes
Landscapes
- Physics & Mathematics (AREA)
- Geometry (AREA)
- Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Software Systems (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Image Generation (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of WebGL volume reconstructions method, including：According to original axis bit image, by canvas by each axle position Image Rendering a to designated area, and the texture objects into WebGL are cached；Determine sight angle of the reconstruction image relative to three dimensional object；Straight line is determined further according to each point in reconstruction image, and the straight line is consistent with sight angle relative to the angle of reference axis；Find out the intersection point that each bar straight line is formed with each axle position image, determine the axle position image where the intersection point, and then the texture objects where the axle position image and the texture objects region are obtained, the pixel value of the point is taken out from the texture objects using GLSL texture2D functions；Reconstruction image is shown in the form of two dimensional image.The present invention realizes the volume reconstruction based on WEBGL in a browser first, and calculating speed is fast, fast response time.
Description
Technical field
The present invention relates to image processing techniques, more particularly to a kind of WebGL volume reconstructions method.
Background technology
Volume reconstruction method (VR) is a kind of post processing on multi-slice CT, i.e., right on the basis of cross-section Surface scan
The tissue that some graticules are specified carries out the restructuring of different azimuth, so as to obtain the two dimensional image of different azimuth.
General volume reconstruction method is all that multipad or APP have realization, without the realization on WebGL.It is existing
The displaying in Web or WebGL, be all the 3D models for precomputing program, then simply by this 3D model on webpage
Displaying, is not to be rebuild on webpage, can not adjust display parameters.
The content of the invention
For above-mentioned technical problem, the present invention has designed and developed a kind of WebGL volume reconstructions method, and it is first in browser
In realize the volume reconstruction based on WEBGL, calculating speed is fast, fast response time, to the compatible good of the sequence of big data.
Technical scheme provided by the invention is：
A kind of WebGL volume reconstructions method, including：
Step 1: according to original axis bit image, by canvas by each axle position Image Rendering to a designated area, and delay
WebGL texture objects are saved as, wherein, each point on each axle position image is corresponding with three-dimensional coordinate and pixel value；
Step 2: a reference axis is determined on the three dimensional object gone out as constructed by axle position image, it is determined that required display
Reconstruction image relative to the reference axis of the three dimensional object sight angle；Further according in the reconstruction image of required display
Each point determines a straight line for passing through each point, and the straight line is consistent with the sight angle relative to the angle of the reference axis；
The three-dimensional coordinate of the intersection point formed successively with each axle position image when each bar passes straight through the three dimensional object is found out, according to each friendship
The three-dimensional coordinate of point determines axle position image where the intersection point, and then obtains the texture objects where the axle position image and should
Texture objects region, the pixel value of the point is taken out from the texture objects using GLSL texture2D functions；
Step 3: according to the pixel value of each point in the reconstruction image of required display, by the reconstruction figure of required display
As being shown in the form of two dimensional image.
Preferably, in described WebGL volume reconstruction methods, in the step 1, by canvas by each axle position figure
As being plotted to a designated area, and the texture objects into WebGL are cached, its detailed process is：One canvas pairs of structure
As, and obtain WebGL context from the canvas objects；Take out what current device was supported from WebGL Conext
The maximum of texture number and the maximum of texture sizes；Canvas pairs is generated according to the maximum of texture sizes
The maximum of elephant, and the axle position image for needing to cache is plotted to the region specified using canvas drawimage methods；When
After the canvas is drawn completely, the canvas is converted into WebGL texture objects.
Preferably, in described WebGL volume reconstruction methods, in the step 3, by the reconstruction figure of required display
As when being shown in the form of two dimensional image, being also adjusted to display parameters.
Preferably, in described WebGL volume reconstruction methods, the display parameters include display bone parameter and display
Skin parameters；The display parameters are adjusted, its detailed process is：Selected in the display parameters, so that institute
Two dimensional image is stated to be set for showing according to the display parameters.
WebGL volume reconstructions method of the present invention has the advantages that：
(1) initiate realizes the volume reconstruction based on WEBGL in a browser；
(2) the pure browser end three-dimensional reconstruction realized using WebGL, user can carry out whole ginsengs in browser end
Several adjustment simultaneously sees result immediately；
(3) image manipulation and calculating are carried out using WEBGL, the hardware-accelerated computing capability that WEBGL can be used to provide, meter
It is more preferable compared with the performance that JS is calculated to calculate performance.
Brief description of the drawings
Fig. 1 is the principle schematic of WebGL volume reconstructions method of the present invention；
Fig. 2 is original CT figure resulting in one embodiment of WebGL volume reconstructions method of the present invention；
Fig. 3 is the weight that display bone parameter is applied in one embodiment of WebGL volume reconstructions method of the present invention
Build image；
Fig. 4 is the weight that display skin parameters are applied in one embodiment of WebGL volume reconstructions method of the present invention
Build image.
Embodiment
The present invention is described in further detail below in conjunction with the accompanying drawings, to make those skilled in the art with reference to specification text
Word can be implemented according to this.
As shown in figure 1, the present invention provides a kind of WebGL volume reconstruction sides, including：
Step 1 by canvas by each axle position Image Rendering to a designated area, and is delayed according to original axis bit image
WebGL texture objects are saved as, wherein, each point on each axle position image is corresponding with three-dimensional coordinate and pixel value；
Step 2: a reference axis is determined on the three dimensional object gone out as constructed by axle position image, it is determined that required display
Reconstruction image relative to the reference axis of the three dimensional object sight angle；Further according in the reconstruction image of required display
Each point determines a straight line for passing through each point, and the straight line is consistent with the sight angle relative to the angle of the reference axis；
The three-dimensional coordinate of the intersection point formed successively with each axle position image when each bar passes straight through the three dimensional object is found out, according to each friendship
The three-dimensional coordinate of point determines axle position image where the intersection point, and then obtains the texture objects where the axle position image and should
Texture objects region, the pixel value of the point is taken out from the texture objects using GLSL texture2D functions；
Step 3: according to the pixel value of each point in the reconstruction image of required display, by the reconstruction figure of required display
As being shown in the form of two dimensional image.
In the present invention, the reconstruction image of required display is watched three dimensional object being formed from some visual angle
Image, in order to generate the reconstruction image, for needing to be shown in certain point in the reconstruction image on screen, find from this point
The straight line (straight line i.e. shown in Fig. 1) of threedimensional model (i.e. three dimensional object) is penetrated, sequentially finds the straight line and each original CT
The intersection point of section (i.e. each axle position image), last application parameter computational algorithm will calculate final display result a little.Counterweight
The all pixels built on image obtain final display picture using this calculating.Such as need processing to rotate, then need to count again
Initial point is calculated relative to the position of 3-dimensional object and the angle of light, it is postrotational so as to this logical calculated can be used to go out
Reconstruction image.
In above process, the straight line is formed by connecting by some points, and the three-dimensional coordinate of these points is known, by these
The three-dimensional coordinate of point is compared with the three-dimensional coordinate of the point of stored axle position image, when the three-dimensional coordinate one of two points
Cause, then illustrate that the two point reality are straight line and the intersection point of an axle position image, then can be determined by the intersection point accordingly
Axle position image.
In addition, in step 2, because WebGL object planes coordinate is all decimal, when the reconstruction figure shown required for
, can be on the tangent plane picture by required display during axle position image as where the three-dimensional coordinate of upper each point determines the point
The three-dimensional coordinate of each point finds the point of an approximate axle position image.
If realized using the method for traditional Web programmings, take picture (i.e. axle position image) and take the picture that certain is put in picture
Plain value is all very time-consuming operation.Traditional Web programmed methods are not suitable for realizing volume three-dimensional reconstruction, but this intensive
Volume reconstruction mode be but exactly that WebGL is good at.
In a preferred embodiment, in described WebGL volume reconstruction methods, in the step 1, pass through
Each axle position Image Rendering a to designated area is cached the texture objects into WebGL by canvas, and its detailed process is：
A canvas object is built, and WebGL context are obtained from the canvas objects；Taken out from WebGL Conext current
The maximum of texture number and the maximum of texture sizes that equipment is supported；Given birth to according to the maximum of texture sizes
Into the maximum of Canvas objects, and by the axle position image for needing to cache finger is plotted to using canvas drawimage methods
Fixed region；After the canvas is drawn completely, the canvas is converted into WebGL texture objects.
I.e., in this embodiment, by using WebGL, calculating speed is drastically increased, shortens the response time.
In a preferred embodiment, in described WebGL volume reconstruction methods, in the step 3, by required for
When the reconstruction image of display is shown in the form of two dimensional image, also display parameters are adjusted.
Display parameters can be adjusted as needed, to view the reconstruction image of different display formats.
In a preferred embodiment, in described WebGL volume reconstruction methods, the display parameters include display bone
Head parameter and display skin parameters；The display parameters are adjusted, its detailed process is：Carried out in the display parameters
Selection, so that the two dimensional image is set for showing according to the display parameters.
Fig. 2 to Fig. 4 is refer to, Fig. 2 gives an original CT figure, and actual original CT axle position figures have hundreds of,
Here only provide one and be used as example.Fig. 3 gives the reconstruction shown in this embodiment using showing after bone parameter
Image；Fig. 4 is given in the embodiment using the reconstruction image shown after display skin parameters.
Although embodiment of the present invention is disclosed as above, it is not restricted in specification and embodiment listed
With it can be applied to various suitable the field of the invention completely, can be easily for those skilled in the art
Other modification is realized, therefore under the universal limited without departing substantially from claim and equivalency range, it is of the invention and unlimited
In specific details and shown here as the legend with description.
Claims (4)
- A kind of 1. WebGL volume reconstructions method, it is characterised in that including：Step 1: according to original axis bit image, by canvas by each axle position Image Rendering a to designated area, and cache into WebGL texture objects, wherein, each point on each axle position image is corresponding with three-dimensional coordinate and pixel value；Step 2: a reference axis is determined on the three dimensional object gone out as constructed by axle position image, it is determined that the weight of required display Build sight angle of the image relative to the reference axis of the three dimensional object；Further according to each point in the reconstruction image of required display A straight line for passing through each point is determined, and the straight line is consistent with the sight angle relative to the angle of the reference axis；Find out The three-dimensional coordinate of the intersection point formed successively with each axle position image when each bar passes straight through the three dimensional object, according to each intersection point Three-dimensional coordinate determines the axle position image where the intersection point, and then obtains the texture objects where the axle position image and should Texture objects region, the pixel value of the point is taken out from the texture objects using GLSL texture2D functions；Step 3: according to the pixel value of each point in the reconstruction image of required display, by the reconstruction image of required display with The form of two dimensional image is shown.
- 2. WebGL volume reconstructions method as claimed in claim 1, it is characterised in that, will by canvas in the step 1 Each axle position Image Rendering caches the texture objects into WebGL to a designated area, and its detailed process is：Structure one Canvas objects, and obtain WebGL context from the canvas objects；Current device is taken out from WebGL Conext to support The maximum of texture number and the maximum of texture sizes；Canvas is generated according to the maximum of texture sizes The maximum of object, and the axle position image for needing to cache is plotted to the region specified using canvas drawimage methods； After the canvas is drawn completely, the canvas is converted into WebGL texture objects.
- 3. WebGL volume reconstructions method as claimed in claim 2, it is characterised in that in the step 3, by required display Reconstruction image when being shown in the form of two dimensional image, also display parameters are adjusted.
- 4. WebGL volume reconstructions method as claimed in claim 3, it is characterised in that the display parameters include display bone Parameter and display skin parameters；The display parameters are adjusted, its detailed process is：Selected in the display parameters Select, so that the two dimensional image is set for showing according to the display parameters.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710452739.XA CN107424211B (en) | 2017-06-15 | 2017-06-15 | WebGL volume reconstruction method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710452739.XA CN107424211B (en) | 2017-06-15 | 2017-06-15 | WebGL volume reconstruction method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107424211A true CN107424211A (en) | 2017-12-01 |
| CN107424211B CN107424211B (en) | 2021-01-05 |
Family
ID=60429624
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710452739.XA Active CN107424211B (en) | 2017-06-15 | 2017-06-15 | WebGL volume reconstruction method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107424211B (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101443815A (en) * | 2006-05-11 | 2009-05-27 | 皇家飞利浦电子股份有限公司 | Method and apparatus for reconstructing an image |
| US20150007113A1 (en) * | 2013-06-28 | 2015-01-01 | Silicon Graphics International Corp. | Volume rendering for graph renderization |
| TW201529043A (en) * | 2014-01-27 | 2015-08-01 | Univ Nat Taiwan | Method for reconstruction of blood vessels 3D structure |
| WO2016165209A1 (en) * | 2015-04-17 | 2016-10-20 | 青岛海信医疗设备股份有限公司 | 3d image cropping method |
| CN106708981A (en) * | 2016-12-08 | 2017-05-24 | 彭志勇 | MPR three-dimensional reconstruction method based on WebGL |
| CN106709864A (en) * | 2016-12-08 | 2017-05-24 | 彭志勇 | WebGL-based large-capacity image caching method |
-
2017
- 2017-06-15 CN CN201710452739.XA patent/CN107424211B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101443815A (en) * | 2006-05-11 | 2009-05-27 | 皇家飞利浦电子股份有限公司 | Method and apparatus for reconstructing an image |
| US20150007113A1 (en) * | 2013-06-28 | 2015-01-01 | Silicon Graphics International Corp. | Volume rendering for graph renderization |
| TW201529043A (en) * | 2014-01-27 | 2015-08-01 | Univ Nat Taiwan | Method for reconstruction of blood vessels 3D structure |
| WO2016165209A1 (en) * | 2015-04-17 | 2016-10-20 | 青岛海信医疗设备股份有限公司 | 3d image cropping method |
| CN106708981A (en) * | 2016-12-08 | 2017-05-24 | 彭志勇 | MPR three-dimensional reconstruction method based on WebGL |
| CN106709864A (en) * | 2016-12-08 | 2017-05-24 | 彭志勇 | WebGL-based large-capacity image caching method |
Non-Patent Citations (2)
| Title |
|---|
| MOVANIA MUHAMMAD MOBEEN 等: ""High-Performance Volume Rendering on the Ubiquitous WebGL Platform"", 《2012 IEEE 14TH INTERNATIONAL CONFERENCE ON HIGH PERFORMANCE COMPUTING AND COMMUNICATION & 2012 IEEE 9TH INTERNATIONAL CONFERENCE ON EMBEDDED SOFTWARE AND SYSTEMS》 * |
| 池峰: ""医学影像容积重建及可视化技术研究"", 《中国优秀博硕士学位论文全文数据库(硕士)-信息科技辑》 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107424211B (en) | 2021-01-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104427325B (en) | Fast integration image generating method and the naked eye three-dimensional display system with user mutual | |
| US20100156901A1 (en) | Method and apparatus for reconstructing 3d model | |
| US8149237B2 (en) | Information processing apparatus and program | |
| CN110602477B (en) | Display method, display device, electronic equipment and storage medium | |
| WO2012037863A1 (en) | Method for simplifying and progressively transmitting 3d model data and device therefor | |
| US20190026935A1 (en) | Method and system for providing virtual reality experience based on ultrasound data | |
| Mossel et al. | Streaming and exploration of dynamically changing dense 3d reconstructions in immersive virtual reality | |
| CN109979002A (en) | Scenario building system and method based on WebGL three-dimensional visualization | |
| CN1870054A (en) | Simultaneous projection of multi-branched vessels and their context on a single image | |
| GB2406252A (en) | Generation of texture maps for use in 3D computer graphics | |
| US20070248259A1 (en) | Apparatus for reconstructing multi-dimensional image data and a method thereof | |
| CN104217461B (en) | A parallax mapping method based on a depth map to simulate a real-time bump effect | |
| CN111145338A (en) | Chair model reconstruction method and system based on single-view RGB image | |
| CN110544318A (en) | Mass model loading method based on scene resolution of display window | |
| JP2023178274A (en) | Method and system for generating polygon meshes approximating surfaces using root-finding and iteration for mesh vertex positions | |
| CN107424211A (en) | WebGL volume reconstruction methods | |
| JP2008067915A (en) | Medical picture display | |
| Lee et al. | Bimodal vertex splitting: Acceleration of quadtree triangulation for terrain rendering | |
| CN106708981A (en) | MPR three-dimensional reconstruction method based on WebGL | |
| Beacco et al. | Efficient rendering of animated characters through optimized per‐joint impostors | |
| WO2020018134A1 (en) | Rendering 360 depth content | |
| Díaz-García et al. | Progressive ray casting for volumetric models on mobile devices | |
| CN1667652A (en) | Vision convex hull accelerated drafting method based on graph processing chips | |
| Beacco et al. | A flexible approach for output‐sensitive rendering of animated characters | |
| CN115035231A (en) | Shadow baking method, shadow baking device, electronic apparatus, and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |