The avatar for @esperanc
Claudio Esperança
Computer Graphics & Visualization @ufrj.br
Published
PicoGL
Edited
Jul 3, 2020
Fork of PicoGL tutorial - part I - Drawing a triangle
•
1 fork
1
PicoGL
PicoGL tutorial - part I - Drawing a triangle
PicoGL tutorial - part II (A) - Textures
PicoGL 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
gl = canvas.getContext("webgl2")
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.5, 0.5,
-0.5, 0.5,
0.5, -0.5,
0.5, 0.5
]))
Insert cell
Insert cell
triangleArray = app.createVertexArray()
.vertexAttributeBuffer(0, positions)
Insert cell
Insert cell
texture = {
let image = await FileAttachment("webgl-logo.png").image();
return app.createTexture2D(image, {flipY: true});
}
Insert cell
Insert cell
drawCall = app.createDrawCall(program, triangleArray).texture("tex", texture)
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