Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scene refactor #37

Merged
merged 9 commits into from
Jul 17, 2017
5 changes: 4 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@

<script src="libs/dat.gui.min.js"></script>
<script src="libs/gl-matrix-min.js"></script>
<script src="jquery-3.1.1.js"></script>
<script src="libs/jquery-3.1.1.js"></script>
<script src="mesh.js"></script>
<script src="scene.js"></script>
<script src="main.js"></script>
</head>
Expand Down Expand Up @@ -42,5 +43,7 @@
<span id="pixelPickerColor"></span>
<span id="pixelPickerText"></span>
</div>

<div id="loadSpinner"></div>
</body>
</html>
File renamed without changes.
40 changes: 27 additions & 13 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,16 @@ function loadCubeMap(gl, envMap, type, state) {

var path = "textures/" + envMap + "/" + type + "/" + type;

function onLoadEnvironmentImage(texture, face, image, j) {
return function() {
gl.activeTexture(activeTextureEnum);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// todo: should this be srgb? or rgba? what's the HDR scale on this?
gl.texImage2D(face, j, state.sRGBifAvailable, state.sRGBifAvailable, gl.UNSIGNED_BYTE, image);
};
}

for (var j = 0; j < mipLevels; j++) {
var faces = [[path + "_right_" + j + ".jpg", gl.TEXTURE_CUBE_MAP_POSITIVE_X],
[path + "_left_" + j + ".jpg", gl.TEXTURE_CUBE_MAP_NEGATIVE_X],
Expand All @@ -52,15 +62,7 @@ function loadCubeMap(gl, envMap, type, state) {
for (var i = 0; i < faces.length; i++) {
var face = faces[i][1];
var image = new Image();
image.onload = function(texture, face, image, j) {
return function() {
gl.activeTexture(activeTextureEnum);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// todo: should this be srgb? or rgba? what's the HDR scale on this?
gl.texImage2D(face, j, state.sRGBifAvailable, state.sRGBifAvailable, gl.UNSIGNED_BYTE, image);
}
}(texture, face, image, j);
image.onload = onLoadEnvironmentImage(texture, face, image, j);
image.src = faces[i][0];
}
}
Expand All @@ -74,6 +76,10 @@ function updateModel(value, gl, glState, viewMatrix, projectionMatrix, backBuffe
var error = document.getElementById('error');
glState.scene = null;
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var canvas2d = document.getElementById('canvas2d');
frontBuffer.clearRect(0, 0, canvas2d.width, canvas2d.height);
document.getElementById('loadSpinner').style.display = 'block';
resetCamera();

$.ajax({
url: 'models/' + value + '/glTF/' + value + '.gltf',
Expand Down Expand Up @@ -401,12 +407,20 @@ function init(vertSource, fragSource) {
}

// ***** Mouse Controls ***** //
var mouseDown = false;
var roll = Math.PI;
var pitch = 0.0;
var translate = 4.0;
var mouseDown;
var roll;
var pitch;
var translate;
var lastMouseX = null;
var lastMouseY = null;

function resetCamera() {
roll = Math.PI;
pitch = 0.0;
translate = 4.0;
mouseDown = false;
}

function handleMouseDown(ev) {
mouseDown = true;
lastMouseX = ev.clientX;
Expand Down
Loading