Computer Graphics & Visualization @ufrj.br
canvas = html`<canvas width=640 height=480>`
picogl = require('picogl@0.17.3/build/picogl.min.js')
app = picogl.createApp(canvas)
.clearColor(0, 0, 0, 1);
programMRT = app.createProgram(vertexShader, fragShaderMRT)
programBlend = app.createProgram(vertexShader, fragShaderBlend)
quadPositions = app.createVertexBuffer(picogl.FLOAT, 2, new Float32Array([
-1.0, 1.0,
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0
]))
triangPositions = app.createVertexBuffer(picogl.FLOAT, 2, new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]))
triangleArray = app.createVertexArray().vertexAttributeBuffer(0, triangPositions)
quadArray = app.createVertexArray().vertexAttributeBuffer(0,quadPositions)
frameBuffer = {
var colorTarget1 = app.createTexture2D(app.width, app.height);
var colorTarget2 = app.createTexture2D(app.width, app.height);
return app.createFramebuffer()
.colorTarget(0, colorTarget1)
.colorTarget(1, colorTarget2);
}
drawCallMRT = app.createDrawCall(programMRT, triangleArray)
drawCallBlend = app.createDrawCall(programBlend, quadArray)
.texture("texture1", frameBuffer.colorAttachments[0])
.texture("texture2", frameBuffer.colorAttachments[1])
drawMRT = {
app.drawFramebuffer(frameBuffer).clear();
drawCallMRT.draw();
}
drawBlend = {
app.defaultDrawFramebuffer().clear();
drawCallBlend.draw();
}
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.
