The avatar for @esperanc
Claudio Esperança
Computer Graphics & Visualization @ufrj.br
Published
PicoGL
Edited
Jun 26, 2020
2 forks
1 star
PicoGL
PicoGL tutorial - part I - Drawing a triangle
PicoGL tutorial - part II (A) - TexturesPicoGL tutorial - part II (B) - FBO as texturesPicoGL tutorial - part V - A particle system in GPUPhong Shaded CubeA particle system in GPUVolume rendering with slice compositing
Insert cell
Insert cell
canvas = html`<canvas width=640 height=480>`
Insert cell
Insert cell
picogl = require('picogl@0.17.3/build/picogl.min.js')
Insert cell
Insert cell
app = picogl.createApp(canvas)
.clearColor(0, 0, 0, 1);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
program = app.createProgram(vertexShader, fragShader)
Insert cell
Insert cell
positions = app.createVertexBuffer(picogl.FLOAT, 2, new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]))
Insert cell
colors = app.createVertexBuffer(picogl.FLOAT, 3, new Float32Array([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0
]))
Insert cell
Insert cell
triangleArray = app.createVertexArray()
.vertexAttributeBuffer(0, positions)
.vertexAttributeBuffer(1, colors)
Insert cell
Insert cell
drawCall = app.createDrawCall(program, triangleArray)
Insert cell
Insert cell
draw = {
app.clear();
drawCall.draw();
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more