The avatar for @spattana
Sumant Pattanaik
Published
Edited
Oct 26, 2021
Fork of Skybox rendering using Cubemap.
•
2 forks
Importers
1 star
8
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### Variables and Functions`
Insert cell
modelObj = raymanObj
Insert cell
viewMatrix = getViewMatrix(
radius,
deg2rad(cameraAngles.x_angle),
deg2rad(cameraAngles.y_angle)
)
Insert cell
projectionMatrix = getProjectionMatrix(fov_Y, near, far)
Insert cell
fov_Y = 45
Insert cell
near = 0.1
Insert cell
far = 2.5
Insert cell
aspect = canvasWidth/canvasHeight
Insert cell
Insert cell
Insert cell
radius = 1
Insert cell
deg2rad = (deg) => (Math.PI * deg) / 180
Insert cell
modelDim = computeModelExtent(modelObj)
Insert cell
cameraLookAt = modelDim.center
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
renderSkybox = () => {
gl.depthFunc(gl.LEQUAL);
const uniforms = {
cubemap,
invViewProjectionMatrix
};
gl.useProgram(skyboxProgramIfo.program);
twgl.setUniforms(skyboxProgramIfo, uniforms);

twgl.setBuffersAndAttributes(gl, skyboxProgramIfo, skyboxBufferInfo);
twgl.drawBufferInfo(gl, skyboxBufferInfo);
gl.depthFunc(gl.LESS);
}
Insert cell
mutable debug = 0
Insert cell
textureURL = FileAttachment("Rayman.png").url()
Insert cell
textureImg = FileAttachment("Rayman.png").image()
Insert cell
Insert cell
debug
Insert cell
renderScene = () => {
const eyePosition = m4.inverse(viewMatrix).slice(12, 15);

const uniforms = {
modelMatrix: m4.identity(),
eyePosition,
tex,
mirrorFlag,
viewMatrix: viewMatrix,
projectionMatrix: projectionMatrix,
cubemap
};
mutable debug = uniforms;
gl.useProgram(sceneProgramInfo.program);
twgl.setUniforms(sceneProgramInfo, uniforms);
sceneBufferInfoArray.forEach((bufferInfo) => {
twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
});
}
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("cubemaps_skybox.png").image()
Insert cell
cubemapImages = cubeimagesCroppedFromHCrossShape(testurl, 128)
Insert cell
columns(cubemapImages)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
image_from_URL(imageURLs[imgID])
Insert cell
Insert cell
Insert cell
px = getImageData(await FileAttachment("px.png").blob())
Insert cell
nx = getImageData(await FileAttachment("nx.png").blob())
Insert cell
py = getImageData(await FileAttachment("py.png").blob())
Insert cell
ny = getImageData(await FileAttachment("ny.png").blob())
Insert cell
pz = getImageData(await FileAttachment("pz.png").blob())
Insert cell
nz = getImageData(await FileAttachment("nz.png").blob())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### Shaders and ProgramInfo`
Insert cell
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
import { image_from_URL } from "@spattana/webgl-texturing-using-twgl"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { hex2rgb } from "@spattana/cap-4720-introduction-to-observable"
Insert cell
v3 = twgl.v3
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