Skip to content

Commit

Permalink
🐛 fix mobile port not working by using gl.ACTIVE_ATTRIBUTES instead o…
Browse files Browse the repository at this point in the history 
…f model data for determining if specific attribute exists
  • Loading branch information
@slooi
slooi committed Oct 2, 2024
1 parent 193a1a0 commit a1b0343
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 107 deletions.
218 changes: 112 additions & 106 deletions src/webgl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,113 @@ import { m4 } from "./m4"
import { Model } from "./model/Model"

Check failure on line 2 in src/webgl.ts

View workflow job for this annotation

GitHub Actions / build-and-deploy 

Cannot find module './model/Model' or its corresponding type declarations.
import { model } from "./model/modelPlane"


export function createWebglRenderer(canvas: HTMLCanvasElement) {
console.log("createWebglRenderer was called!")
// ########################################################################
// init canvas/gl
// ########################################################################
// canvas
// const canvas = document.querySelector("canvas") as HTMLCanvasElement
canvas.width = 300 * 2 //window.innerWidth
canvas.height = 300 * 2 // window.innerHeight

canvas.style.width = `${canvas.width}px`
canvas.style.height = `${canvas.height}px`

// gl
let gl = getWebglContext(canvas)



// ########################################################################
// init program/material for obj
// ########################################################################
// Program
const program = createProgram(gl, model.vs, model.fs)

// Location
const programAttributeLocations = getAttributeLocationsFromProgram(gl, program)
const programUniformLocations = getUniformLocationsFromProgram(gl, program)
const modelContainer = {
programAttributeLocations: programAttributeLocations,
programUniformLocations: programUniformLocations,
...model
}
const u_matrix = modelContainer.programUniformLocations["u_matrix"]
if (!u_matrix) throw new Error("ERROR: u_matrix not defined!")
console.log("programAttributeLocations", programAttributeLocations)

// ########################################################################
// create buffers w/ attributes for obj
const vao = setupProgramVertexAttributeArrayAndBuffers(gl, modelContainer)

// ########################################################################
// textures
// ########################################################################
setupModelTexture(gl, modelContainer)


// ########################################################################
// use program (for uniforms + what shader? to use) + use program's uniforms
// ########################################################################
// program use
gl.useProgram(program)
let transformMatrix = m4.identity()
transformMatrix = m4.dot(m4.perspective(Math.PI * 0.6666, 1), m4.rotateY(m4.translate(transformMatrix, 100, 0, 100), 30))
gl.uniformMatrix4fv(u_matrix, true, transformMatrix)



// ########################################################################
// setup global? state
// ########################################################################
gl.clearColor(187 / 255, 227 / 255, 248 / 255, 1)
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT)
gl.enable(gl.CULL_FACE)
gl.enable(gl.DEPTH_TEST)



// ########################################################################
// DRAW :D
// ########################################################################
gl.drawArrays(gl.TRIANGLES, 0, model.vertexData.a_position.data.length / 3)


// ########################################################################
// clean up + return
// ########################################################################
// Need to reset identity so next render doesn't contain previous render's transforms
transformMatrix = m4.identity()
return {
clear: () => {
// Reset matrix
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT)

// Reset transform
transformMatrix = m4.identity()
},
draw: () => {
transformMatrix = m4.dot(m4.perspective(Math.PI * 0.5, 1), m4.inverse(transformMatrix))
gl.uniformMatrix4fv(u_matrix, true, transformMatrix)

// Draw
gl.drawArrays(gl.TRIANGLES, 0, model.vertexData.a_position.data.length / 3)
},
scale: (sx: number, sy: number, sz: number) => transformMatrix = m4.dot(m4.scaling(sx, sy, sz), transformMatrix),
translate: (tx: number, ty: number, tz: number) => transformMatrix = m4.dot(m4.translation(tx, ty, tz), transformMatrix),
rotateX: (degreeX: number) => transformMatrix = m4.dot(m4.rotationX(degreeX), transformMatrix),
rotateY: (degreeY: number) => transformMatrix = m4.dot(m4.rotationY(degreeY), transformMatrix),
rotateZ: (degreeZ: number) => transformMatrix = m4.dot(m4.rotationZ(degreeZ), transformMatrix)
try {
console.log("createWebglRenderer was called!")
// ########################################################################
// init canvas/gl
// ########################################################################
// canvas
// const canvas = document.querySelector("canvas") as HTMLCanvasElement
canvas.width = 300 * 2 //window.innerWidth
canvas.height = 300 * 2 // window.innerHeight

canvas.style.width = `${canvas.width}px`
canvas.style.height = `${canvas.height}px`

// gl
let gl = getWebglContext(canvas)



// ########################################################################
// init program/material for obj
// ########################################################################
// Program
const program = createProgram(gl, model.vs, model.fs)

// Location
const programAttributeLocations = getAttributeLocationsFromProgram(gl, program)
const programUniformLocations = getUniformLocationsFromProgram(gl, program)
const modelContainer = {
programAttributeLocations: programAttributeLocations,
programUniformLocations: programUniformLocations,
...model
}
const u_matrix = modelContainer.programUniformLocations["u_matrix"]
if (!u_matrix) throw new Error("ERROR: u_matrix not defined!")
console.log("programAttributeLocations", programAttributeLocations)

// ########################################################################
// create buffers w/ attributes for obj
const vao = setupProgramVertexAttributeArrayAndBuffers(gl, modelContainer)

// ########################################################################
// textures
// ########################################################################
setupModelTexture(gl, modelContainer)


// ########################################################################
// use program (for uniforms + what shader? to use) + use program's uniforms
// ########################################################################
// program use
gl.useProgram(program)
let transformMatrix = m4.identity()
transformMatrix = m4.dot(m4.perspective(Math.PI * 0.6666, 1), m4.rotateY(m4.translate(transformMatrix, 100, 0, 100), 30))
gl.uniformMatrix4fv(u_matrix, true, transformMatrix)



// ########################################################################
// setup global? state
// ########################################################################
gl.clearColor(187 / 255, 227 / 255, 248 / 255, 1)
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT)
gl.enable(gl.CULL_FACE)
gl.enable(gl.DEPTH_TEST)



