Changed normal of the ground to GL, Now the normal mapping is correct.
This commit is contained in:
@@ -6,10 +6,11 @@
|
||||
* Author: Kaj Dijksta
|
||||
*
|
||||
**/
|
||||
|
||||
|
||||
import programInfo from './programInfo.js';
|
||||
import {vector2, vector3} from './math.js';
|
||||
|
||||
|
||||
import programInfo from "./programInfo.js";
|
||||
|
||||
import {vector2, vector3} from "./math.js";
|
||||
|
||||
|
||||
|
||||
@@ -17,28 +18,53 @@ import {vector2, vector3} from './math.js';
|
||||
* ResourceManager object
|
||||
*/
|
||||
class resourceManager{
|
||||
|
||||
|
||||
constructor( engine ) {
|
||||
this.engine = engine;
|
||||
this.gl = engine.gl;
|
||||
|
||||
this.baseUrl = "";
|
||||
this.directory = "media/textures/";
|
||||
|
||||
|
||||
this.numberOfModels = 0;
|
||||
this.numberOfTextures = 0;
|
||||
this.textureTotal = 0;
|
||||
|
||||
this.textures = [];
|
||||
this.models = [];
|
||||
this.shaders = [];
|
||||
|
||||
this.finishCallback;
|
||||
this.loadingList = [];
|
||||
|
||||
this.fileCache = [];
|
||||
this.programCashe = [];
|
||||
|
||||
this.engine = engine;
|
||||
|
||||
this.gl = engine.gl;
|
||||
|
||||
this.baseUrl = "";
|
||||
|
||||
this.directory = "media/textures/";
|
||||
|
||||
this.numberOfModels = 0;
|
||||
|
||||
this.numberOfTextures = 0;
|
||||
|
||||
this.textureTotal = 0;
|
||||
|
||||
this.textures = new Array();
|
||||
|
||||
this.models = new Array();
|
||||
|
||||
this.shaders = new Array();
|
||||
|
||||
this.finishCallback = null;
|
||||
|
||||
this.loadingList = new Array();
|
||||
|
||||
this.fileCache = new Array();
|
||||
|
||||
this.programCashe = new Array();
|
||||
|
||||
this.preloaderElement = null;
|
||||
|
||||
this.preloaderTextElement = null;
|
||||
|
||||
this.preloaderBarElement = null;
|
||||
|
||||
this.preloaderVisible = false;
|
||||
|
||||
this.fileLoading = false;
|
||||
|
||||
this.fileLoadedBytes = 0;
|
||||
|
||||
this.fileTotalBytes = 0;
|
||||
|
||||
this.fileLabel = "";
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -320,6 +346,294 @@ import {vector2, vector3} from './math.js';
|
||||
}
|
||||
|
||||
|
||||
formatBytesToMegabytes( bytes ) {
|
||||
|
||||
if( bytes <= 0 ) {
|
||||
|
||||
return "0.00 MB";
|
||||
|
||||
}
|
||||
|
||||
var megabytes = bytes / ( 1024 * 1024 );
|
||||
|
||||
var rounded = Math.round( megabytes * 100 ) / 100;
|
||||
|
||||
var text = rounded.toFixed( 2 ) + " MB";
|
||||
|
||||
return text;
|
||||
|
||||
}
|
||||
|
||||
|
||||
createPreloaderElements( ) {
|
||||
|
||||
if( this.preloaderElement !== null ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
var canvasElement = document.getElementById( "keplerEngine" );
|
||||
|
||||
var holder = document.createElement( "div" );
|
||||
|
||||
holder.className = "kepler-preloader-holder";
|
||||
|
||||
holder.style.position = "absolute";
|
||||
|
||||
holder.style.left = "0";
|
||||
|
||||
holder.style.top = "0";
|
||||
|
||||
holder.style.right = "0";
|
||||
|
||||
holder.style.bottom = "0";
|
||||
|
||||
holder.style.display = "flex";
|
||||
|
||||
holder.style.alignItems = "center";
|
||||
|
||||
holder.style.justifyContent = "center";
|
||||
|
||||
holder.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
|
||||
|
||||
var inner = document.createElement( "div" );
|
||||
|
||||
inner.className = "kepler-preloader-inner";
|
||||
|
||||
inner.style.minWidth = "200px";
|
||||
|
||||
inner.style.maxWidth = "400px";
|
||||
|
||||
inner.style.width = "60%";
|
||||
|
||||
inner.style.backgroundColor = "#202020";
|
||||
|
||||
inner.style.padding = "16px";
|
||||
|
||||
inner.style.boxSizing = "border-box";
|
||||
|
||||
inner.style.borderRadius = "4px";
|
||||
|
||||
var textElement = document.createElement( "div" );
|
||||
|
||||
textElement.className = "kepler-preloader-text";
|
||||
|
||||
textElement.style.color = "#ffffff";
|
||||
|
||||
textElement.style.fontFamily = "sans-serif";
|
||||
|
||||
textElement.style.fontSize = "14px";
|
||||
|
||||
textElement.style.marginBottom = "8px";
|
||||
|
||||
textElement.textContent = "Loading textures...";
|
||||
|
||||
var barOuter = document.createElement( "div" );
|
||||
|
||||
barOuter.className = "kepler-preloader-bar";
|
||||
|
||||
barOuter.style.width = "100%";
|
||||
|
||||
barOuter.style.height = "6px";
|
||||
|
||||
barOuter.style.backgroundColor = "#444444";
|
||||
|
||||
barOuter.style.overflow = "hidden";
|
||||
|
||||
var barInner = document.createElement( "div" );
|
||||
|
||||
barInner.className = "kepler-preloader-bar-inner";
|
||||
|
||||
barInner.style.width = "0%";
|
||||
|
||||
barInner.style.height = "100%";
|
||||
|
||||
barInner.style.backgroundColor = "#66ccff";
|
||||
|
||||
barOuter.appendChild( barInner );
|
||||
|
||||
inner.appendChild( textElement );
|
||||
|
||||
inner.appendChild( barOuter );
|
||||
|
||||
holder.appendChild( inner );
|
||||
|
||||
this.preloaderElement = holder;
|
||||
|
||||
this.preloaderTextElement = textElement;
|
||||
|
||||
this.preloaderBarElement = barInner;
|
||||
|
||||
if( canvasElement !== null && canvasElement.parentNode !== null ) {
|
||||
|
||||
canvasElement.parentNode.style.position = "relative";
|
||||
|
||||
canvasElement.parentNode.appendChild( holder );
|
||||
|
||||
} else {
|
||||
|
||||
document.body.appendChild( holder );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
showPreloaderIfNeeded( ) {
|
||||
|
||||
if( this.preloaderVisible ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
this.createPreloaderElements( );
|
||||
|
||||
if( this.preloaderElement !== null ) {
|
||||
|
||||
this.preloaderElement.style.display = "flex";
|
||||
|
||||
}
|
||||
|
||||
this.preloaderVisible = true;
|
||||
|
||||
}
|
||||
|
||||
|
||||
updatePreloaderProgress( ) {
|
||||
|
||||
if( this.preloaderElement === null ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
if( this.textureTotal <= 0 ) {
|
||||
|
||||
if( this.fileTotalBytes <= 0 ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var loaded = this.textureTotal - this.numberOfTextures;
|
||||
|
||||
if( loaded < 0 ) {
|
||||
|
||||
loaded = 0;
|
||||
|
||||
}
|
||||
|
||||
if( loaded > this.textureTotal ) {
|
||||
|
||||
loaded = this.textureTotal;
|
||||
|
||||
}
|
||||
|
||||
var ratio = 0;
|
||||
|
||||
if( this.textureTotal > 0 ) {
|
||||
|
||||
ratio = loaded / this.textureTotal;
|
||||
|
||||
}
|
||||
|
||||
var percentage = Math.round( ratio * 100 );
|
||||
|
||||
if( this.preloaderTextElement !== null ) {
|
||||
|
||||
var text = "Loading textures " + loaded + " / " + this.textureTotal;
|
||||
|
||||
if( this.fileLoading && this.fileTotalBytes > 0 ) {
|
||||
|
||||
var label = this.fileLabel;
|
||||
|
||||
if( label === "" ) {
|
||||
|
||||
label = "model";
|
||||
|
||||
}
|
||||
|
||||
var loadedText = this.formatBytesToMegabytes( this.fileLoadedBytes );
|
||||
|
||||
var totalText = this.formatBytesToMegabytes( this.fileTotalBytes );
|
||||
|
||||
text = "Loading model " + label + " " + loadedText + " / " + totalText + " | " + text;
|
||||
|
||||
}
|
||||
|
||||
this.preloaderTextElement.textContent = text;
|
||||
|
||||
}
|
||||
|
||||
if( this.preloaderBarElement !== null ) {
|
||||
|
||||
this.preloaderBarElement.style.width = percentage + "%";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
hidePreloader( ) {
|
||||
|
||||
if( this.preloaderElement === null ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
this.preloaderElement.style.display = "none";
|
||||
|
||||
this.preloaderVisible = false;
|
||||
|
||||
}
|
||||
|
||||
|
||||
updateFilePreloaderProgress( label, loadedBytes, totalBytes, done ) {
|
||||
|
||||
if( done ) {
|
||||
|
||||
this.fileLoading = false;
|
||||
|
||||
this.fileLabel = "";
|
||||
|
||||
this.fileLoadedBytes = 0;
|
||||
|
||||
this.fileTotalBytes = 0;
|
||||
|
||||
if( this.textureTotal <= 0 ) {
|
||||
|
||||
this.hidePreloader( );
|
||||
|
||||
} else {
|
||||
|
||||
this.updatePreloaderProgress( );
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
this.fileLoading = true;
|
||||
|
||||
this.fileLabel = label;
|
||||
|
||||
this.fileLoadedBytes = loadedBytes;
|
||||
|
||||
this.fileTotalBytes = totalBytes;
|
||||
|
||||
this.showPreloaderIfNeeded( );
|
||||
|
||||
this.updatePreloaderProgress( );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add Texture
|
||||
* @param {string} address
|
||||
@@ -327,20 +641,31 @@ import {vector2, vector3} from './math.js';
|
||||
* @param {boolean} direct
|
||||
*/
|
||||
addTexture(adress, name, direct) {
|
||||
|
||||
|
||||
this.numberOfTextures++;
|
||||
|
||||
this.textureTotal++;
|
||||
|
||||
this.showPreloaderIfNeeded( );
|
||||
|
||||
this.updatePreloaderProgress( );
|
||||
|
||||
var texture = {};
|
||||
|
||||
|
||||
texture.adress = adress;
|
||||
|
||||
texture.name = name;
|
||||
|
||||
texture.loaded = false;
|
||||
|
||||
this.loadingList.push(texture);
|
||||
|
||||
if(direct)
|
||||
this.loadNextTexture(adress, name);
|
||||
|
||||
this.loadingList.push( texture );
|
||||
|
||||
if( direct ) {
|
||||
|
||||
this.loadNextTexture( adress, name );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@@ -420,6 +745,13 @@ import {vector2, vector3} from './math.js';
|
||||
image.onerror = function (a) {
|
||||
|
||||
this.engine.resources.loadNextTexture();
|
||||
|
||||
if( this.engine.resources.textureTotal > 0 ) {
|
||||
|
||||
this.engine.resources.textureTotal--;
|
||||
|
||||
}
|
||||
|
||||
this.engine.resources.CheckIfAllObjectsTexturesLoaded();
|
||||
}
|
||||
|
||||
@@ -450,28 +782,48 @@ import {vector2, vector3} from './math.js';
|
||||
*/
|
||||
getTexture( name ) {
|
||||
|
||||
if(this.hasExtension(name)) {
|
||||
|
||||
var url = name;
|
||||
|
||||
this.addTexture(this.directory + url, name);
|
||||
}
|
||||
|
||||
|
||||
for(var c = 0;c<this.loadingList.length; c++) {
|
||||
if(this.loadingList[c].name == name){
|
||||
|
||||
return this.loadingList[c];
|
||||
|
||||
var index;
|
||||
|
||||
for( index = 0; index < this.textures.length; index++ ) {
|
||||
|
||||
if( this.textures[ index ].name === name ) {
|
||||
|
||||
return this.textures[ index ];
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
for( index = 0; index < this.loadingList.length; index++ ) {
|
||||
|
||||
if( this.loadingList[ index ].name === name ) {
|
||||
|
||||
return this.loadingList[ index ];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if( this.hasExtension( name ) ) {
|
||||
|
||||
var url = name;
|
||||
|
||||
this.addTexture( this.directory + url, name );
|
||||
|
||||
}
|
||||
|
||||
for( index = 0; index < this.loadingList.length; index++ ) {
|
||||
|
||||
if( this.loadingList[ index ].name === name ) {
|
||||
|
||||
return this.loadingList[ index ];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
|
||||
};
|
||||
/**
|
||||
* Get texture by name
|
||||
@@ -499,10 +851,17 @@ import {vector2, vector3} from './math.js';
|
||||
* Check if all objects are loaded
|
||||
*/
|
||||
CheckIfAllObjectsTexturesLoaded() {
|
||||
|
||||
this.numberOfTextures--;
|
||||
|
||||
if( this.numberOfTextures == 0 ) {
|
||||
this.updatePreloaderProgress( );
|
||||
|
||||
if( this.numberOfTextures === 0 ) {
|
||||
|
||||
this.hidePreloader( );
|
||||
|
||||
this.finishCallback();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@@ -735,4 +1094,3 @@ var randomImage2 = new Uint8Array ( [149,123,253,255, 126,3,96,255, 164,246,
|
||||
52,83,220,255, 1,142,142,255, 32,57,79,255, 48,159,32,255,
|
||||
56,232,114,255, 177,216,203,255, 69,196,217,255, 240,165,81,255,
|
||||
224,56,85,255, 232,89,189,255, 143,25,202,255, 117,73,12,255] );
|
||||
|
||||
|
||||
Reference in New Issue
Block a user