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.0, 0.0, 1.0)
.blend()
.blendFunc(picogl.ONE, picogl.ONE_MINUS_SRC_ALPHA)
program = app.createProgram(vertexShader, fragShader, {transformFeedbackVaryings: ["tfPosition","tfVelocity"]})
NUM_PARTICLES = 100
VB = {
var positionData = new Float32Array(NUM_PARTICLES * 3);
var colorData = new Float32Array(NUM_PARTICLES * 3);
for (var i = 0; i < NUM_PARTICLES; ++i) {
var vec3i = i * 3;
positionData[vec3i] = Math.random() * 2 - 1;
positionData[vec3i + 1] = Math.random() * 2 - 1;
positionData[vec3i + 2] = Math.random() * 2 - 1;
colorData[vec3i] = Math.random();
colorData[vec3i + 1] = Math.random();
colorData[vec3i + 2] = Math.random();
}
var positionsA = app.createVertexBuffer(picogl.FLOAT, 3, positionData);
var velocitiesA = app.createVertexBuffer(picogl.FLOAT, 3, positionData.length);
var positionsB = app.createVertexBuffer(picogl.FLOAT, 3, positionData.length);
var velocitiesB = app.createVertexBuffer(picogl.FLOAT, 3, positionData.length);
var colors = app.createVertexBuffer(picogl.FLOAT, 3, colorData);
return {positionsA, velocitiesA, positionsB, velocitiesB, colors};
}
vertexArrayA = app.createVertexArray()
.vertexAttributeBuffer(0, VB.positionsA)
.vertexAttributeBuffer(1, VB.velocitiesA)
.vertexAttributeBuffer(2, VB.colors)
vertexArrayB = app.createVertexArray()
.vertexAttributeBuffer(0, VB.positionsB)
.vertexAttributeBuffer(1, VB.velocitiesB)
.vertexAttributeBuffer(2, VB.colors)
transformFeedbackA = app.createTransformFeedback()
.feedbackBuffer(0, VB.positionsA)
.feedbackBuffer(1, VB.velocitiesA)
transformFeedbackB = app.createTransformFeedback()
.feedbackBuffer(0, VB.positionsB)
.feedbackBuffer(1, VB.velocitiesB)
massUniforms = app.createUniformBuffer([
picogl.FLOAT_VEC4,
picogl.FLOAT_VEC4,
picogl.FLOAT_VEC4,
picogl.FLOAT,
picogl.FLOAT,
picogl.FLOAT
]).set(0, new Float32Array([
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
1.0
])).set(1, new Float32Array([
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
1.0
])).set(2, new Float32Array([
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
1.0
]))
.set(3, Math.random() / 30000)
.set(4, Math.random() / 30000)
.set(5, Math.random() / 30000)
.update()
drawCallA = app.createDrawCall(program, vertexArrayA, picogl.POINTS)
.transformFeedback(transformFeedbackB)
.uniformBlock("Mass", massUniforms)
drawCallB = app.createDrawCall(program, vertexArrayB, picogl.POINTS)
.transformFeedback(transformFeedbackA)
.uniformBlock("Mass", massUniforms)
draw = {
let frame = 0;
while (true) {
app.clear();
drawCallA.draw();
yield frame++;
app.clear();
drawCallB.draw();
yield frame++;
}
}
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.
