The avatar for @spattana
Sumant Pattanaik
Public
Edited
Oct 17, 2024
Fork of WebGL Texture in REGL
•
1 fork
Importers
3 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
attributes = ({
position: {
numComponents: 2,
data: quadData.positions.flat()
},
uv: { numComponents: 2, data: quadData.uvs.flat() },
indices: quadData.cells.flat()
})
Insert cell
bufferInfo = twgl.createBufferInfoFromArrays(gl, attributes)
Insert cell
uniforms = ({
tex: texture,
aspectRatio
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
imageURL = FileAttachment("cubetexture.png").url()
Insert cell
image = image_from_URL(imageURL)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
texture1 = twgl.createTexture(gl, {
// see more info on options from: https://twgljs.org/docs/module-twgl.html#.TextureOptions
// Also see https://twgljs.org/docs/
src: image,
flipY: true,
wrap: gl[textureOptions.wrap.toUpperCase()],
mag: gl[textureOptions.magfilter.toUpperCase()],
min: gl[textureOptions.minfilter.toUpperCase()]
})
Insert cell
Insert cell
Insert cell
Insert cell
url = "https://raw.githubusercontent.com/mdn/webgl-examples/gh-pages/tutorial/sample6/cubetexture.png"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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