// ########################################################################
// DRAW :D
// ########################################################################
gl.drawArrays(gl.TRIANGLES, 0, model.vertexData.a_position.data.length / 3)


// ########################################################################
// clean up + return
// ########################################################################
// Need to reset identity so next render doesn't contain previous render's transforms
transformMatrix = m4.identity()
return {
clear: () => {
// Reset matrix
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT)

// Reset transform
transformMatrix = m4.identity()
},
draw: () => {
transformMatrix = m4.dot(m4.perspective(Math.PI * 0.5, 1), m4.inverse(transformMatrix))
gl.uniformMatrix4fv(u_matrix, true, transformMatrix)

// Draw
gl.drawArrays(gl.TRIANGLES, 0, model.vertexData.a_position.data.length / 3)
},
scale: (sx: number, sy: number, sz: number) => transformMatrix = m4.dot(m4.scaling(sx, sy, sz), transformMatrix),
translate: (tx: number, ty: number, tz: number) => transformMatrix = m4.dot(m4.translation(tx, ty, tz), transformMatrix),
rotateX: (degreeX: number) => transformMatrix = m4.dot(m4.rotationX(degreeX), transformMatrix),
rotateY: (degreeY: number) => transformMatrix = m4.dot(m4.rotationY(degreeY), transformMatrix),
rotateZ: (degreeZ: number) => transformMatrix = m4.dot(m4.rotationZ(degreeZ), transformMatrix)
}
} catch (err) {
document.body.innerHTML = `${err}`
}
}

/*
WEBGL FUNCTIONS
WEBGL FUNCTIONS
*/

function setupModelTexture(gl: WebGL2RenderingContext, modelContainer: { programAttributeLocations: ReturnType<typeof getAttributeLocationsFromProgram>, programUniformLocations: ReturnType<typeof getUniformLocationsFromProgram> } & Model) {
Expand Down Expand Up @@ -140,14 +143,16 @@ function setupProgramVertexAttributeArrayAndBuffers(gl: WebGL2RenderingContext,
gl.bindVertexArray(vao)

// Create list of attribute names using the model's `vertexData`
const attributeNameArray = (Object.keys(modelContainer.vertexData) as Array<keyof typeof modelContainer.vertexData>)
attributeNameArray.map(name => {
const vertexAttribute = modelContainer.vertexData[name]
if (!vertexAttribute) throw new Error("ERROR: this vertdata does NOT exist!")
const attributeNameArray = Object.entries(modelContainer.programAttributeLocations)
attributeNameArray.map(([name, location]) => {
const potentiallyUnsafeSpecificVertexAttribute = modelContainer.vertexData[name as keyof typeof modelContainer.vertexData]
if (!potentiallyUnsafeSpecificVertexAttribute) throw new Error("ERROR: potentiallyUnsafeSpecificVertexAttribute is undefined!")

const vertexAttribute = potentiallyUnsafeSpecificVertexAttribute

// Get vertexAttributeArray params
const location = modelContainer.programAttributeLocations[name]
console.log("location", location)
if (location === undefined) throw new Error("ERROR: location is not defined!")
if (location === undefined) throw new Error(`ERROR: location is not defined! INFO: Location: ${location} name: ${name}`)
const format = vertexAttribute.format
const glType = format.type === Float32Array ? gl.FLOAT : format.type === Uint8Array ? gl.UNSIGNED_BYTE : (() => { throw new Error("ERROR: NOT SUPPOSED TYPE WAS USED") })()
const normalize = format.normalize
Expand Down Expand Up @@ -184,6 +189,7 @@ function getAttributeLocationsFromProgram(gl: WebGL2RenderingContext, program: W
for (let i = 0; i < numberOfAttributes; i++) {
const attribute = gl.getActiveAttrib(program, i)
console.log("attributeName", attribute?.name)
// setTimeout(() => { document.body.prepend(document.createElement("p").innerHTML = `${i}${attribute?.name}`) }, 0)
if (!attribute?.name) throw new Error("ERROR: model attribute has no name!")
programAttributeLocations[attribute.name] = gl.getAttribLocation(program, attribute.name)
}
Expand Down Expand Up @@ -220,4 +226,4 @@ function createProgram(gl: WebGLRenderingContext, vs: string, fs: string) {

gl.useProgram(program)
return program
}
}
2 changes: 1 addition & 1 deletion tsconfig.app.tsbuildinfo
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"root":["./src/app.tsx","./src/userinputhandler.ts","./src/m4.ts","./src/main.tsx","./src/tests.test.ts","./src/vite-env.d.ts","./src/webgl.ts"],"version":"5.6.2"}
{"root":["./src/app.tsx","./src/userinputhandler.ts","./src/m4.ts","./src/main.tsx","./src/tests.test.ts","./src/vite-env.d.ts","./src/webgl.ts","./src/model/model.ts","./src/model/modell.ts","./src/model/modelplane.ts"],"version":"5.6.2"}

0 comments on commit a1b0343

Please sign in to comment.