HT for Web 批量手册

索引


概述

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

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

图元批量

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

基本属性

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

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

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

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

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

贴图属性

批量解决了性能问题,但也带来了功能减少或减弱的副作用,例如目前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参数决定, 但csgUvScalecsgUvOffset参数会影响所有csg挖空面的最终呈现效果。

其他属性

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

透明属性

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

无效批量

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

线框批量

Graph3dView中科呈现两类线框效果:

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

批量开关

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

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


欢迎交流 service@hightopo.com