Use the Extended method.

We will quickly display a triangle using the extended method that combine several calls into one

Imports

import ipywebgl
import numpy as np

Create the viewer

And change the default color

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

Create a program

Using the create_program_ext we can directly give the vertex and fragment shader code.

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);
}
""")
program

Create the VBO

using the create_buffer_ext we can directly create, and set the data for the vertex buffer in one command

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

Vertex Array Ext

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

• first argument is the program (can be None if we do not use the name of the attribute)

• 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; or the location as an int if we know the location of the attribute)

• third param is the data for an indices buffer (see indexed vertices example )

vao = w.create_vertex_array_ext(
    program,
    [
        (vbo, '2f32', 'in_position'),
    ]
)
vao

Render

render the triangle and display the widget

w.clear()

w.use_program(program)
w.bind_vertex_array(vao)
w.draw_arrays('TRIANGLES', 0, 3)

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