added flat mode, one object, and clear some code
This commit is contained in:
parent
89cb1d7962
commit
4fb99acd00
File diff suppressed because it is too large
Load Diff
|
|
@ -76,20 +76,16 @@ async function main() {
|
|||
}
|
||||
|
||||
void main() {
|
||||
vec3 n = normalize(vec3(-500., 1000., 500.) - vPosition);
|
||||
float diffuse = max(dot(vNormal.xyz, n), 0.);
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
reflect(n, vNormal.xyz),
|
||||
reflect(n, normalize(vNormal.xyz)),
|
||||
normalize(vec3(0., 0., -50.) - vPosition)),
|
||||
0.), 10.);
|
||||
vec3 tmp = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.);
|
||||
float texture = (tmp.x + tmp.y + tmp.z) / 6.;
|
||||
if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) {
|
||||
gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0);
|
||||
} else {
|
||||
gl_FragColor = vec4((texture * vec3(1.)), 1.0);
|
||||
}
|
||||
}`;
|
||||
|
||||
const fsSource2 = `
|
||||
|
|
@ -116,19 +112,50 @@ async function main() {
|
|||
}
|
||||
|
||||
void main() {
|
||||
vec3 n = normalize(vec3(-500., 1000., 500.) - vPosition);
|
||||
float diffuse = max(dot(vNormal.xyz, n), 0.);
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
reflect(n, vNormal.xyz),
|
||||
reflect(n, normalize(vNormal.xyz)),
|
||||
normalize(vec3(0., 0., -50.) - vPosition)),
|
||||
0.), 10.);
|
||||
vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2);
|
||||
if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) {
|
||||
gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0);
|
||||
} else {
|
||||
gl_FragColor = vec4((texture * vec3(1.)), 1.0);
|
||||
}`;
|
||||
|
||||
const fsSource3 = `
|
||||
precision highp float;
|
||||
|
||||
varying highp vec4 vColor;
|
||||
varying highp vec4 vNormal;
|
||||
varying highp vec3 vPosition;
|
||||
|
||||
vec3 extremize(vec3 v, float n) {
|
||||
if (v.x > n / 2.)
|
||||
v.x = n;
|
||||
else
|
||||
v.x = 0.;
|
||||
if (v.y > n / 2.)
|
||||
v.y = n;
|
||||
else
|
||||
v.y = 0.;
|
||||
if (v.z > n / 2.)
|
||||
v.z = n;
|
||||
else
|
||||
v.z = 0.;
|
||||
return v;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
|
||||
float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
|
||||
float specular = pow(
|
||||
max(dot(
|
||||
reflect(n, normalize(vNormal.xyz)),
|
||||
normalize(vec3(0., 0., -50.) - vPosition)),
|
||||
0.), 10.);
|
||||
vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2);
|
||||
gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0);
|
||||
}`;
|
||||
|
||||
/* eslint-enable */
|
||||
|
|
@ -146,7 +173,9 @@ async function main() {
|
|||
|
||||
const data = await getObj('/static/objs/teapot.obj');
|
||||
let distance: any = $('#input1').val();
|
||||
let circleSize: any = $('#input2').val();
|
||||
distance = parseFloat(distance);
|
||||
circleSize = parseFloat(circleSize);
|
||||
const [
|
||||
positions,
|
||||
normals,
|
||||
|
|
@ -157,7 +186,7 @@ async function main() {
|
|||
console.log(uvs);
|
||||
let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
|
||||
vsSource,
|
||||
fsSource);
|
||||
fsSource3);
|
||||
|
||||
let programInfo: any = {
|
||||
program: shaderProgram,
|
||||
|
|
@ -199,10 +228,28 @@ async function main() {
|
|||
buffers,
|
||||
deltaTime,
|
||||
length,
|
||||
distance);
|
||||
distance,
|
||||
circleSize);
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pushes a new obj file to the gl buffer
|
||||
* @param {string} data the obj file to push
|
||||
*/
|
||||
function updateObj(data: string) {
|
||||
const [
|
||||
positions,
|
||||
normals,
|
||||
uvs,
|
||||
indices,
|
||||
] = convert(data);
|
||||
console.log(uvs);
|
||||
length = indices.length;
|
||||
deleteBuffers(gl, buffers);
|
||||
buffers = initBuffers(gl, positions, indices, normals);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('#input1').on('keypress', function(event: any) {
|
||||
if (event.which === 13) {
|
||||
|
|
@ -210,6 +257,12 @@ async function main() {
|
|||
$('#button3').click();
|
||||
}
|
||||
});
|
||||
$('#input2').on('keypress', function(event: any) {
|
||||
if (event.which === 13) {
|
||||
event.preventDefault();
|
||||
$('#button4').click();
|
||||
}
|
||||
});
|
||||
$('#button1').on('click', function() {
|
||||
[programInfo, fragmentShader] = changeFragmentShader(gl,
|
||||
shaderProgram, fragmentShader, fsSource, vsSource);
|
||||
|
|
@ -218,41 +271,34 @@ async function main() {
|
|||
[programInfo, fragmentShader] = changeFragmentShader(gl,
|
||||
shaderProgram, fragmentShader, fsSource2, vsSource);
|
||||
});
|
||||
$('#button3').on('click', function() {
|
||||
[programInfo, fragmentShader] = changeFragmentShader(gl,
|
||||
shaderProgram, fragmentShader, fsSource3, vsSource);
|
||||
});
|
||||
$('#button3').on('click', function() {
|
||||
distance = $('#input1').val();
|
||||
distance = parseFloat(distance);
|
||||
});
|
||||
$('#button4').on('click', function() {
|
||||
circleSize = $('#input2').val();
|
||||
circleSize = parseFloat(circleSize);
|
||||
});
|
||||
$('#sphere').on('click', async function() {
|
||||
const data = await getObj('/static/objs/sphere.obj');
|
||||
const [
|
||||
positions,
|
||||
normals,
|
||||
uvs,
|
||||
indices,
|
||||
] = convert(data);
|
||||
console.log(uvs);
|
||||
length = indices.length;
|
||||
deleteBuffers(gl, buffers);
|
||||
buffers = initBuffers(gl, positions, indices, normals);
|
||||
updateObj(data);
|
||||
});
|
||||
$('#teapot').on('click', async function() {
|
||||
const data = await getObj('/static/objs/teapot.obj');
|
||||
const [
|
||||
positions,
|
||||
normals,
|
||||
uvs,
|
||||
indices,
|
||||
] = convert(data);
|
||||
console.log(uvs);
|
||||
length = indices.length;
|
||||
deleteBuffers(gl, buffers);
|
||||
buffers = initBuffers(gl, positions, indices, normals);
|
||||
updateObj(data);
|
||||
});
|
||||
$('#fox').on('click', async function() {
|
||||
const data = await getObj('/static/objs/fox.obj');
|
||||
updateObj(data);
|
||||
});
|
||||
});
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Draw a webgl scene
|
||||
* @param {any} gl the WebGL context
|
||||
|
|
@ -261,13 +307,15 @@ async function main() {
|
|||
* @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
|
||||
*/
|
||||
function drawScene(gl: any,
|
||||
programInfo: any,
|
||||
buffers: any,
|
||||
deltaTime: number,
|
||||
length: number,
|
||||
distance: number) {
|
||||
distance: number,
|
||||
circleSize: number) {
|
||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||
gl.clearDepth(1.0);
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
|
|
@ -284,7 +332,7 @@ function drawScene(gl: any,
|
|||
const fieldOfView = 45 * Math.PI / 180;
|
||||
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
|
||||
const zNear = 0.1;
|
||||
const zFar = 150.0;
|
||||
const zFar = 1000.0;
|
||||
const projectionMatrix = mat4.create();
|
||||
|
||||
// note: glmatrix.js always has the first argument
|
||||
|
|
@ -315,8 +363,11 @@ function drawScene(gl: any,
|
|||
|
||||
mat4.translate(
|
||||
viewMatrix,
|
||||
viewMatrix,
|
||||
[Math.cos(squareRotation) * 5, Math.sin(squareRotation) * 5, 0]);
|
||||
viewMatrix, [
|
||||
Math.cos(squareRotation) * circleSize,
|
||||
Math.sin(squareRotation) * circleSize,
|
||||
0,
|
||||
]);
|
||||
|
||||
mat4.translate(
|
||||
viewMatrix,
|
||||
|
|
|
|||
|
|
@ -11,12 +11,10 @@ export default function convert (objText) {
|
|||
const indices = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
if (line != '')
|
||||
if (lines[i] != '')
|
||||
{
|
||||
const rawchunks = line.split(" ").map(x => x.trim());
|
||||
const rawchunks = lines[i].split(" ").map(x => x.trim());
|
||||
const chunks = [];
|
||||
|
||||
for (let i = 0; i < rawchunks.length; i++) {
|
||||
if (rawchunks[i] != '') {
|
||||
chunks.push(rawchunks[i]);
|
||||
|
|
@ -51,7 +49,6 @@ export default function convert (objText) {
|
|||
const c2 = (smoothing ? "s" : "") + chunks[2];
|
||||
const c3 = (smoothing ? "s" : "") + chunks[3];
|
||||
|
||||
|
||||
let index1 = vertices.indexOf(c1);
|
||||
if (index1 === -1) {
|
||||
index1 = vertices.length;
|
||||
|
|
@ -74,32 +71,9 @@ export default function convert (objText) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
const avgNormals = [];
|
||||
for (let i = 0; i < vertices.length; i++) {
|
||||
if (vertices[i].startsWith("s")) {
|
||||
const d = vertices[i].substr(1).split("/");
|
||||
const normal = normals[d[2] - 1];
|
||||
const index = d[0] - 1;
|
||||
|
||||
if (avgNormals[index]) {
|
||||
avgNormals[index][0] += normal[0];
|
||||
avgNormals[index][1] += normal[1];
|
||||
avgNormals[index][2] += normal[2];
|
||||
} else {
|
||||
avgNormals[index] = normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let n of avgNormals) {
|
||||
const len = Math.hypot(...n);
|
||||
avgNormals[avgNormals.indexOf(n)] = n.map(x => x / len);
|
||||
}
|
||||
|
||||
const outPositions = [];
|
||||
const outNormals = [];
|
||||
const outUVs = [];
|
||||
|
|
|
|||
|
|
@ -17,15 +17,21 @@
|
|||
<div class='ui-block'>
|
||||
<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>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<input id='input1' value='50'></input>
|
||||
<button id='button3'>Change camera distance</button>
|
||||
<div style='display: inline'>Max distance is 150</div>
|
||||
<div style='display: inline'>Max distance is 1000</div>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<input id='input2' value='5'></input>
|
||||
<button id='button4'>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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue