CN112086147B - 一种基于WebGL的三维晶体结构可视化方法 - Google Patents
一种基于WebGL的三维晶体结构可视化方法 Download PDFInfo
- Publication number
- CN112086147B CN112086147B CN202011003353.9A CN202011003353A CN112086147B CN 112086147 B CN112086147 B CN 112086147B CN 202011003353 A CN202011003353 A CN 202011003353A CN 112086147 B CN112086147 B CN 112086147B
- Authority
- CN
- China
- Prior art keywords
- model
- atoms
- crystal structure
- crystal
- target
- 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.)
- Active
Links
- 239000013078 crystal Substances 0.000 title claims abstract description 133
- 238000007794 visualization technique Methods 0.000 title claims abstract description 15
- 239000000126 substance Chemical group 0.000 claims abstract description 46
- 239000000463 material Substances 0.000 claims abstract description 26
- 238000002050 diffraction method Methods 0.000 claims abstract description 20
- 238000012800 visualization Methods 0.000 claims abstract description 17
- 238000009877 rendering Methods 0.000 claims abstract description 7
- 239000011159 matrix material Substances 0.000 claims description 30
- 230000000694 effects Effects 0.000 claims description 12
- 238000006243 chemical reaction Methods 0.000 claims description 11
- 238000000034 method Methods 0.000 claims description 11
- 230000009466 transformation Effects 0.000 claims description 11
- 239000003086 colorant Substances 0.000 claims description 6
- 238000006664 bond formation reaction Methods 0.000 claims description 3
- 239000002184 metal Substances 0.000 claims description 3
- 229910052751 metal Inorganic materials 0.000 claims description 3
- 239000013598 vector Substances 0.000 claims description 3
- 230000000737 periodic effect Effects 0.000 abstract description 8
- 238000005516 engineering process Methods 0.000 abstract description 3
- 230000007547 defect Effects 0.000 abstract description 2
- 125000004429 atom Chemical group 0.000 description 78
- 125000004430 oxygen atom Chemical group O* 0.000 description 4
- SZVJSHCCFOBDDC-UHFFFAOYSA-N ferrosoferric oxide Chemical compound O=[Fe]O[Fe]O[Fe]=O SZVJSHCCFOBDDC-UHFFFAOYSA-N 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- AYFVYJQAPQTCCC-GBXIJSLDSA-N L-threonine Chemical compound C[C@@H](O)[C@H](N)C(O)=O AYFVYJQAPQTCCC-GBXIJSLDSA-N 0.000 description 1
- 241000341910 Vesta Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000004088 simulation Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16C—COMPUTATIONAL CHEMISTRY; CHEMOINFORMATICS; COMPUTATIONAL MATERIALS SCIENCE
- G16C20/00—Chemoinformatics, i.e. ICT specially adapted for the handling of physicochemical or structural data of chemical particles, elements, compounds or mixtures
- G16C20/80—Data visualisation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F30/00—Computer-aided design [CAD]
- G06F30/10—Geometric CAD
- G06F30/12—Geometric CAD characterised by design entry means specially adapted for CAD, e.g. graphical user interfaces [GUI] specially adapted for CAD
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F30/00—Computer-aided design [CAD]
- G06F30/20—Design optimisation, verification or simulation
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16C—COMPUTATIONAL CHEMISTRY; CHEMOINFORMATICS; COMPUTATIONAL MATERIALS SCIENCE
- G16C60/00—Computational materials science, i.e. ICT specially adapted for investigating the physical or chemical properties of materials or phenomena associated with their design, synthesis, processing, characterisation or utilisation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2113/00—Details relating to the application field
- G06F2113/10—Additive manufacturing, e.g. 3D printing
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- Geometry (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Bioinformatics & Cheminformatics (AREA)
- General Engineering & Computer Science (AREA)
- Evolutionary Computation (AREA)
- Life Sciences & Earth Sciences (AREA)
- Computer Hardware Design (AREA)
- Bioinformatics & Computational Biology (AREA)
- Human Computer Interaction (AREA)
- Architecture (AREA)
- Computational Mathematics (AREA)
- Mathematical Analysis (AREA)
- Mathematical Optimization (AREA)
- Pure & Applied Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Chemical & Material Sciences (AREA)
- Crystallography & Structural Chemistry (AREA)
- Image Generation (AREA)
Abstract
本发明为解决现有三维材料可视化技术中没有考虑到周期性晶体结构的结构可视化特征的缺陷，提出一种基于WebGL的三维晶体结构可视化方法，包括以下步骤：预设WebGL元数据及three.js模型；初始化作为可视化对象的网格模型参数；获取目标晶体学信息文件，从晶体学信息文件中读取目标晶体的结构信息；利用three.js模型，根据目标晶体的结构信息创建分别表示原子、化学键、晶体盒子、坐标轴的网格模型；将创建的分别表示原子、化学键、晶体盒子、坐标轴的网格模型保存到网格模型集合中，根据预设的WebGL元数据及three.js模型并通过渲染器将所有网格模型渲染到画布，完成三维晶体结构可视化。
Description
技术领域
本发明涉及三维仿真技术领域，更具体地，涉及一种基于WebGL的三维晶体结构可视化方法。
背景技术
在材料科学与工程学科中，晶体结构占据着至关重要的地位，为了详细地描述和展示材料的晶体结构，需要对其进行可视化。目前用于晶体结构可视化的软件主要包括Material Studio,VESTA,VMD等。
WebGL(Web Graphics Library，Web图形库)是将JavaScript和OpenGLES2.0结合在一起而形成的基于OpenGL的网页绘图标准，WebGL最大的便利之处是免去了为浏览器安装外部插件的麻烦，能够利用GPU加速处理图像。Three.js是一款运行在浏览器中的3D引擎，通过使用Three.js可以直接在网页端渲染三维模型和动画效果，在网页端实现快速加载并渲染出高品质的三维模型，以及实现真实感较强的三维模型动画运动效果。如公开号为CN109493404A(公开日为2019-03-19)提出的三维渲染方法及装置，能够实现将晶体结构进行三维可视化。
然而，目前利用WebGL和HTML5实现三维材料可视化的技术主要针对非周期性小分子结构进行开发，没有考虑到周期性晶体结构的结构可视化特征，无法全面展示晶体结构的可视化特征。
发明内容
本发明为克服上述现有技术所述的三维材料可视化技术中没有考虑到周期性晶体结构的结构可视化特征的缺陷，提供一种基于WebGL的三维晶体结构可视化方法。
为解决上述技术问题，本发明的技术方案如下：
一种基于WebGL的三维晶体结构可视化方法，包括以下步骤：
S1：预设WebGL元数据及three.js模型；
S2：初始化作为可视化对象的网格模型参数；
S3：获取目标晶体学信息文件，从晶体学信息文件中读取目标晶体的结构信息；
S4：利用three.js模型，根据目标晶体的结构信息创建分别表示原子、化学键、晶体盒子、坐标轴的网格模型；
S5：将创建的分别表示原子、化学键、晶体盒子、坐标轴的网格模型保存到网格模型集合中，根据预设的WebGL元数据及three.js模型并通过渲染器将所有网格模型渲染到画布，完成三维晶体结构可视化。
优选地，S1步骤中，预设WebGL元数据及three.js模型的具体步骤包括：
S1.1：预设three.js模型中画布的尺寸，预设three.js模型中用于辅助展示晶体结构的立方体，以立方体的任一顶点作为原点建立坐标轴；
S1.2：预设three.js模型中场景及渲染器，其中渲染器的大小与画布大小相等；
S1.3：设置three.js模型中的缩放比，并初始化平移矩阵和旋转矩阵；
S1.4：设置three.js模型所用相机为正交相机，设置当前相机的参数；当前相机的参数包括：相机视锥体垂直视野角、视锥体的纵横比、相机离视体积最近距离、相机离视体积最远距离、相机的目标点；其中视锥体的纵横比设置为画布的长宽比；
S1.5：设置用于鼠标拾取的raycaster射线；
S1.6：设置平行光源和环境光源，设定平行光源起点坐标、平行光的灯光衰减距离和环境光的灯光衰减距离。
优选地，S2步骤中，网格模型参数包括元素属性、原子属性、晶体结构属性；其中：
元素属性包括元素符号、电子层、是否为金属元素、价电数、原子质量、共价半径、CPK配色、可成键元素列表；其中，CPK配色是一种国际通用的原子或分子模型的配色方式；
原子属性包括分子索引、分子含有的原子数、分子结构渲染到画布上的缩放比、元素符号的显示、化学公式、权重；
晶体结构属性包括晶体数量、晶体盒子所有顶点的位置坐标、晶格常数、空间群名称、空间群转换矩阵。
优选地，S3步骤中，其具体步骤包括：
S3.1：获取目标晶体学信息文件，从晶体学信息文件中读取绘制目标晶体所需要的元素属性、原子属性、晶体结构属性数据；
S3.2：根据读取的数据，设置目标晶体结构晶体盒子的顶点位置坐标，获取元素属性以及所有原子的位置坐标，获取目标晶体结构信息中的空间群类型并通过空间群转换矩阵进行空间群转换；
S3.3：遍历目标晶体结构中所有原子，比较各个原子之间的距离，根据各个原子之间的距离判断是否成键，若是，则在该两个原子之间创建化学键。
优选地，S3.3步骤中，当原子间距离d满足成键限制条件时，则判断为原子间成键；其中成键限制条件的表达公式如下：
d≤ri+rj+Δ
其中，d表示原子间距离，ri表示第i个原子的半径，rj表示第j个原子的半径，Δ为成键阈值。
优选地，S4步骤中，创建表示晶体原子的网格模型的具体步骤包括：
S4.1.1：从目标晶体学信息文件中获取需要绘制的原子信息、需要渲染的原子的位置坐标；其中原子信息包括原子坐标及其元素符号；
S4.1.2：根据需要绘制的原子信息以及需要渲染的原子的位置坐标，遍历当前three.js模型立方体中已渲染的原子集合，判断是否有其他原子占据该位置，若该位置上没有其他原子，则根据原子的位置信息以及元素设定的半径，在three.js模型立方体中目标位置创建用于表示原子的球状几何体；
S4.1.3：根据网格模型参数元素属性中的CPK配色对所创建的球状几何体进行配色；
S4.1.4：根据所创建的球状几何体，并采用高光网格材质对球状几何体创建光亮表面的材质效果，构建表示晶体原子的网格模型。
优选地，S4步骤中，创建表示晶体原子之间化学键的网格模型的具体步骤包括：
S4.2.1：根据需要绘制的原子信息中的两个相邻的原子的坐标，获取用于表示化学键的圆柱体的高度，根据化学键的属性定义用于表示化学键的圆柱体的半径，根据圆柱体的高度和半径在three.js模型立方体中创建用于表示化学键的圆柱体；
S4.2.2：根据需要绘制的原子信息中的两个相邻的原子的坐标，计算圆柱体的旋转角度及旋转轴，根据旋转角度及旋转轴对圆柱体进行旋转变换；
S4.2.3：将圆柱体通过预设的平移矩阵平移到两个相邻的目标原子中间，圆柱体作为化学键对两个相邻的目标原子进行连接；
S4.2.4：根据所创建的圆柱体，采用高光网格材质对圆柱体创建光亮表面的材质效果，构建表示化学键的网格模型。
优选地，S4步骤中，创建表示晶体盒子的网格模型的具体步骤包括：根据从目标晶体学信息文件中读取目标晶体的晶体盒子所有顶点的位置坐标，并获取当前three.js模型中画布的中心位置坐标，建立索引表示晶体盒子的顶点，根据索引创建12个3D线条网络模型表示晶体盒子的12条边。
优选地，S4步骤中，创建3D线条网络模型的具体步骤包括：获取晶体盒子其中一条边两端顶点的位置坐标，定义线条颜色、线条宽度，然后通过three.js模型中的转换矩阵对顶点的位置坐标进行转换；根据转换后的顶点坐标建立线条几何体，再根据材质和线条几何体创建3D线条网络模型。
优选地，S4步骤中，创建表示坐标轴的网格模型的具体步骤包括：使用三个相互垂直的向量作为坐标轴的a，b，c三轴，设定坐标轴颜色；创建圆柱体几何体，设置圆柱体几何体的半径、高度、底面三角形切割面的数量、侧面切割面的数量；创建椎体几何体，设定椎体几何体的底面半径、高度和底面三角形切割面的数量；使用three.js模型中的转换矩阵放大圆柱体几何体和椎体几何体，利用three.js模型中的平移矩阵将圆柱体几何体和椎体几何体平移到three.js模型中画布中的目标位置。
与现有技术相比，本发明技术方案的有益效果是：本发明能够有效实现三维晶体结构的可视化，且适用于非周期性小分子结构和周期性晶体结构，尤其能够展示周期性晶体结构的结构可视化特征。
附图说明
图1为本发明的基于WebGL的三维晶体结构可视化方法的流程图。
图2为Fe3O4三维晶体结构效果图。
具体实施方式
附图仅用于示例性说明，不能理解为对本专利的限制；
为了更好说明本实施例，附图某些部件会有省略、放大或缩小，并不代表实际产品的尺寸；
对于本领域技术人员来说，附图中某些公知结构及其说明可能省略是可以理解的。
下面结合附图和实施例对本发明的技术方案做进一步的说明。
实施例1
本发明提出一种基于WebGL的三维晶体结构可视化方法，如图1所示，为本实施例的基于WebGL的三维晶体结构可视化方法的流程图。
本实施例提出的基于WebGL的三维晶体结构可视化方法中，具体包括以下步骤：
S1：预设WebGL元数据及three.js模型。
本步骤中，需要预设的WebGL元数据包括坐标轴，场景，相机，渲染器，灯光等，其具体步骤如下：
S1.1：预设three.js模型中画布的尺寸，预设three.js模型中用于辅助展示晶体结构的立方体，以立方体的任一顶点作为原点建立坐标轴，并设置是否显示键；
S1.2：预设three.js模型中场景及渲染器，其中设定渲染器的大小与画布大小相等；
S1.3：设置three.js模型中的缩放比，并初始化平移矩阵和旋转矩阵；
S1.4：设置three.js模型所用相机为正交相机，设置当前相机的参数；当前相机的参数包括：相机视锥体垂直视野角、视锥体的纵横比、相机离视体积最近距离、相机离视体积最远距离、相机的目标点；其中视锥体的纵横比设置为画布的长宽比；
在本实施例中，设置相机视锥体垂直视野角为54.2，视锥体的纵横比等于画布的长宽比，相机离视体积最近距离为0.1，相机离视体积最远距离为2000，设置相机的z坐标为600，相机的目标点在(0,0,0)。
S1.5：设置用于鼠标拾取的raycaster射线，用于计算出鼠标移动的三维空间中的对象；
S1.6：设置平行光源和环境光源，设定平行光源起点坐标、平行光的灯光衰减距离和环境光的灯光衰减距离，然后将设置创建的光源添加到three.js模型的场景中；
在本实施例中，设置平行光源起点坐标为(-1,1,2)，设定平行光的灯光衰减距离为0.7，环境光的灯光衰减距离为0.3。
S2：初始化作为可视化对象的网格模型参数。
本步骤中，网格模型参数包括元素属性、原子属性、晶体结构属性；其中：
元素属性包括元素符号、电子层、是否为金属元素、价电数、原子质量、共价半径、CPK配色、可成键元素列表；
原子属性包括分子索引、分子含有的原子数、分子结构渲染到画布上的缩放比、元素符号的显示、化学公式、权重；
晶体结构属性包括晶体数量、晶体盒子所有顶点的位置坐标、晶格常数、空间群名称、空间群转换矩阵。
S3：获取目标晶体学信息文件，从所述晶体学信息文件中读取目标晶体的结构信息；其具体步骤如下：
S3.1：获取目标晶体学信息文件，从所述晶体学信息文件中读取绘制目标晶体所需要的元素属性、原子属性、晶体结构属性数据；
S3.2：根据读取的数据，设置目标晶体结构晶体盒子的顶点位置坐标，获取元素属性以及所有原子的位置坐标，获取目标晶体结构信息中的空间群类型并通过空间群转换矩阵进行空间群转换；
S3.3：遍历目标晶体结构中所有原子，比较各个原子之间的距离，根据所述各个原子之间的距离判断是否成键，若是，则在该两个原子之间创建化学键，其中，其判断是否成键的依据如下式所示：
d≤ri+rj+Δ
其中，d表示原子间距离，ri表示第i个原子的半径，rj表示第j个原子的半径，Δ为成键阈值，在本实施例中成键阈值Δ设置为
S4：利用所述three.js模型，根据所述目标晶体的结构信息创建分别表示原子、化学键、晶体盒子、坐标轴的网格模型。
其中，创建表示晶体原子的网格模型的具体步骤包括：
S4.1.1：从目标晶体学信息文件中获取需要绘制的原子信息、需要渲染的原子的位置坐标；其中原子信息包括原子坐标及其元素符号；
S4.1.2：根据所述需要绘制的原子信息以及需要渲染的原子的位置坐标，遍历当前three.js模型立方体中已渲染的原子集合，判断是否有其他原子占据该位置，若该位置上没有其他原子，则根据所述原子的位置信息以及元素设定的半径，在three.js模型立方体中目标位置创建用于表示原子的球状几何体；
S4.1.3：根据网格模型参数元素属性中的CPK配色对所创建的球状几何体进行配色；
S4.1.4：根据所创建的球状几何体，并采用高光网格材质对球状几何体创建光亮表面的材质效果，构建表示晶体原子的网格模型。
创建表示晶体原子之间化学键的网格模型的具体步骤包括：
S4.2.1：根据所述需要绘制的原子信息中的两个相邻的原子的坐标，获取用于表示化学键的圆柱体的高度，根据化学键的属性定义用于表示化学键的圆柱体的半径，根据所述圆柱体的高度和半径在three.js模型立方体中创建用于表示化学键的圆柱体；
S4.2.2：根据所述需要绘制的原子信息中的两个相邻的原子的坐标，计算圆柱体的旋转角度及旋转轴，根据所述旋转角度及旋转轴对所述圆柱体进行旋转变换；
S4.2.3：将所述圆柱体通过预设的平移矩阵平移到两个相邻的目标原子中间，所述圆柱体作为化学键对两个相邻的目标原子进行连接；
S4.2.4：根据所创建的圆柱体，采用高光网格材质对圆柱体创建光亮表面的材质效果，构建表示化学键的网格模型。
创建表示晶体盒子的网格模型的具体步骤包括：根据从目标晶体学信息文件中读取目标晶体的晶体盒子所有顶点的位置坐标，并获取当前three.js模型中画布的中心位置坐标，建立索引表示晶体盒子的顶点，根据索引创建12个3D线条网络模型表示晶体盒子的12条边。
创建3D线条网络模型的具体步骤包括：获取所述晶体盒子其中一条边两端顶点的位置坐标，定义线条颜色、线条宽度，然后通过three.js模型中的转换矩阵对顶点的位置坐标进行转换；根据转换后的顶点坐标建立线条几何体，再根据材质和线条几何体创建3D线条网络模型。
创建表示坐标轴的网格模型的具体步骤包括：使用三个相互垂直的向量作为坐标轴的a，b，c三轴，设定坐标轴颜色；创建圆柱体几何体，设置圆柱体几何体的半径、高度、底面三角形切割面的数量、侧面切割面的数量；创建椎体几何体，设定椎体几何体的底面半径、高度和底面三角形切割面的数量；使用three.js模型中的转换矩阵放大圆柱体几何体和椎体几何体，利用three.js模型中的平移矩阵将圆柱体几何体和椎体几何体平移到three.js模型中画布中的目标位置。
S5：将创建的分别表示原子、化学键、晶体盒子、坐标轴的网格模型保存到网格模型集合中，根据预设的WebGL元数据及three.js模型，即根据设定好的缩放比例、旋转矩阵、平移矩阵进行转换，再利用预设的相机，通过渲染器将所有网格模型渲染到画布，完成三维晶体结构可视化。
在一具体实施过程中，以四氧化三铁晶体为例，构建四氧化三铁三维晶体结构。
首先，执行S1～S2步骤后完成WebGL元数据及three.js模型的初始化，以及网格模型参数的初始化。
读取用户上传的或通过网络下载的晶体学信息文件Fe3O4.cif，获取四氧化三铁三维晶体的结构信息，具体的，结构式为Fe3O4，空间群名为晶胞夹角(α,β,γ)均为90，晶胞包含的分子数Z为8，晶胞尺寸(a,b,c)为8.384；第一个Fe原子为Fe2+，原子位置坐标为(0.625,0.625,0.625)，第二个Fe原子为Fe3+，原子位置坐标为(0.625,0.625,0.625)，第三个Fe原子为Fe3+，原子位置坐标为(0,0,0)；O原子为O2-，原子位置坐标是(0.375,0.375,0.375)。再根据晶体学信息文件Fe3O4.cif中晶体的对称位置和空间群信息，获得晶胞中所有原子的位置坐标。根据晶胞夹角和晶胞尺寸计算晶体盒子的顶点位置坐标的过程如下：
h1＝a＝8.384
h2＝b×cosγ＝8.384×0＝0
h3＝b×sinγ＝8.384×1＝8.384
h4＝c×cosβ＝8.384×0＝0
lattice＝[[h1,0,0],[h2,h3,0],[h4,h5,h6]]＝[[8.384,0,0],[0,8.384,0],[0,0,8.384]]
其中，h1～h6分别表示晶体盒子的各边边长，lattice表示晶体盒子的顶点位置坐标。
然后遍历目标晶体结构中所有原子，比较各个原子之间的距离。其中第一个Fe原子为Fe2+，原子位置坐标为(0.625,0.625,0.625)，O原子为O2-，原子位置坐标是(0.375,0.375,0.375)，由此可计算：
由此可见，Fe原子与O原子之间存在化学键。
进一步地，利用three.js模型，根据上述数据创建表示原子、化学键、晶体盒子、坐标轴的网格模型对象。
其中，在创建表示原子的网格模型对象过程中，根据所述需要绘制的原子信息以及需要渲染的原子的位置坐标，遍历当前three.js模型立方体中已渲染的原子集合，判断是否有其他原子占据该位置，若该位置上没有其他原子，则根据所述原子的位置信息以及元素设定的半径，在three.js模型立方体中目标位置创建用于表示原子的球状几何体。以O2-原子为例，其原子位置坐标为(0.375,0.375,0.375)，O原子半径为15.994，因此在空间坐标为(0.375,0.375,0.375)位置创建半径为15.994的球体几何体。根据网格模型参数元素属性中的CPK配色对所创建的球状几何体进行配色，并采用高光网格材质对球状几何体创建光亮表面的材质效果，即完成构建表示晶体原子的网格模型。
在创建表示化学键的网格模型对象过程中，根据需要绘制的原子信息中的两个相邻的原子的坐标，获取用于表示化学键的圆柱体的高度，根据化学键的属性定义(包括单键、双键、三键)用于表示化学键的圆柱体的半径，根据圆柱体的高度和半径，在three.js模型立方体中创建用于表示化学键的圆柱体。以第一个Fe原子Fe2+举例，其原子位置坐标为(0.625,0.625,0.625)，O原子为O2-，原子位置坐标是(0.375,0.375,0.375)，根据该两个原子的原子位置坐标，计算得到表示化学键的圆柱体高度为
然后再根据两个相邻的原子的坐标(xi,xj,xk)和(yi,yj,yk)计算获得旋转角度，从而计算得到旋转轴，再根据计算得到的旋转轴和旋转角度对创建的圆柱体几何体进行旋转变换。其计算公式如下：
其中，rotateAngle表示旋转角度，projLength表示物体长度，rotateAxis表示旋转轴。经过对创建的圆柱体几何体进行旋转变换后，将圆柱体几何体通过预设的平移矩阵平移到两个相邻的目标原子中间，圆柱体作为化学键对两个相邻的目标原子进行连接，再采用高光网格材质对圆柱体创建光亮表面的材质效果，完成构建表示化学键的网格模型。
在创建表示晶体盒子的网格模型的过程中，根据从晶体学信息文件Fe3O4.cif中读取目标晶体的晶体盒子所有顶点的位置坐标，并获取当前three.js模型中画布的中心位置坐标，建立索引表示晶体盒子的顶点，根据索引创建12个3D线条网络模型表示晶体盒子的12条边。其中，创建3D线条网络模型时，获取晶体盒子其中一条边两端顶点的位置坐标，定义线条颜色为红色，设置线条宽度为1.5，然后通过three.js模型中的转换矩阵对顶点的位置坐标进行转换；根据转换后的顶点坐标建立线条几何体，再根据材质和线条几何体创建3D线条网络模型。
在创建表示坐标轴的网格模型的过程中，目标在于构建以[0,0,0]到[1,0,0]，[0,0,0]到[0,1,0]，[0,0,0]到[0,0,1]作为坐标轴的a，b，c三轴，在本实施例中设置为0xFF0000，0x00FF00，0x0000FF；创建圆柱体几何体，设置圆柱体几何体的半径为3，高度为50，底面三角形切割面的数量为30，侧面切割面的数量为1；创建椎体几何体，设定椎体几何体的底面半径为8，高度为12，底面三角形切割面的数量为30。然后使用转换矩阵放大圆柱体几何体和椎体几何体70倍，利用平移矩阵将圆柱体几何体和椎体几何体平移到three.js模型中画布右下方，使其距离画布右端1/6画布宽度，距离画布最下端1/6画布高度。
将上述创建的分别表示原子、化学键、晶体盒子、坐标轴的网格模型对象保存到网格模型集合中，通过渲染器将其渲染到画布上，如图2所示，为应用本实施例的基于WebGL的三维晶体结构可视化方法生成的Fe3O4三维晶体结构效果图。
由此可见，本实施例提出的基于WebGL的三维晶体结构可视化方法能够有效实现三维晶体结构的可视化，且适用于非周期性小分子结构和周期性晶体结构，特别地，能够展示周期性晶体结构的结构可视化特征。
相同或相似的标号对应相同或相似的部件；
附图中描述位置关系的用语仅用于示例性说明，不能理解为对本专利的限制；
显然，本发明的上述实施例仅仅是为清楚地说明本发明所作的举例，而并非是对本发明的实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明权利要求的保护范围之内。
Claims (9)
1.一种基于WebGL的三维晶体结构可视化方法，其特征在于，包括以下步骤：
S1：预设WebGL元数据及three.js模型；
S2：初始化作为可视化对象的网格模型参数；
S3：获取目标晶体学信息文件，从所述晶体学信息文件中读取目标晶体的结构信息；
S4：利用所述three.js模型，根据所述目标晶体的结构信息创建分别表示原子、化学键、晶体盒子、坐标轴的网格模型；其中，创建表示晶体原子的网格模型的具体步骤包括：
S4.1.1：从目标晶体学信息文件中获取需要绘制的原子信息、需要渲染的原子的位置坐标；其中原子信息包括原子坐标及其元素符号；
S4.1.2：根据所述需要绘制的原子信息以及需要渲染的原子的位置坐标，遍历当前three.js模型立方体中已渲染的原子集合，判断是否有其他原子占据该位置，若该位置上没有其他原子，则根据所述原子的位置信息以及元素设定的半径，在three.js模型立方体中目标位置创建用于表示原子的球状几何体；
S4.1.3：根据网格模型参数元素属性中的CPK配色对所创建的球状几何体进行配色；
S4.1.4：根据所创建的球状几何体，并采用高光网格材质对球状几何体创建光亮表面的材质效果，构建表示晶体原子的网格模型；
S5：将创建的分别表示原子、化学键、晶体盒子、坐标轴的网格模型保存到网格模型集合中，根据预设的WebGL元数据及three.js模型并通过渲染器将所有网格模型渲染到画布，完成三维晶体结构可视化。
2.根据权利要求1所述的三维晶体结构可视化方法，其特征在于：所述S1步骤中，预设WebGL元数据及three.js模型的具体步骤包括：
S1.1：预设three.js模型中画布的尺寸，预设three.js模型中用于辅助展示晶体结构的立方体，以立方体的任一顶点作为原点建立坐标轴；
S1.2：预设three.js模型中场景及渲染器，其中渲染器的大小与画布大小相等；
S1.3：设置three.js模型中的缩放比，并初始化平移矩阵和旋转矩阵；
S1.4：设置three.js模型所用相机为正交相机，设置当前相机的参数；当前相机的参数包括：相机视锥体垂直视野角、视锥体的纵横比、相机离视体积最近距离、相机离视体积最远距离、相机的目标点；其中视锥体的纵横比设置为画布的长宽比；
S1.5：设置用于鼠标拾取的raycaster射线；
S1.6：设置平行光源和环境光源，设定平行光源起点坐标、平行光的灯光衰减距离和环境光的灯光衰减距离。
3.根据权利要求2所述的三维晶体结构可视化方法，其特征在于：所述S2步骤中，所述网格模型参数包括元素属性、原子属性、晶体结构属性；其中：
元素属性包括元素符号、电子层、是否为金属元素、价电数、原子质量、共价半径、CPK配色、可成键元素列表；
原子属性包括分子索引、分子含有的原子数、分子结构渲染到画布上的缩放比、元素符号的显示、化学公式、权重；
晶体结构属性包括晶体数量、晶体盒子所有顶点的位置坐标、晶格常数、空间群名称、空间群转换矩阵。
4.根据权利要求3所述的三维晶体结构可视化方法，其特征在于：所述S3步骤中，其具体步骤包括：
S3.1：获取目标晶体学信息文件，从所述晶体学信息文件中读取绘制目标晶体所需要的元素属性、原子属性、晶体结构属性数据；
S3.2：根据读取的数据，设置目标晶体结构晶体盒子的顶点位置坐标，获取元素属性以及所有原子的位置坐标，获取目标晶体结构信息中的空间群类型并通过空间群转换矩阵进行空间群转换；
S3.3：遍历目标晶体结构中所有原子，比较各个原子之间的距离，根据所述各个原子之间的距离判断是否成键，若是，则在该两个原子之间创建化学键。
5.根据权利要求4所述的三维晶体结构可视化方法，其特征在于：所述S3.3步骤中，当原子间距离d满足成键限制条件时，则判断为原子间成键；其中所述成键限制条件的表达公式如下：
d≤ri+rj+Δ
其中，d表示原子间距离，ri表示第i个原子的半径，rj表示第j个原子的半径，Δ为成键阈值。
6.根据权利要求5所述的三维晶体结构可视化方法，其特征在于：所述S4步骤中，创建表示晶体原子之间化学键的网格模型的具体步骤包括：
S4.2.1：根据所述需要绘制的原子信息中的两个相邻的原子的坐标，获取用于表示化学键的圆柱体的高度，根据化学键的属性定义用于表示化学键的圆柱体的半径，根据所述圆柱体的高度和半径在three.js模型立方体中创建用于表示化学键的圆柱体；
S4.2.2：根据所述需要绘制的原子信息中的两个相邻的原子的坐标，计算圆柱体的旋转角度及旋转轴，根据所述旋转角度及旋转轴对所述圆柱体进行旋转变换；
S4.2.3：将所述圆柱体通过预设的平移矩阵平移到两个相邻的目标原子中间，所述圆柱体作为化学键对两个相邻的目标原子进行连接；
S4.2.4：根据所创建的圆柱体，采用高光网格材质对圆柱体创建光亮表面的材质效果，构建表示化学键的网格模型。
7.根据权利要求4所述的三维晶体结构可视化方法，其特征在于：所述S4步骤中，创建表示晶体盒子的网格模型的具体步骤包括：根据从目标晶体学信息文件中读取目标晶体的晶体盒子所有顶点的位置坐标，并获取当前three.js模型中画布的中心位置坐标，建立索引表示晶体盒子的顶点，根据索引创建12个3D线条网络模型表示晶体盒子的12条边。
8.根据权利要求7所述的三维晶体结构可视化方法，其特征在于：所述S4步骤中，所述创建3D线条网络模型的具体步骤包括：获取所述晶体盒子其中一条边两端顶点的位置坐标，定义线条颜色、线条宽度，然后通过three.js模型中的转换矩阵对顶点的位置坐标进行转换；根据转换后的顶点坐标建立线条几何体，再根据材质和线条几何体创建3D线条网络模型。
9.根据权利要求4所述的三维晶体结构可视化方法，其特征在于：所述S4步骤中，创建表示坐标轴的网格模型的具体步骤包括：使用三个相互垂直的向量作为坐标轴的a，b，c三轴，设定坐标轴颜色；创建圆柱体几何体，设置圆柱体几何体的半径、高度、底面三角形切割面的数量、侧面切割面的数量；创建椎体几何体，设定椎体几何体的底面半径、高度和底面三角形切割面的数量；使用three.js模型中的转换矩阵放大圆柱体几何体和椎体几何体，利用three.js模型中的平移矩阵将圆柱体几何体和椎体几何体平移到three.js模型中画布中的目标位置。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011003353.9A CN112086147B (zh) | 2020-09-22 | 2020-09-22 | 一种基于WebGL的三维晶体结构可视化方法 |
| PCT/CN2020/123154 WO2022062018A1 (zh) | 2020-09-22 | 2020-10-23 | 一种基于WebGL的三维晶体结构可视化方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011003353.9A CN112086147B (zh) | 2020-09-22 | 2020-09-22 | 一种基于WebGL的三维晶体结构可视化方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112086147A CN112086147A (zh) | 2020-12-15 |
| CN112086147B true CN112086147B (zh) | 2023-11-03 |
Family
ID=73739595
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011003353.9A Active CN112086147B (zh) | 2020-09-22 | 2020-09-22 | 一种基于WebGL的三维晶体结构可视化方法 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN112086147B (zh) |
| WO (1) | WO2022062018A1 (zh) |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112785673B (zh) * | 2021-01-20 | 2023-11-07 | 江西航天鄱湖云科技有限公司 | 一种基于WebGL批量三维模型数据的渲染方法 |
| CN113066538B (zh) * | 2021-03-19 | 2023-11-10 | 福建天晴数码有限公司 | 基于3d的微观化学分子式和大分子蛋白的建模方法和系统 |
| CN115129191B (zh) * | 2021-03-26 | 2023-08-15 | 北京新氧科技有限公司 | 三维对象拾取方法、装置、设备及存储介质 |
| CN113270158B (zh) * | 2021-06-03 | 2022-03-18 | 深圳晶泰科技有限公司 | 一种高效晶体展胞方法及其系统 |
| CN113192578B (zh) * | 2021-06-04 | 2024-06-04 | 北京市计算中心有限公司 | 晶体对称性及能带路径确定方法及装置 |
| CN116564442A (zh) * | 2022-01-24 | 2023-08-08 | 腾讯科技（深圳）有限公司 | 材料筛选方法、装置、计算机设备及存储介质 |
| CN115713986B (zh) * | 2022-11-11 | 2023-07-11 | 中南大学 | 基于注意力机制的材料晶体属性预测方法 |
| CN116012562A (zh) * | 2022-12-28 | 2023-04-25 | 中建电子信息技术有限公司 | 快速完成bim三维可视化平台模型制作的方法 |
| CN116549800A (zh) * | 2023-06-27 | 2023-08-08 | 中国人民解放军海军第九七一医院 | 一种椎管内麻醉实时三维模拟图像导航系统及方法 |
| CN116630486B (zh) * | 2023-07-19 | 2023-11-07 | 山东锋士信息技术有限公司 | 一种基于Unity3D渲染的半自动化动画制作方法 |
| CN116664789B (zh) * | 2023-07-24 | 2023-10-24 | 齐鲁空天信息研究院 | 一种全球电离层格网数据快速可视化方法和系统 |
| CN117709305A (zh) * | 2024-02-05 | 2024-03-15 | 煤炭科学研究总院有限公司 | 高程数据生成方法、装置、电子设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109242971A (zh) * | 2018-09-13 | 2019-01-18 | 东南大学 | 一种梁式桥三维模型信息交互平台 |
| CN110796732A (zh) * | 2019-10-21 | 2020-02-14 | 天津大学 | 基于WebGL与C#的矿山三维展示方法 |
| CN111192641A (zh) * | 2019-12-20 | 2020-05-22 | 深圳晶泰科技有限公司 | 一种用于复杂web 3D场景下用户交互的系统和方法 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2012019666A (ja) * | 2010-07-09 | 2012-01-26 | Sony Corp | ワイヤレス充電装置およびワイヤレス充電システム |
| CN109471899A (zh) * | 2018-10-22 | 2019-03-15 | 成都四方伟业软件股份有限公司 | 一种可视化方法、装置及其存储介质 |
| CN111191303A (zh) * | 2019-10-25 | 2020-05-22 | 腾讯科技（深圳）有限公司 | Bim数据处理方法、装置、电子设备及计算机存储介质 |
-
2020
- 2020-09-22 CN CN202011003353.9A patent/CN112086147B/zh active Active
- 2020-10-23 WO PCT/CN2020/123154 patent/WO2022062018A1/zh unknown
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109242971A (zh) * | 2018-09-13 | 2019-01-18 | 东南大学 | 一种梁式桥三维模型信息交互平台 |
| CN110796732A (zh) * | 2019-10-21 | 2020-02-14 | 天津大学 | 基于WebGL与C#的矿山三维展示方法 |
| CN111192641A (zh) * | 2019-12-20 | 2020-05-22 | 深圳晶泰科技有限公司 | 一种用于复杂web 3D场景下用户交互的系统和方法 |
Non-Patent Citations (3)
| Title |
|---|
| Pin Chen等.3DStructGen: an interactive web‑based 3D structure generation for non‑periodic molecule and crystal.《Journal of Cheminformatics》.2020,第12卷(第7期),第1-11页. * |
| Xinliang Wei等.Architecture and Implementation of 3D Engine Based on WebGL.《Scientific research publishing》.2016,第701-708页. * |
| 张建中等.基于Web3D技术的煤矿BIM模型集成及可视化研究.煤炭工程.2020,(第07期),第169-176页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2022062018A1 (zh) | 2022-03-31 |
| CN112086147A (zh) | 2020-12-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112086147B (zh) | 一种基于WebGL的三维晶体结构可视化方法 | |
| WO2022193941A1 (zh) | 图像渲染方法、装置、设备、介质和计算机程序产品 | |
| US8698809B2 (en) | Creation and rendering of hierarchical digital multimedia data | |
| US20100179788A1 (en) | System and method for hybrid solid and surface modeling for computer-aided design environments | |
| CN111325824A (zh) | 图像数据展示方法、装置、电子设备及存储介质 | |
| CN113593051B (zh) | 一种实景可视化方法及大坝可视化方法及计算机设备 | |
| US20050151734A1 (en) | Method and apparatus for rendering, storing and editing voxel objects | |
| EP3379495B1 (en) | Seamless fracture in an animation production pipeline | |
| CN114219902A (zh) | 气象数据的体绘制渲染方法、装置和计算机设备 | |
| Seyb et al. | Non-linear sphere tracing for rendering deformed signed distance fields | |
| US8358311B1 (en) | Interpolation between model poses using inverse kinematics | |
| She et al. | An efficient method for rendering linear symbols on 3D terrain using a shader language | |
| US7990398B2 (en) | Matching movement behavior in motion graphics | |
| CN113436307B (zh) | 基于osgEarth影像数据到UE4场景的映射算法 | |
| US11423618B2 (en) | Image generation system and method | |
| Pasewaldt et al. | Multi-Perspective Detail+ Overview Visualization for 3D Building Exploration. | |
| KR100679289B1 (ko) | 벡터화소를 이용한 이미지 처리 시스템 | |
| CN115019019B (zh) | 一种实现3d特效编辑器的方法 | |
| JP4557629B2 (ja) | 画像処理方法、画像処理プログラム、及び画像処理コンピュータ | |
| JP2018190305A (ja) | 三次元形状データの編集装置、及び三次元形状データの編集プログラム | |
| Wang et al. | Real-time rendering of flames on arbitrary deformable objects | |
| Sivkova et al. | Types of computer graphics | |
| Domingo et al. | Introducing extended and augmented light fields for autostereoscopic displays | |
| CN115752487A (zh) | 基于web的场景地图显示方法、装置及存储介质 | |
| Jackson et al. | 3D Model Design and Primitives: Using JavaFX 9 Shape3D Classes |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |