1. 技术模型

结构（本编辑器采用的技术便是 react + threejs + mapbox）

结构.png

渲染流水线

流水线.png

  • 应用阶段：CPU计算数据丢给GPU。这些数据包含灯光信息，模型信息，相机信息等。

  • 图元数据：GPU拿到数据进行处理，部分置于缓存，用于draw call。

  • 顶点着色器（vertexShader）：处理顶点数据。

  • 曲面细分和几何着色器：可有可无，可以忽略（默认设置）。

  • 投影：投影矩阵 * 模视矩阵 * 顶点位置。gl_Position（x,y,z,w）。如果它乘上的是透视投影矩阵，它的w分量将不再是1，而如果它乘上的是正交投影矩阵的话，w分量仍然是1。若经过透视投影矩阵变化，顶点中的w分量将变成了一个衡量顶点到摄像机之间距离的参数。

  • 裁切：处理顶点数据。开发者无法控制，但可以进行配置 。得到NDC裁切坐标（x,y,z）xyz已归一标准化，取值-1~1。其实就是将齐次坐标系中的w分量除x、y、z分量。z存着深度信息。可以做一些有关于顶点到摄像机距离的计算。

  • 屏幕映射：将上述NDC裁切空间坐标[-1~1, -1~1, -1~1]转化为屏幕坐标1920 * 1080等；这些信息会收集起来，在光栅化后于屏幕成像。

  • 图元组装和三角遍历：由GPU完成。根据顶点index信息绘制三角面。被这些三角面（半）覆盖的区域叫片元。

  • 片元着色器（fragmentShader）：片元着色。

  • 逐片元操作：片元的合并阶段，开发者无法控制，但可以进行配置。比如深度测试。

2. 编辑器内容

2.1 全局设置

对全局设置位于界面的左侧栏（如下图）。

左侧栏.png

  • 基础设置：编辑模型的基础、雾化和镜头管理。以雾化为例，开启前后效果如图。
    1.png

  • 场景树：可以看到场景的基础结构，也可以添加灯光、编辑、定位等功能。

  • 后处理：编辑模型的反光、抗锯齿和环境光遮挡。以泛光为例，开启前后效果如图。
    2.png

  • 数据与资源：包括材质管理器和Geojson绘制。

  • 绘制标注、绘制线条、热点：包括各项的基础配置。

  • HTML元素：该部分绘制完成后，再于右侧栏编辑弹窗内容。
    3.png

  • 响应事件：配置事件可用于组件的交互，外部数据的接入，交互事件的传递。

  • 插入代码块，自定义场景处理：场景渲染好后的回调，可自定义代码。

  • 配置项：可直接操作配置文件。

2.2 对选中物体设置

对选中物体设置位于界面的右侧栏（如下图），包括基础和材质两个部分。
右侧栏.png

  • 基础：包括位置、旋转、缩放、是否接受阴影和显示等。
    其中，当设置bloom并选择filter时生效（对组无效）；userData是自定义数据。
    4.png

    注：名称是必须的且唯一的，以此来确定修改的物体。

  • 材质：材质类型包括两种——标准材质（pbr）、高光材质(phong)。材质属性内容及内涵见文末附录。

2.3 顶部栏目

顶部可进行场景切换（普通3D场景/地图场景），但是切换后重新初始化配置，之前所有配置不再保留。
顶部.png

3. 演示一个模型

一般的简单配置顺序：

  • step1：查看模型是否可见。如果不可见，可以在树侧栏点击定位即可定位到该模型。
    5.png

  • step2：模型是否闪烁。如果闪烁，定位到该模型后，在镜头管理配置初始相机位置。

  • step3：在材质栏调色。

  • 此外，一些后处理效果如图：

ssao：屏幕空间环境光遮挡
1.png

ssr：屏幕空间反射
2.png

ssgi：屏幕空间光照

4. 附录材质属性

