put sliders and average object position
This commit is contained in:
parent
33de299433
commit
7f2b135bdd
|
|
@ -192,16 +192,38 @@ async function main() {
|
|||
}
|
||||
|
||||
const data = await getObj('/static/objs/fox.obj');
|
||||
let distance: any = $('#input1').val();
|
||||
let circleSize: any = $('#input2').val();
|
||||
distance = parseFloat(distance);
|
||||
circleSize = parseFloat(circleSize);
|
||||
const params: any = {
|
||||
distance: $('#distance').val(),
|
||||
circleSize: $('#circlesize').val(),
|
||||
fov: $('#fov').val(),
|
||||
avg: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const [
|
||||
positions,
|
||||
normals,
|
||||
uvs,
|
||||
indices,
|
||||
] = convert(data);
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let z = 0;
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
if (i % 3 == 0) {
|
||||
x += positions[i];
|
||||
} else if (i % 3 == 1) {
|
||||
y += positions[i];
|
||||
} else {
|
||||
z += positions[i];
|
||||
}
|
||||
}
|
||||
params.avg.x = x / (positions.length / 3);
|
||||
params.avg.y = y / (positions.length / 3);
|
||||
params.avg.z = z / (positions.length / 3);
|
||||
let length = indices.length;
|
||||
let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
|
||||
vsSource,
|
||||
|
|
@ -250,8 +272,7 @@ async function main() {
|
|||
buffers,
|
||||
deltaTime,
|
||||
length,
|
||||
distance,
|
||||
circleSize,
|
||||
params,
|
||||
texture);
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
|
@ -268,22 +289,37 @@ async function main() {
|
|||
indices,
|
||||
] = convert(data);
|
||||
length = indices.length;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let z = 0;
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
if (i % 3 == 0) {
|
||||
x += positions[i];
|
||||
} else if (i % 3 == 1) {
|
||||
y += positions[i];
|
||||
} else {
|
||||
z += positions[i];
|
||||
}
|
||||
}
|
||||
params.avg.x = x / (positions.length / 3);
|
||||
params.avg.y = y / (positions.length / 3);
|
||||
params.avg.z = z / (positions.length / 3);
|
||||
deleteBuffers(gl, buffers);
|
||||
buffers = initBuffers(gl, positions, indices, normals, uvs);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('#input1').on('keypress', function(event: any) {
|
||||
if (event.which === 13) {
|
||||
event.preventDefault();
|
||||
$('#changedistance').click();
|
||||
}
|
||||
$('#distance').on('input', function() {
|
||||
const distance: any = $('#distance').val();
|
||||
params.distance = parseFloat(distance);
|
||||
});
|
||||
$('#input2').on('keypress', function(event: any) {
|
||||
if (event.which === 13) {
|
||||
event.preventDefault();
|
||||
$('#changecirclesize').click();
|
||||
}
|
||||
$('#circlesize').on('input', function() {
|
||||
const circleSize: any = $('#circlesize').val();
|
||||
params.circleSize = parseFloat(circleSize);
|
||||
});
|
||||
$('#fov').on('input', function() {
|
||||
const fov: any = $('#fov').val();
|
||||
params.fov = parseFloat(fov);
|
||||
});
|
||||
$('#s_blackandwhite').on('click', function() {
|
||||
[programInfo, fragmentShader] = changeFragmentShader(gl,
|
||||
|
|
@ -301,14 +337,6 @@ async function main() {
|
|||
[programInfo, fragmentShader] = changeFragmentShader(gl,
|
||||
shaderProgram, fragmentShader, fsSource4, vsSource);
|
||||
});
|
||||
$('#changedistance').on('click', function() {
|
||||
distance = $('#input1').val();
|
||||
distance = parseFloat(distance);
|
||||
});
|
||||
$('#changecirclesize').on('click', function() {
|
||||
circleSize = $('#input2').val();
|
||||
circleSize = parseFloat(circleSize);
|
||||
});
|
||||
$('#o_sphere').on('click', async function() {
|
||||
const data = await getObj('/static/objs/sphere.obj');
|
||||
updateObj(data);
|
||||
|
|
@ -344,8 +372,7 @@ async function main() {
|
|||
* @param {any} buffers the buffers to draw
|
||||
* @param {number} deltaTime the difference in time since last call
|
||||
* @param {number} length the index buffer length
|
||||
* @param {number} distance distance of camera
|
||||
* @param {number} circleSize size of circle the object is rotating around
|
||||
* @param {number} params various parameterss
|
||||
* @param {any} texture the texture to load
|
||||
*/
|
||||
function drawScene(gl: any,
|
||||
|
|
@ -353,8 +380,7 @@ function drawScene(gl: any,
|
|||
buffers: any,
|
||||
deltaTime: number,
|
||||
length: number,
|
||||
distance: number,
|
||||
circleSize: number,
|
||||
params: any,
|
||||
texture: any) {
|
||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||
gl.clearDepth(1.0);
|
||||
|
|
@ -369,7 +395,7 @@ function drawScene(gl: any,
|
|||
// ratio that matches the display size of the canvas
|
||||
// and we only want to see objects between 0.1 units
|
||||
// and 100 units away from the camera.
|
||||
const fieldOfView = 45 * Math.PI / 180;
|
||||
const fieldOfView = params.fov * Math.PI / 180;
|
||||
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
|
||||
const zNear = 0.1;
|
||||
const zFar = 1000.0;
|
||||
|
|
@ -400,19 +426,25 @@ function drawScene(gl: any,
|
|||
// the center of the scene.
|
||||
const viewMatrix = mat4.create();
|
||||
|
||||
|
||||
mat4.translate(viewMatrix,
|
||||
viewMatrix,
|
||||
[
|
||||
-params.avg.x,
|
||||
-params.avg.y,
|
||||
-params.avg.z,
|
||||
]);
|
||||
mat4.translate(
|
||||
viewMatrix,
|
||||
viewMatrix, [
|
||||
Math.cos(squareRotation) * circleSize,
|
||||
Math.sin(squareRotation) * circleSize,
|
||||
Math.cos(squareRotation) * params.circleSize,
|
||||
Math.sin(squareRotation) * params.circleSize,
|
||||
0,
|
||||
]);
|
||||
|
||||
mat4.translate(
|
||||
viewMatrix,
|
||||
viewMatrix,
|
||||
[0.0, 0.0, -distance]);
|
||||
[0.0, 0.0, -params.distance]);
|
||||
|
||||
// Tell WebGL how to pull out the positions from the position
|
||||
// buffer into the vertexPosition attribute.
|
||||
|
|
|
|||
|
|
@ -21,13 +21,16 @@
|
|||
<button id='s_texture'>Change Shader to texture</button>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<input id='input1' value='250'></input>
|
||||
<button id='changedistance'>Change camera distance</button>
|
||||
<div style='display: inline'>Max distance is 1000</div>
|
||||
<div style='display: inline;'>Change distance : </div>
|
||||
<input type="range" min="1" max="1000" value="250" class="slider" id="distance">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<input id='input2' value='30'></input>
|
||||
<button id='changecirclesize'>Change circle size</button>
|
||||
<div style='display: inline;'>Change circle size : </div>
|
||||
<input type="range" min="1" max="50" value="10" class="slider" id="circlesize">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<div style='display: inline;'>Change fov : </div>
|
||||
<input type="range" min="15" max="150" value="45" class="slider" id="fov">
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<button id='o_sphere'>Set object to sphere</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue