Notebooks 2.0 is here.
Published
Edited
Oct 25, 2021
1 star
textureImage = FileAttachment("Rayman.png").image()
modelURL = FileAttachment("raymanModel.obj").url()
bgUniforms = ({
tex: texture,
aspectRatio
})
bgAttributes = ({
position: {
numComponents: 2,
data: quadData.positions.flat()
},
uv: { numComponents: 2, data: quadData.uvs.flat() },
indices: quadData.cells.flat()
})
bgBufferInfo = twgl.createBufferInfoFromArrays(gl, bgAttributes)
bgShaders = ({
vert: `#version 300 es
precision mediump float;
in vec2 position;
in vec2 uv;
out vec2 fragUV;
uniform vec2 aspectRatio;
void main () {
fragUV = uv;
gl_Position = vec4(position/aspectRatio, 1, 1);
}`,
frag: `#version 300 es
precision mediump float;
uniform sampler2D tex;
in vec2 fragUV;
out vec4 outColor;
void main () {
outColor = texture(tex, fragUV);
}`,
})
function bgRender() {
gl.useProgram(bgProgramInfo.program);
twgl.setUniforms(bgProgramInfo, bgUniforms);
twgl.setBuffersAndAttributes(gl, bgProgramInfo, bgBufferInfo);
twgl.drawBufferInfo(gl, bgBufferInfo);
}
modelUniforms = ({
aspectRatio,
lineColor: [0.0, 1.0, 0.0]
})
modelShaders = ({
vert: `#version 300 es
in vec2 uv;
uniform vec2 aspectRatio;
out vec3 fragNormal;
void main () {
vec2 normalizedUV = (uv * 2. - 1.) / aspectRatio;
gl_Position = vec4(normalizedUV, 0, 1);
}`,
frag: `#version 300 es
precision mediump float;
out vec4 outColor;
uniform vec3 lineColor;
void main () {
outColor = vec4(lineColor, 1);
}`
})
modelProgramInfo = {
errorBlock2.style.height = "20px";
errorBlock2.innerHTML = "Program Shader compilation successful";
return twgl.createProgramInfo(gl, [modelShaders.vert, modelShaders.frag], (message) => {
errorBlock2.style.height = "400px";
errorBlock2.innerHTML = "Program Shader compilation error\n" + message;
});
}
function modelRender() {
gl.useProgram(modelProgramInfo.program);
twgl.setUniforms(modelProgramInfo, modelUniforms);
gl.lineWidth(5.0);
modelBufferInfoArrays.forEach(bufferInfo => {
twgl.setBuffersAndAttributes(gl, modelProgramInfo, bufferInfo);
// Because WebGL2 doesn't support glPolygonMode( GL_FRONT_AND_BACK, GL_LINE ),
// We have to render the triangles 3 points at a time
for(let i = 0; i < bufferInfo.numElements; i += 3) {
twgl.drawBufferInfo(gl, bufferInfo, gl.LINE_LOOP, 3, i);
}
});
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
bgRender();
modelRender();
}
quadData = {
return {
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1]
],
uvs: [
[0, 0],
[0, 1],
[1, 1],
[1, 0]
],
cells: [
[0, 1, 2],
[2, 3, 0]
]
};
}
twgl = require("twgl.js")
import {
loadModelFromURL,
computeModelExtent
} from "@spattana/model-loaders-using-threejs"
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.