color：颜色
transparent：是否透明
opacity：透明度
map：纹理贴图
envMap：环境贴图
reflectivity：环境贴图对表面的影响程度; 见combine。默认为1，有效范围介于0（无反射）和1（完全反射）之间。
envMapIntensity：通过乘以环境贴图的颜色来缩放环境贴图的效果。
depthTest：深度测试，是否在渲染此材质时启用深度测试。默认为 true。简单说是用于解决物体遮挡的关系，虽然有些遮挡，可以用渲染顺序去决定，但场景物体很多，层级复杂的时候，很难去排序，而且有些物体会存在互相遮挡的情况。
depthWrite：渲染此材质是否对深度缓冲区有任何影响。默认为true。在透明度设置后，会有遮挡不可见的时候会很好用。
colorWrite：是否渲染材质的颜色，这可以与网格的renderOrder属性结合使用，以创建遮挡其他对象的不可见对象。
alphaTest：设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。默认值为0
vertexColors：是否使用顶点着色。默认值为false。
alphaToCoverage：启用alpha to coverage. 只能在开启了MSAA的渲染环境中使用 (当渲染器创建的时候antialias
属性要true才能使用)
blendDst：混合目标。默认值为OneMinusSrcAlphaFactor。 目标因子所有可能的取值请参阅constants。必须将材质的blending设置为CustomBlending才能生效
blendDstAlpha：.blendDst的透明度。 默认值为 null.
blendEquation：使用混合时所采用的混合方程式。默认值为AddEquation。 混合方程式所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。
blendEquationAlpha：.blendEquation 的透明度. 默认值为 null.
blending：在使用此材质显示对象时要使用何种混合。必须将其设置为CustomBlending才能使用自定义blendSrc, blendDst 或者 [page:Constant blendEquation]。 混合模式所有可能的取值请参阅constants。默认值为NormalBlending。
blendSrc：混合源。默认值为SrcAlphaFactor。 源因子所有可能的取值请参阅constants。必须将材质的blending设置为CustomBlending才能生效。
blendSrcAlpha：.blendSrc的透明度。 默认值为 null.
depthFunc：使用何种深度函数。默认为LessEqualDepth。
polygonOffset：是否使用多边形偏移。默认值为false。这对应于WebGL的GL_POLYGON_OFFSET_FILL功能。
polygonOffsetUnits：设置多边形偏移单位。默认值为0。
dithering：是否对颜色应用抖动以消除条带的外观。默认值为 false。
side：定义将要渲染哪一面 - 正面，背面或两者。 默认为FrontSide。其他选项有BackSide 和DoubleSide。
toneMapped：定义这个材质是否会被渲染器的toneMapping设置所影响，默认为 true 。
alphaMap：alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。
aoMap：该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。
aoMapIntensity：环境遮挡效果的强度。默认值为1。零是不遮挡效果。
bumpMap：用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。
bumpScale：凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。
combine：如何将表面颜色的结果与环境贴图（如果有）结合起来。
displacementMap：位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象， 以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。
displacementScale：位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。
displacementBias：位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。
emissive：材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。
emissiveMap：设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。
emissiveIntensity：放射光强度。调节发光颜色。默认为1。
flatShading：定义材质是否使用平面着色进行渲染。默认值为false。
fog：材质是否受雾影响。默认为true。
lightMap：光照贴图。默认值为null。lightMap需要第二组UV。
lightMapIntensity：烘焙光的强度。默认值为1。
normalMap：用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照
normalMapType：法线贴图的类型。
refractionRatio：空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用
shininess：.specular高亮的程度，越高的值越闪亮。默认值为 30。
specular：材质的高光颜色。默认值为0x111111（深灰色）的颜色Color。这定义了材质的光泽度和光泽的颜色。
specularMap：镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为null。
wireframe：将几何体渲染为线框。默认值为false（即渲染为平面多边形）
wireframeLinecap：定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。
wireframeLinejoin：定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。
metalness：材质与金属的相似度。非金属材质，如木材或石材，使用0.0，金属使用1.0，通常没有中间值。 默认值为0.0。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap，则两个值相乘。
metalnessMap：该纹理的蓝色通道用于改变材质的金属度。
roughness：材质的粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0。
如果还提供roughnessMap，则两个值相乘。
roughnessMap：该纹理的绿色通道用于改变材质的粗糙度。