Moment For Technology

WebGL vertex data and Attributes

Posted on Dec. 2, 2022, 7:15 p.m. by Leon Gallagher
Category: The front end Tag: The front end webgl

Vertex shader processing is required

  • uv
  • position
  • normal
  • color
  • targent
attribute vec3 position;
attribute vec2 uv;
attribute vec3 normal;

uniform mat4 model;

varying vec2 vUv;
varying vec3 vNormal;
void main() {
    vUv = uv;
    vNormal = mat3(transpose(inverse(model))) * normal;  
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
Copy the code
var vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
var FSIZE = verticesColors.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6.0);
gl.enableVertexAttribArray(a_Position);
Copy the code
  • Usage mode 2
layout (location = 0) in vec3 position;
layout (location = 1) in vec3 normal;
layout (location = 2) in vec2 uv;

out vec2 vUv;
out vec3 vNormal;
void main() {
    vUv = uv;
    vNormal = normal;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

Copy the code
const POSITION_LOCATION = 0;
const NORMAL_LOCATION = 1;
const TEXCOORD_0_LOCATION = 2;
glPlaneVAO = gl.createVertexArray();
let planeVBO = gl.createBuffer();
gl.bindVertexArray(glPlaneVAO);
gl.bindBuffer(gl.ARRAY_BUFFER, planeVBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(planeVertices), gl.STATIC_DRAW);
gl.enableVertexAttribArray(POSITION_LOCATION);
gl.vertexAttribPointer(POSITION_LOCATION, 3, gl.FLOAT, false.8 * sizeFloat, 0);
gl.enableVertexAttribArray(NORMAL_LOCATION);
Copy the code

Don't need vertex shader processing

  • indices
// Indices of the vertices
var indices = new Uint8Array([0.1.2.0.2.3.// front
  0.3.4.0.4.5.// right
  0.5.6.0.6.1.// up
  1.6.7.1.7.2.// left
  7.4.3.7.3.2.// down
  4.7.6.4.6.5 // back
]);
// Index must go through this API
var indexBuffer = gl.createBuffer(); //index 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); //bind buffer
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); // bufferdata
Copy the code
Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.