cesium添加自己的着色器

了解WEBGL就可以自己實現一些特效，添加到cesium中。

首先我們從簡單的案列開始，比如利用純WEBGL實現繪制三角形，那么實現的代碼如下：

點着色器：

attribute vec4 position;
void main() {
    gl_Position = position;
}

片元着色器：

void main() {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

把上述點着色器和片元着色器放置cesium中，如定義一個擴展類，實現自己的着色器，如下：

function getVS() {
    return 'attribute vec4 position;\
    void main() {\
        gl_Position = position;\
    }';
}

function getFS() {
    return "void main()\
        {\
            gl_FragColor = vec4(1,1,1,1);\
        }\
        ";
}

function Trangle(viewer) {
    this._viewer = viewer;
}

Trangle.prototype.getPointCommand = function (context) {
    var shaderProgram = Cesium.ShaderProgram.fromCache({
        context: context,
        vertexShaderSource: getVS(),
        fragmentShaderSource: getFS()
    });
    var renderState = Cesium.RenderState.fromCache({
        depthTest: {
            enabled: false
        },
        depthMask: false,
        blending: Cesium.BlendingState.ALPHA_BLEND
    });

    var indexBuffer = Cesium.Buffer.createIndexBuffer({
        context: context,
        typedArray: new Uint32Array([0, 1, 2]),
        usage: Cesium.BufferUsage.STATIC_DRAW,
        indexDatatype: Cesium.IndexDatatype.UNSIGNED_INT
    });
    var vertexBuffer = Cesium.Buffer.createVertexBuffer({
        context: context,
        typedArray: Cesium.ComponentDatatype.createTypedArray(Cesium.ComponentDatatype.FLOAT, [0, 0, 0, 0, 100000, 100000, 100000, 100000, 0]),
        usage: Cesium.BufferUsage.STATIC_DRAW
    });
    var attributes = [];
    attributes.push({
        index: 0,
        vertexBuffer: vertexBuffer,
        componentDatatype: Cesium.ComponentDatatype.FLOAT,
        componentsPerAttribute: 3,
        normalize: false
    });
    var vertexArray = new Cesium.VertexArray({
        context: context,
        attributes: attributes,
        indexBuffer: indexBuffer
    });

    this.pointCommand = new Cesium.DrawCommand({
        boundingVolume: new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(113, 30, 50000), 200000),
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        shaderProgram: shaderProgram,
        renderState: renderState,
        vertexArray: vertexArray,
        pass: Cesium.Pass.OPAQUE,
        modelMatrix: GWViewer.GWMath.getMatrix(Cesium.Cartesian3.fromDegrees(113, 30, 50000), 0, 0, 0)
    });
};

Trangle.prototype.update = function (frameState) {
    if (this.pointCommand) {
        var commandList = frameState.commandList;
        commandList.push(this.pointCommand);
        this._viewer.scene.requestRender();
    } else {
        this.getPointCommand(this._viewer.scene._context);
    }

};

上面定義了一個三角形類，內部給定了三角形的三個頂點，通過

viewer.scene.primitives.add(new Trangle（viewer）);即可把自定義的着色器對象添加到球上，然后運行調試后發現沒有報錯也沒有繪制出三角形。

調試分析查找原因，着色器代碼確實運行繪制了，沒有顯示出來，原因是坐標位置不對，應該調用cesium自帶的着色器方法，轉換坐標。更改后的代碼如下：

點着色器：

attribute vec3 position3DHigh;
attribute vec3 position3DLow;
void main()
{
    vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);
    p = czm_modelViewProjectionRelativeToEye * p;
    gl_Position = p;
}

片元着色器：

void main()
{
    gl_FragColor = vec4(1,1,1,1);
}

換掉着色器代碼，我們就可以看到球上繪制的三角形了，展示結果如此下圖所示：