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

fixed normal matrix and added scale and translation support

This commit is contained in:
gbrochar 2020-11-28 13:20:01 +01:00
parent 123d28efe0
commit 1e97bf3596
6 changed files with 83 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/draw.ts
View File

@ -34,7 +34,7 @@ export function drawScene(gl: any,
projectionMatrix,
viewMatrix,
modelMatrix,
normalModelMatrix,
normalMatrix,
] = initMatrices(gl, params);
for (let i = 0; i < params.instanceNumber; i++) {
@ -51,9 +51,9 @@ export function drawScene(gl: any,
false,
modelMatrix[i]);
gl.uniformMatrix4fv(
programInfo.uniformLocations.normalModelMatrix,
programInfo.uniformLocations.normalMatrix,
false,
normalModelMatrix[i]);
normalMatrix[i]);
const vertexCount = params.len;
const type = gl.UNSIGNED_SHORT;
const offset = 0;

14
src/client/init.ts
View File

@ -18,6 +18,16 @@ export function initParams(context: any) {
y: parseFloat(<string>$('#roty').val()),
z: parseFloat(<string>$('#rotz').val()),
},
pos: {
x: parseFloat(<string>$('#posx').val()),
y: parseFloat(<string>$('#posy').val()),
z: parseFloat(<string>$('#posz').val()),
},
scale: {
x: parseFloat(<string>$('#scalex').val()),
y: parseFloat(<string>$('#scaley').val()),
z: parseFloat(<string>$('#scalez').val()),
},
rotSpeed: parseFloat(<string>$('#rotspeed').val()),
instanceNumber: parseFloat(<string>$('#instance').val()),
squareRotation: 0,
@ -81,8 +91,8 @@ export function setProgramInfo(context: any) {
context.shaderProgram, 'uviewMatrix'),
modelMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'umodelMatrix'),
normalModelMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'unormalModelMatrix'),
normalMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'unormalMatrix'),
uSampler: context.gl.getUniformLocation(
context.shaderProgram, 'uSampler'),
time: context.gl.getUniformLocation(

49
src/client/matrix.ts
View File

@ -38,25 +38,13 @@ export function initMatrices(gl: any, params: any) {
viewMatrix,
viewMatrix,
[0.0, 0.0, -params.distance]);
const normalModelMatrix = [];
const normalMatrix = [];
const modelMatrix = [];
for (let i = 0; i < params.instanceNumber; i++) {
const normalModelMatrixTemplate = mat4.create();
const normalMatrixTemplate = mat4.create();
const modelMatrixTemplate = mat4.create();
let addx = 0;
let addy = 0;
mat4.rotateY(normalModelMatrixTemplate,
normalModelMatrixTemplate,
params.rot.y);
mat4.rotateZ(normalModelMatrixTemplate,
normalModelMatrixTemplate,
params.rot.z);
mat4.rotateX(normalModelMatrixTemplate,
normalModelMatrixTemplate,
params.rot.x);
mat4.rotateY(normalModelMatrixTemplate,
normalModelMatrixTemplate,
params.squareRotation);
if (i % 3 == 1) {
addx = Math.floor(i / 9 + 1) * params.range * 1.5;
} else if (i % 3 == 2) {
@ -70,12 +58,35 @@ export function initMatrices(gl: any, params: any) {
mat4.translate(modelMatrixTemplate,
modelMatrixTemplate,
[
params.circleSize * Math.cos(params.squareRotation) + addx,
params.circleSize * Math.sin(params.squareRotation) + addy,
0,
params.circleSize * Math.cos(params.squareRotation) + addx +
params.pos.x,
params.circleSize * Math.sin(params.squareRotation) + addy +
params.pos.y,
params.pos.z,
]);
normalModelMatrix.push(normalModelMatrixTemplate);
mat4.rotateY(modelMatrixTemplate,
modelMatrixTemplate,
params.rot.y);
mat4.rotateZ(modelMatrixTemplate,
modelMatrixTemplate,
params.rot.z);
mat4.rotateX(modelMatrixTemplate,
modelMatrixTemplate,
params.rot.x);
mat4.rotateY(modelMatrixTemplate,
modelMatrixTemplate,
params.squareRotation);
mat4.scale(modelMatrixTemplate,
modelMatrixTemplate,
[
params.scale.x,
params.scale.y,
params.scale.z,
]);
mat4.invert(normalMatrixTemplate, modelMatrixTemplate);
mat4.transpose(normalMatrixTemplate, normalMatrixTemplate);
normalMatrix.push(normalMatrixTemplate);
modelMatrix.push(modelMatrixTemplate);
}
return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix];
return [projectionMatrix, viewMatrix, modelMatrix, normalMatrix];
}

5
src/client/shaders/shader.vert
View File

@ -5,7 +5,7 @@ attribute vec2 aTextureCoord;
uniform mat4 uProjectionMatrix;
uniform mat4 uviewMatrix;
uniform mat4 umodelMatrix;
uniform mat4 unormalModelMatrix;
uniform mat4 unormalMatrix;
varying highp vec4 vNormal;
varying highp vec3 vPosition;
@ -16,9 +16,8 @@ void main()
gl_Position = uProjectionMatrix *
uviewMatrix *
umodelMatrix *
unormalModelMatrix *
aVertexPosition;
vPosition = vec3(aVertexPosition);
vNormal = unormalModelMatrix * aVertexNormal;
vNormal = unormalMatrix * aVertexNormal;
vTextureCoord = aTextureCoord;
}

18
src/client/uijquery.ts
View File

@ -39,6 +39,24 @@ export function uiUpdateParams(params: any) {
$('#rotz').on('input', () => {
params.rot.z = parseFloat(<string>$('#rotz').val());
});
$('#posx').on('change', () => {
params.pos.x = parseFloat(<string>$('#posx').val());
});
$('#posy').on('change', () => {
params.pos.y = parseFloat(<string>$('#posy').val());
});
$('#posz').on('change', () => {
params.pos.z = parseFloat(<string>$('#posz').val());
});
$('#scalex').on('change', () => {
params.scale.x = parseFloat(<string>$('#scalex').val());
});
$('#scaley').on('change', () => {
params.scale.y = parseFloat(<string>$('#scaley').val());
});
$('#scalez').on('change', () => {
params.scale.z = parseFloat(<string>$('#scalez').val());
});
$('#rotspeed').on('input', () => {
params.rotSpeed = parseFloat(<string>$('#rotspeed').val());
});

18
views/index.ejs
View File

@ -59,6 +59,24 @@
<div style='display: inline;'>Z: </div>
<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz">
</div>
<div class='ui-block'>
<div style='display: inline;'>Change scale: </div>
<div style='display: inline;'>X: </div>
<input type="number" value="1" id="scalex">
<div style='display: inline;'>Y: </div>
<input type="number" value="1" id="scaley">
<div style='display: inline;'>Z: </div>
<input type="number" value="1" id="scalez">
</div>
<div class='ui-block'>
<div style='display: inline;'>Translate: </div>
<div style='display: inline;'>X: </div>
<input type="number" value="0" id="posx">
<div style='display: inline;'>Y: </div>
<input type="number" value="0" id="posy">
<div style='display: inline;'>Z: </div>
<input type="number" value="0" id="posz">
</div>
<div class='ui-block'>
<div style='display: inline;'>Change object: </div>
<button id='o_sphere'>Sphere</button>