Bind Index Buffer To Vao

When binding an Index buffer to a Vertex Array it will create the buffer for you and populate the data.

Import

import ipywebgl
import numpy as np

Create viewer

And clear the color to make the background visible.

w = ipywebgl.GLViewer()
w.clear_color(.8, .8, .8 ,1)
w.clear()
w.execute_commands(execute_once=True)

Program

Create the simple program to display a triangle in clip space

program = w.create_program_ext(
"""#version 300 es

in vec4 in_position;

void main() {
gl_Position = in_position;
}
""",

"""#version 300 es
precision highp float;

out vec4 outColor;

void main() {
  outColor = vec4(1, 0, 0.5, 1);
}
""")

Buffer

Create a buffer to store the vertices values and fill it with 2d positions.

The buffer has 4 vertices with X Y values (to create a quad )

vbo = w.create_buffer_ext(
    src_data=np.array(
        [ 0, 0,
          0, 0.5,
          0.7, 0.5,
          0.7, 0,
        ], dtype=np.float32)
)
vbo

Vertex Array

Create a vertex array and bind the program and the buffer.

• first argument is the program

• second argument is an array of tuple with

  • the buffer

  • description of the attribute binding *supported values are [‘1’,’2’,’3’,’4’][‘i8’, ‘i16’, ‘i32’, ‘u8’, ‘u16’, ‘u32’, ‘f16’, ‘f32’]

  • (n times) name of the n^th attribute in the program

Then bind the index buffer to tell which vertex we want to draw.

• index buffer must be of type uint16 or uint8.

vao = w.create_vertex_array_ext(
    program,
    [
        (vbo, '2f32', 'in_position'),
    ],
    np.asarray([0,1,2, 2,3,0], dtype=np.uint8)
)

Draw

Update the commands buffer to render that quad, and call execute_commands to send it to the frontend.

w.clear()
w.use_program(program)
w.bind_vertex_array(vao)
w.draw_elements('TRIANGLES', 3*2, 'UNSIGNED_BYTE', 0)

# render in loop if needed
w.execute_commands()
w