实现分层展示效果

[xiaoiver]

在查看一个模型时，常常需要展示不同的层次效果。例如 glTF-WebGL-PBR 中鼠标悬停到渲染公式的某一部分时会单独展示这部分的效果。在具体实现中是通过 uniform 在 fragment shader 中控制该部分贡献值。

而 marmoset viewer 可以同时展示多层效果。而且其中的 wireframe 就需要用到重心坐标系了：

[xiaoiver]

之前总结过一篇 「Wireframe 的实现」。
其中遗留了一个问题是如果存在顶点的共享（使用 indice），会出现共享的顶点无法分配重心坐标的问题：

最近阅读 clay.gl 的代码时，发现解决这个问题也很简单，就是根据 indice 生成非共享的顶点数据：

generateBarycentric: function () {
    if (!this.isUniqueVertex()) {
        this.generateUniqueVertex();
    }
}
generateUniqueVertex: function () {
    var attributes = this.attributes;
    var indices = this.indices;

    var attributeNameList = this.getEnabledAttributes();

    var oldAttrValues = {};
    for (var a = 0; a < attributeNameList.length; a++) {
        var name = attributeNameList[a];
        oldAttrValues[name] = attributes[name].value;
        attributes[name].init(this.indices.length);
    }

    var cursor = 0;
    for (var i = 0; i < indices.length; i++) {
        var ii = indices[i];
        for (var a = 0; a < attributeNameList.length; a++) {
            var name = attributeNameList[a];
            var array = attributes[name].value;
            var size = attributes[name].size;

            for (var k = 0; k < size; k++) {
                array[cursor * size + k] = oldAttrValues[name][ii * size + k];
            }
        }
        indices[i] = cursor;
        cursor++;
    }

    this.dirty();
}