HT for Web 批量手册

索引

概述

HT for Web的树表格和拓扑图等2D组件，无需特殊处理即可轻松承载万以上Data元素，但对于Graph3dView组件如需承载上千上万的数量级， 则需要进行特殊的批量处理。批量能提高性能的原理在于，当图元一个个独立绘制模型时性能较差，而但一批图元聚合成一个大模型进行一次性的绘制时， 则会极大提高WebGL刷新性能。

批量的处理相当于吃饭，如果一小口一小口的吃速度慢得瓶颈在于交互过程过频繁，如果换个大一点的勺子大口吃就可以减少交互过程， 但WebGL、JavaScript和浏览器都是有内存等资源限制，HT自动把所有数据聚合成一个大批量只进行一次绘制也是不现实的， 相当于我们人的口再大也不可能一口吃下一碗饭，因此需要用户根据项目的具体情况，将图元归纳出不同的批量方案以提高绘制性能。

图元批量

目前HT支持对图元的body部分进行批量，还不支持label、note和icons的附属部分的批量，因此本章节介绍的图元批量针对图元的主体模型部分。

基本属性

node.setStyle('batch', 'firstBatch');

以上为最简单的批量设置方式，该方式下batch名相同的图元都会自动聚合成批量一次性绘制。通过切换上例工具条的Enable Batch开关可体验是否批量的性能差距。

ht.Default.setBatchInfo('firstBatch', {
    color: 'red',
    brightness: true,
    blend: true,
    alphaTest: 0.4,
});

批量还有诸多参考可控制，大部分情况下需要先通过ht.Default.setBatchInfo函数全局注册批量，再对Data设置对应的batch批量名。 如果未通过ht.Default.setBatchInfo进行注册就设置图元的batch属性，则代表采用HT的默认批量参数：

Graph3dView默认关闭了批量染色和批量亮度的功能，因此批量中如需启用blend和brightness，则需通过如下函数启用：

贴图属性

批量解决了性能问题，但也带来了功能减少或减弱的副作用，例如目前HT一个批量仅支持一张贴图，该贴图信息由注册批量时的image属性决定， 这样对于六面体需要不同面贴不同的图片时，则需要将多张图片融合成一张大图片，然后由六面体独立定义每个面对应的uv相关参数实现。

for (var i = 0; i < row; i++) {
    for (var j = 0; j < column; j++) {
        createNode(startX + gap * j, startZ, size).s({
            'batch': 'uvBatch',                            
            'bottom.uv': [0.25, 0, 0.25, 0.25, 0.5, 0.25, 0.5, 0],
            'left.uv': [0, 0.75, 0, 1, 0.25, 1, 0.25, 0.75],
            'right.uv': [0.5, 0.75, 0.5, 1, 0.75, 1, 0.75, 0.75],                            
            'all.blend': '#00FFFF',
            'top.visible': i % 2 === 0
        });
    }
    startZ -= gap;
}

ht.Default.setBatchInfo('uvBatch', {
    brightness: brightness,
    blend: blend,
    image: 'die',
    topUv: [0.25, 0.5, 0.25, 0.75, 0.5, 0.75, 0.5, 0.5],
    backUv: [0.25, 0.75, 0.25, 1, 0.5, 1, 0.5, 0.75],                    
    frontUv: [0.25, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25],
    reverseColor: 'yellow',
    reverseCull: reverseCull,
    reverseFlip: reverseFlip
});

以上例子筛子的六个面的uv信息部分面通过注册batchInfo时全局设置，部分面通过图元的style对应的*.uv属性设置， 图元style配置的uv属性信息优先级高于注册批量参数，一般来说如果批量图元面的uv信息一致的情况下，通过全局配置较为方便， 不必更新每个图元对应面属性，如果有特殊图元不同于全局则可独立再设置style对应的uv信息。

uv参数：

uvScale参数：

uvOffset参数：

注意以上并没有csgUv参数，csg挖空的面的uv参数由具体CSGNode挖空图元各个面的uv参数决定， 但csgUvScale和csgUvOffset参数会影响所有csg挖空面的最终呈现效果。

其他属性

除了前面介绍的color、brightness和blend的批量参数外，还有以下批量参考可设置，这些参数都只能在全局注册批量时指定， 具体图元上的相应属性被忽略。

透明属性

最后还有几个透明相关批量参数，目前同一批量仅支持都为不透明物体，或者都为透明物体，不支持部分面透明部分面不透明的混合情况。

无效批量

批量除了有些功能限制的副作用外，对批量内的图元频繁更新也会导致性能不佳，一般建议将不常变化的图元归到同一批量中， 将常变化的图元归到同一批量中，如果需要对同批量中的大部分图元进行更新，建议可在更新前调用以下函数。 一般情况下注册到全局的批量参数较少需要修改，如果进行了修改也可以通过调用以下函数通知图形界面进行更新：

线框批量

Graph3dView中可呈现两类线框效果：

Graph3dView内部已自动对所有线框类型进行了批量，因此用户无需对线框设置批量。

批量开关

基本属性中提到，Graph3dView默认关闭了批量染色和批量亮度的功能，批量中如需启用blend和brightness， 需通过graph3dView.setBatchBlendDisabled(false)和graph3dView.setBatchBrightnessDisabled(false)启用。

Graph3dView上还有个batchColorDisabled的属性，该值默认为false也就是启用批量颜色，当系统场景无需批量， 也未使用到线框效果时，可通过graph3dView.setBatchColorDisabled(true)关闭批量颜色，这样有助于提高性能， 并留下更多资源允许加载更多盏灯光效果。

欢迎交流 service@hightopo.com