The avatar for @spattana
Sumant Pattanaik
Public
Edited
Oct 17, 2024
Fork of WebGL Texture in REGL
•
1 fork
Importers
3 stars
2
CAP 4720 2021
Parametric curveCAP 4720: Introduction to ObservableUseful Javascript Array functions.Vectors and vector AlgebraExample Use of TWGL Math LibraryIntro to WebGL Programming using twgl.Point In front or back of A PlaneRasterization & InterpolationBarycentric CoordinatesModel Loaders using ThreeJSDiffuse lighting: Lambert Cosine Model.Shade Due to Diffuse LightingOrbit CameraSpotLight and its effect in Lighting.Normal MatrixSpecular lighting ModelDiffuse + Specular + Ambient Lighting
WebGL Texturing using twgl.
WebGL/twgl Rendering of Multipart Model with TextureSkybox rendering using Cubemap.Stenciling ExampleSilhouette EdgeShadow Projection of 3D ObjectsFragment Inside/Outside VolumeInbeweening using Tween.js: 1RotationsRay-Scene (2D) intersectionRotor QuaternionSLERP: Spherical Linear Interpolation
Also listed in…
Computer Graphics Fundamentals
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