Public
Edited
Nov 6
container = html `<div style="height:800px; width:800px"></div>`
vs = `#version 300 es
in vec3 positions;
void main(void) {
gl_Position = vec4(positions, 1.0);
}
`;
fs = `#version 300 es
precision highp float;
out vec4 color;
void main(void) {
color = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
triangle_layer = {
class TriangleLayer extends deck.Layer {
initializeState = () => {
this.state = {
model: this.getModel({})
};
}
getModel = () => {
const { device } = this.context;
const geometry = new luma.Geometry({
drawMode: device.TRIANGLE_FAN,
vertexCount: 3,
attributes: {
positions: new Float32Array([
-0.5, -0.5, 0,
0.5, -0.5, 0,
0.0, 0.5, 0
])
}
})
let model = new luma.Model(device, {
vs,
fs,
geometry,
topology: 'triangle-list'
});
return model
}
draw = ({ uniforms }) => {
const { model } = this.state;
model.draw({
uniforms
});
}
}
let triangle_layer = new TriangleLayer({});
return triangle_layer
}
deckgl = new deck.DeckGL({
container,
width: '800px',
height: '800px',
views:[new deck.OrthographicView({id: 'ortho'})],
initialViewState: {
target: [0, 50, 0],
zoom: 2,
minZoom: -2
},
layers: [triangle_layer]
});
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
luma = deck && window.luma
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.
