As mentioned earlier, the primary data structure for numerical computations in the library is a rectangular grid/image. This type of data structure increases the efficiency of the WebGL programs through simplifying the parallelization and workload balancing on the GPU. Although the underlying data structures in the WebGL applications remain rectangular grids/images, the extension to 3D simulations is still straightforward and can be achieved by considering the entire domain to be a large image that is a grid of sub-images, where each sub-image corresponds to a slice of the third dimension. Assuming that the data are arranged in an mx by my grid, we can use the following function in our fragment shaders to access the data structure.

// Accessing 3D coordinate (texCoord) of ’S’ sampler

vec4 Texture3D( sampler2D S, vec3 texCoord )


vec4vColor1, vColor2 ;/* colors on bottom and top slices */

floatx, y ; /* coordinate on the 2D data structure */

floatwd = mx*my - 1.0 ;/* max slice number in S*/

float zSliceNo =

floor( texCoord.z*mx*my) ; /* bottom slice no */

x = texCoord.x / mx ;

y = texCoord.y / my ;

x += (mod(zSliceNo,mx)/mx) ;

y += floor((wd-zSliceNo)/ mx )/my ;

vColor1 = texture( S, vec2(x,y) ) ;/* color on bottom slice*/

zSliceNo = ceil( texCoord.z*mx*my) ;/* top slice no*/

x = texCoord.x / mx ;

y = texCoord.y / my ;

x += (mod(zSliceNo,mx)/mx) ;

y += floor((wd-zSliceNo)/ mx )/my ;

vColor2 = texture( S, vec2(x,y) ) ;/* color on top slice*/

// Interpolating between the top and bottom slice to

// get the color for the texCoord.z

return mix(




) ;


Using such a data structure actually facilitates importing personalized data. As needed, computerized tomography (CT) scan data for the ventricular or atrial structures can be easily imported into the WebGL programs as images because segmentations will come exactly in that format and avoid the need of meshing or remeshing. Similarly, fiber orientation data can be imported and used in the WebGL programs in the same way from diffusion tensor MRI images, further increasing the facility of the programs of the library. In this work, the irregular boundaries from the 3D structures are handled by a well-established phase-field method (30). However, it is possible to use the same image data structures to store connectivity and coordinate information about computational meshes to be used for methods such as finite volume or finite elements.

Note: The content above has been extracted from a research article, so it may not display correctly.

Please log in to submit your questions online.
Your question will be posted on the Bio-101 website. We will send your questions to the authors of this protocol and Bio-protocol community members who are experienced with this method. you will be informed using the email address associated with your Bio-protocol account.

We use cookies on this site to enhance your user experience. By using our website, you are agreeing to allow the storage of cookies on your computer.