added multiple instances support, changed light position
This commit is contained in:
parent
0026741e17
commit
77c8dedb0c
|
|
@ -47,8 +47,8 @@ async function main() {
|
|||
{
|
||||
gl_Position = uProjectionMatrix *
|
||||
uviewMatrix *
|
||||
unormalModelMatrix *
|
||||
umodelMatrix *
|
||||
unormalModelMatrix *
|
||||
aVertexPosition;
|
||||
vPosition = vec3(aVertexPosition);
|
||||
vNormal = unormalModelMatrix * aVertexNormal;
|
||||
|
|
@ -82,7 +82,7 @@ async function main() {
|
|||
}
|
||||
|
||||
void main() {
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
|
|
@ -120,7 +120,7 @@ async function main() {
|
|||
}
|
||||
|
||||
void main() {
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
|
|
@ -141,7 +141,7 @@ async function main() {
|
|||
uniform sampler2D uSampler;
|
||||
|
||||
void main() {
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
|
|
@ -162,7 +162,7 @@ async function main() {
|
|||
|
||||
void main() {
|
||||
highp vec4 texelColor = texture2D(uSampler, vTextureCoord);
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
|
|
@ -209,7 +209,7 @@ async function main() {
|
|||
if ((1. - sobel.r) + (1. - sobel.g) + (1. - sobel.b) < 2.5)
|
||||
gl_FragColor = vec4(1.0 - sobel.rgb, 1.0 );
|
||||
else {
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
|
|
@ -236,6 +236,7 @@ async function main() {
|
|||
const data = await getObj('/static/objs/racer.obj');
|
||||
const distance: any = $('#distance').val();
|
||||
const distanceFine: any = $('#distancefine').val();
|
||||
const instanceNumber: any = $('#instance').val();
|
||||
const params: any = {
|
||||
distance: parseFloat(distance) + parseFloat(distanceFine),
|
||||
circleSize: $('#circlesize').val(),
|
||||
|
|
@ -245,12 +246,14 @@ async function main() {
|
|||
y: 0,
|
||||
z: 0,
|
||||
},
|
||||
range: 0,
|
||||
rot: {
|
||||
x: $('#rotx').val(),
|
||||
y: $('#roty').val(),
|
||||
z: $('#rotz').val(),
|
||||
},
|
||||
rotSpeed: $('#rotspeed').val(),
|
||||
instanceNumber: parseInt(instanceNumber),
|
||||
};
|
||||
|
||||
const [
|
||||
|
|
@ -262,15 +265,37 @@ async function main() {
|
|||
let x = 0;
|
||||
let y = 0;
|
||||
let z = 0;
|
||||
let maxx = positions[0];
|
||||
let maxy = positions[1];
|
||||
let maxz = positions[2];
|
||||
let minx = positions[0];
|
||||
let miny = positions[1];
|
||||
let minz = positions[2];
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
if (i % 3 == 0) {
|
||||
if (positions[i] > maxx) {
|
||||
maxx = positions[i];
|
||||
} else if (positions[i] < minx) {
|
||||
minx = positions[i];
|
||||
}
|
||||
x += positions[i];
|
||||
} else if (i % 3 == 1) {
|
||||
if (positions[i] > maxy) {
|
||||
maxy = positions[i];
|
||||
} else if (positions[i] < miny) {
|
||||
miny = positions[i];
|
||||
}
|
||||
y += positions[i];
|
||||
} else {
|
||||
if (positions[i] > maxz) {
|
||||
maxz = positions[i];
|
||||
} else if (positions[i] < minz) {
|
||||
minz = positions[i];
|
||||
}
|
||||
z += positions[i];
|
||||
}
|
||||
}
|
||||
params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
|
||||
params.avg.x = x / (positions.length / 3);
|
||||
params.avg.y = y / (positions.length / 3);
|
||||
params.avg.z = z / (positions.length / 3);
|
||||
|
|
@ -344,15 +369,37 @@ async function main() {
|
|||
let x = 0;
|
||||
let y = 0;
|
||||
let z = 0;
|
||||
let maxx = positions[0];
|
||||
let maxy = positions[1];
|
||||
let maxz = positions[2];
|
||||
let minx = positions[0];
|
||||
let miny = positions[1];
|
||||
let minz = positions[2];
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
if (i % 3 == 0) {
|
||||
if (positions[i] > maxx) {
|
||||
maxx = positions[i];
|
||||
} else if (positions[i] < minx) {
|
||||
minx = positions[i];
|
||||
}
|
||||
x += positions[i];
|
||||
} else if (i % 3 == 1) {
|
||||
if (positions[i] > maxy) {
|
||||
maxy = positions[i];
|
||||
} else if (positions[i] < miny) {
|
||||
miny = positions[i];
|
||||
}
|
||||
y += positions[i];
|
||||
} else {
|
||||
if (positions[i] > maxz) {
|
||||
maxz = positions[i];
|
||||
} else if (positions[i] < minz) {
|
||||
minz = positions[i];
|
||||
}
|
||||
z += positions[i];
|
||||
}
|
||||
}
|
||||
params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
|
||||
params.avg.x = x / (positions.length / 3);
|
||||
params.avg.y = y / (positions.length / 3);
|
||||
params.avg.z = z / (positions.length / 3);
|
||||
|
|
@ -375,6 +422,10 @@ async function main() {
|
|||
const circleSize: any = $('#circlesize').val();
|
||||
params.circleSize = parseFloat(circleSize);
|
||||
});
|
||||
$('#instance').on('input', function() {
|
||||
const instance: any = $('#instance').val();
|
||||
params.instanceNumber = parseInt(instance);
|
||||
});
|
||||
$('#rotx').on('input', function() {
|
||||
const rotx: any = $('#rotx').val();
|
||||
params.rot.x = parseFloat(rotx);
|
||||
|
|
@ -503,30 +554,6 @@ function drawScene(gl: any,
|
|||
zFar);
|
||||
|
||||
|
||||
const normalModelMatrix = mat4.create();
|
||||
|
||||
mat4.rotateX(normalModelMatrix,
|
||||
normalModelMatrix,
|
||||
params.rot.x);
|
||||
mat4.rotateY(normalModelMatrix,
|
||||
normalModelMatrix,
|
||||
params.rot.y);
|
||||
mat4.rotateZ(normalModelMatrix,
|
||||
normalModelMatrix,
|
||||
params.rot.z);
|
||||
mat4.rotateY(normalModelMatrix,
|
||||
normalModelMatrix,
|
||||
squareRotation);
|
||||
|
||||
const modelMatrix = mat4.create();
|
||||
mat4.translate(modelMatrix,
|
||||
modelMatrix,
|
||||
[
|
||||
-params.avg.x,
|
||||
-params.avg.y,
|
||||
-params.avg.z,
|
||||
]);
|
||||
|
||||
// Set the drawing position to the "identity" point, which is
|
||||
// the center of the scene.
|
||||
const viewMatrix = mat4.create();
|
||||
|
|
@ -605,23 +632,6 @@ function drawScene(gl: any,
|
|||
|
||||
// Tell WebGL to use our program when drawing
|
||||
gl.useProgram(programInfo.program);
|
||||
// Set the shader uniforms
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.projectionMatrix,
|
||||
false,
|
||||
projectionMatrix);
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.viewMatrix,
|
||||
false,
|
||||
viewMatrix);
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.modelMatrix,
|
||||
false,
|
||||
modelMatrix);
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.normalModelMatrix,
|
||||
false,
|
||||
normalModelMatrix);
|
||||
|
||||
// Tell WebGL we want to affect texture unit 0
|
||||
gl.activeTexture(gl.TEXTURE0);
|
||||
|
|
@ -630,11 +640,70 @@ function drawScene(gl: any,
|
|||
// Tell the shader we bound the texture to texture unit 0
|
||||
gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
|
||||
|
||||
{
|
||||
const normalModelMatrix = [];
|
||||
const modelMatrix = [];
|
||||
for (let i = 0; i < params.instanceNumber; i++) {
|
||||
const normalModelMatrixTemplate = mat4.create();
|
||||
const modelMatrixTemplate = mat4.create();
|
||||
let addx = 0;
|
||||
let addy = 0;
|
||||
mat4.rotateX(normalModelMatrixTemplate,
|
||||
normalModelMatrixTemplate,
|
||||
params.rot.x);
|
||||
mat4.rotateY(normalModelMatrixTemplate,
|
||||
normalModelMatrixTemplate,
|
||||
params.rot.y);
|
||||
mat4.rotateZ(normalModelMatrixTemplate,
|
||||
normalModelMatrixTemplate,
|
||||
params.rot.z);
|
||||
mat4.rotateY(normalModelMatrixTemplate,
|
||||
normalModelMatrixTemplate,
|
||||
squareRotation);
|
||||
if (i % 3 == 1) {
|
||||
addx = Math.floor(i / 9 + 1) * params.range * 1.5;
|
||||
} else if (i % 3 == 2) {
|
||||
addx = -Math.floor(i / 9 + 1) * params.range * 1.5;
|
||||
}
|
||||
if (i % 9 > 5) {
|
||||
addy = Math.floor(i / 9 + 1) * params.range * 1.5;
|
||||
} else if (i % 9 > 2 && i % 9 < 6) {
|
||||
addy = -Math.floor(i / 9 + 1) * params.range * 1.5;
|
||||
}
|
||||
mat4.translate(modelMatrixTemplate,
|
||||
modelMatrixTemplate,
|
||||
[
|
||||
-params.avg.x + addx,
|
||||
-params.avg.y + addy,
|
||||
-params.avg.z,
|
||||
]);
|
||||
normalModelMatrix.push(normalModelMatrixTemplate);
|
||||
modelMatrix.push(modelMatrixTemplate);
|
||||
}
|
||||
|
||||
for (let i = 0; i < params.instanceNumber; i++) {
|
||||
// Set the shader uniforms
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.projectionMatrix,
|
||||
false,
|
||||
projectionMatrix);
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.viewMatrix,
|
||||
false,
|
||||
viewMatrix);
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.modelMatrix,
|
||||
false,
|
||||
modelMatrix[i]);
|
||||
gl.uniformMatrix4fv(
|
||||
programInfo.uniformLocations.normalModelMatrix,
|
||||
false,
|
||||
normalModelMatrix[i]);
|
||||
|
||||
const vertexCount = length;
|
||||
const type = gl.UNSIGNED_SHORT;
|
||||
const offset = 0;
|
||||
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
|
||||
// gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
|
||||
}
|
||||
|
||||
squareRotation += deltaTime * params.rotSpeed;
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change distance : </div>
|
||||
<div style='display: inline;'>Fine: </div>
|
||||
<input type="range" min="1" max="50" value="1" class="slider" id="distancefine">
|
||||
<input type="range" min="1" max="50" value="25" class="slider" id="distancefine">
|
||||
<div style='display: inline;'>Coarse: </div>
|
||||
<input type="range" min="1" max="1000" value="30" class="slider" id="distance">
|
||||
<input type="range" min="1" max="1000" value="40" class="slider" id="distance">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change circle size : </div>
|
||||
|
|
@ -40,6 +40,10 @@
|
|||
<div style='display: inline;'>Change base rotation speed : </div>
|
||||
<input type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change instances number : </div>
|
||||
<input type="range" min="1" max="180" value="9" step='1' class="slider" id="instance">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change rotation : </div>
|
||||
<div style='display: inline;'>X: </div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue