Trying to create a custom primitive

CesiumJS
1

Hello, I’m trying to understand how to create a my own primitive, and I’m having some probloms, here is my code (its in typescript)
Currently I’m just trying to render a simple line bu I get the following error:

VM1582:77004 WebGL: INVALID_OPERATION: bindBuffer: buffers can not be used with multiple targets

VM1582:77005 WebGL: INVALID_OPERATION: vertexAttribPointer: no bound ARRAY_BUFFER

my update code:

https://codepaste.net/8wvohg

2

Sorry, but I’m not quite sure what is causing that error. I’ll see if someone else on the team can help.

Best,

Hannah

3

Hey David,

In create Vertex array I see the following.

let vertexBuffer = Cesium.Buffer.createIndexBuffer({

context:context,

typedArray:new Float32Array([3648448.5117112226, 997327.3223067619, 5118713.136337872, 3772781.0332181295, 1022794.284035355, 5022656.431658396]),

usage : Cesium.BufferUsage.DYNAMIC_DRAW,

indexDatatype: Cesium.IndexDatatype.UNSIGNED_INT

});

createIndexBuffer creates a GL_ELEMENT_ARRAY_BUFFER.

This buffer is used to define the winding order of triangles specified in the currently bound Vertex Buffer.

VertexBuffers(GL_ARRAY_BUFFER) are created with a call to Cesium.Buffer.createVertexBuffer().

This is the buffer that is provided as the vertexBuffer property of VertexArrays.

The index buffer just references data in the Vertex Buffer.

In your code you have not created a vertex buffer which is why you get the error : INVALID_OPERATION: vertexAttribPointer: no bound ARRAY_BUFFER

Ideally you would first create a vertex bufffer then an index buffer.

var vertexBuffer = Cesium.Buffer.createVertexBuffer({

context: context,

typedArray: new Float32Array(pointArray),

usage: Cesium.BufferUsage.STATIC_DRAW

});

var indexBuffer = Cesium.Buffer.createIndexBuffer({

context: context,

typedArray: new Uint16Array(indicesArray),

usage: Cesium.BufferUsage.STATIC_DRAW,

indexDatatype: Cesium.IndexDatatype.UNSIGNED_SHORT

});

These buffers would be set as attributes to the VertexArray.

4

Hey sushrut, thanks for answering,
I changed my code and now I get not erros, but I see nothing on the screen. could you please try and guess why is that according to my code :

    update(frameState) {
        if (!this._show) {
            return;
        }

        let context = frameState.context;
        let vertexArray = this.createVertexArray(context);
        this._shaderProgram = Cesium.ShaderProgram.replaceCache({
            context: context,
            shaderProgram: this._shaderProgram,
            vertexShaderSource: `
            attribute vec3 position;

void main() {
    gl_Position = czm_viewportOrthographic * vec4(position, 1.0);
}
`,
            fragmentShaderSource: `

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

        this._renderState = Cesium.RenderState.fromCache({
            cull: {
                enabled: true,
                face: Cesium.CullFace.FRONT
            },
            depthTest: {
                enabled: false
            },
            depthMask: true,
            blending: undefined
        });

        this._drawCommand.modelMatrix = this._computedModelMatrix;
        this._drawCommand.renderState = this._renderState;
        this._drawCommand.shaderProgram = this._shaderProgram;
        this._drawCommand.vertexArray = vertexArray;
        this._drawCommand.pass = Cesium.Pass.OVERLAY;

        let commandList = frameState.commandList;
        commandList.push(this._drawCommand);
    }

    private createVertexArray(context: any) {
        var vertexBuffer = Cesium.Buffer.createVertexBuffer({
            context: context,
            typedArray:new Float32Array([3648448.5117112226, 997327.3223067619, 5118713.136337872, 3772781.0332181295, 1022794.284035355, 5022656.431658396]),
            usage: Cesium.BufferUsage.STATIC_DRAW
        });

        var indexBuffer = Cesium.Buffer.createIndexBuffer({
            context: context,
            typedArray: new Uint16Array([0,1]),
            usage: Cesium.BufferUsage.STATIC_DRAW,
            indexDatatype: Cesium.IndexDatatype.UNSIGNED_SHORT
        });

        let attributes = [
            {
                index: 0,
                enabled: true,
                vertexBuffer: vertexBuffer,
                componentsPerAttribute: 3,
                normalize: false,
                offsetInBytes: 0,
                strideInBytes: 0
            }
        ];

        return new Cesium.VertexArray({context:context, attributes:attributes, indexBuffer:indexBuffer});
    }