gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove useless color buffer and prepare texture buffer implementation

This commit is contained in:
gbrochar 2020-11-24 17:28:40 +01:00
parent 6a1b25777d
commit 8c1baf3a86
4 changed files with 67 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/client/buffers.ts
View File

@ -26,45 +26,6 @@ export function initBuffers(
new Float32Array(normals),
gl.STATIC_DRAW);
const myColors = [
[1.0, 1.0, 1.0, 1.0],
[1.0, 0.0, 0.0, 1.0],
[0.0, 1.0, 0.0, 1.0],
[0.0, 0.0, 1.0, 1.0],
[1.0, 1.0, 0.0, 1.0],
[1.0, 0.0, 1.0, 1.0],
[0.0, 0.0, 0.0, 1.0],
[0.0, 1.0, 1.0, 1.0],
];
let faceColors: any = [];
for (let i = 0; i < 70; i++) {
faceColors = faceColors.concat(myColors);
}
// Convert the array of colors into a table for all the vertices.
const colors: any = [];
for (let j = 0; j < indices.length; ++j) {
const c = [
myColors[Math.floor(Math.random() * 8)],
faceColors[Math.floor(Math.random() * 8)],
faceColors[Math.floor(Math.random() * 8)],
faceColors[Math.floor(Math.random() * 8)],
];
// Repeat each color four times for the four vertices of the face
// colors = colors.concat([1.0, 1.0, 1.0, 1.0]);
colors.push(c[0][0]);
colors.push(c[0][1]);
colors.push(c[0][2]);
colors.push(c[0][3]);
}
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
@ -73,7 +34,6 @@ export function initBuffers(
return {
position: positionBuffer,
color: colorBuffer,
indices: indexBuffer,
normals: normalBuffer,
};

34
src/client/main.ts
View File

@ -30,14 +30,12 @@ async function main() {
const vsSource = `
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor;
attribute vec4 aVertexNormal;
uniform mat4 uProjectionMatrix;
uniform mat4 uviewMatrix;
uniform mat4 umodelMatrix;
varying highp vec4 vColor;
varying highp vec4 vNormal;
varying highp vec3 vPosition;
void main()
@ -47,7 +45,6 @@ async function main() {
umodelMatrix *
aVertexPosition;
vPosition = vec3(aVertexPosition);
vColor = aVertexColor;
vNormal = umodelMatrix * aVertexNormal;
}
`;
@ -55,7 +52,6 @@ async function main() {
const fsSource = `
precision highp float;
varying highp vec4 vColor;
varying highp vec4 vNormal;
varying highp vec3 vPosition;
@ -91,7 +87,6 @@ async function main() {
const fsSource2 = `
precision highp float;
varying highp vec4 vColor;
varying highp vec4 vNormal;
varying highp vec3 vPosition;
@ -126,7 +121,6 @@ async function main() {
const fsSource3 = `
precision highp float;
varying highp vec4 vColor;
varying highp vec4 vNormal;
varying highp vec3 vPosition;
@ -193,8 +187,6 @@ async function main() {
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram,
'aVertexPosition'),
vertexColor: gl.getAttribLocation(shaderProgram,
'aVertexColor'),
vertexNormal: gl.getAttribLocation(shaderProgram,
'aVertexNormal'),
},
@ -283,15 +275,15 @@ async function main() {
circleSize = $('#input2').val();
circleSize = parseFloat(circleSize);
});
$('#sphere').on('click', async function() {
$('#o_sphere').on('click', async function() {
const data = await getObj('/static/objs/sphere.obj');
updateObj(data);
});
$('#teapot').on('click', async function() {
$('#o_teapot').on('click', async function() {
const data = await getObj('/static/objs/teapot.obj');
updateObj(data);
});
$('#fox').on('click', async function() {
$('#o_fox').on('click', async function() {
const data = await getObj('/static/objs/fox.obj');
updateObj(data);
});
@ -413,26 +405,6 @@ function drawScene(gl: any,
programInfo.attribLocations.vertexNormal);
}
// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute.
{
const numComponents = 4;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexColor,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexColor);
}
// Tell WebGL which indices to use to index the vertices
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);

54
src/client/texture.ts Normal file
View File

@ -0,0 +1,54 @@
/**
* Initialize a texture and load an image.
* @param {any} gl the gl context
* @param {string} url the url of the texture
*/
export function loadTexture(gl: any, url: any) {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// Because images have to be downloaded over the internet
// they might take a moment until they are ready.
// Until then put a single pixel in the texture so we can
// use it immediately. When the image has finished downloading
// we'll update the texture with the contents of the image.
const level = 0;
const internalFormat = gl.RGBA;
const width = 1;
const height = 1;
const border = 0;
const srcFormat = gl.RGBA;
const srcType = gl.UNSIGNED_BYTE;
const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
width, height, border, srcFormat, srcType,
pixel);
const image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
srcFormat, srcType, image);
// WebGL1 has different requirements for power of 2 images
// vs non power of 2 images so check if the image is a
// power of 2 in both dimensions.
if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
// Yes, it's a power of 2. Generate mips.
gl.generateMipmap(gl.TEXTURE_2D);
} else {
// No, it's not a power of 2. Turn off mips and set
// wrapping to clamp to edge
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
}
};
image.src = url;
return texture;
}
function isPowerOf2(value: number) {
return (value & (value - 1)) == 0;
}

13
views/index.ejs
View File

@ -18,6 +18,7 @@
<button id='button1'>Change Shader to black and white</button>
<button id='button2'>Change Shader to colored</button>
<button id='button3'>Change Shader to flat</button>
<button id='button3'>Change Shader to texture</button>
</div>
<div class='ui-block'>
<input id='input1' value='50'></input>
@ -29,9 +30,15 @@
<button id='changecirclesize'>Change circle size</button>
</div>
<div class='ui-block'>
<button id='sphere'>Set obj to sphere</button>
<button id='teapot'>Set obj to teapot</button>
<button id='fox'>Set obj to fox</button>
<button id='o_sphere'>Set object to sphere</button>
<button id='o_teapot'>Set object to teapot</button>
<button id='o_fox'>Set object to fox</button>
</div>
<div class='ui-block'>
<button id='t_grey'>Set texture to white</button>
<button id='t_wall'>Set texture to wall</button>
<button id='t_fox'>Set texture to fox</button>
<button id='t_ice'>Set texture to ice</button>
</div>
</div>
</div>