diff --git a/src/game-lib-a-1-event.js b/src/game-lib-a-1-event.js index 584a0a9..f2e213e 100644 --- a/src/game-lib-a-1-event.js +++ b/src/game-lib-a-1-event.js @@ -21,6 +21,8 @@ GameLib.Event.IMAGE_LOADED = 0x5; GameLib.Event.TEXTURE_LOADED = 0x6; GameLib.Event.LOAD_IMAGE = 0x7; GameLib.Event.MATERIAL_LOADED = 0x8; +GameLib.Event.IMAGE_CHANGE = 0x9; +GameLib.Event.TEXTURE_TYPE_CHANGE = 0xa; /** * Subscribe to some events diff --git a/src/game-lib-d3-api-image.js b/src/game-lib-d3-api-image.js index d3aa40c..1a2b0d6 100644 --- a/src/game-lib-d3-api-image.js +++ b/src/game-lib-d3-api-image.js @@ -4,6 +4,7 @@ * @param name * @param path * @param contentType + * @param size * @param parentEntity GameLib.Entity * @constructor */ @@ -12,6 +13,7 @@ GameLib.D3.API.Image = function( name, path, contentType, + size, parentEntity ) { @@ -55,6 +57,11 @@ GameLib.D3.API.Image = function( } } this.contentType = contentType; + + if (GameLib.Utils.UndefinedOrNull(size)) { + size = 0; + } + this.size = size; }; GameLib.D3.API.Image.prototype = Object.create(GameLib.Component.prototype); @@ -71,6 +78,7 @@ GameLib.D3.API.Image.FromObject = function(objectImage) { objectImage.name, objectImage.path, objectImage.contentType, + objectImage.size, objectImage.parentEntity ); }; diff --git a/src/game-lib-d3-api-light.js b/src/game-lib-d3-api-light.js index 837ea06..31f71d2 100644 --- a/src/game-lib-d3-api-light.js +++ b/src/game-lib-d3-api-light.js @@ -59,7 +59,7 @@ GameLib.D3.API.Light = function( this.lightType = lightType; if (GameLib.Utils.UndefinedOrNull(name)) { - name = 'Light (' + lightType + ')'; + name = 'Light (' + id + ')'; } this.name = name; diff --git a/src/game-lib-d3-api-texture.js b/src/game-lib-d3-api-texture.js index d451efb..d3e099a 100644 --- a/src/game-lib-d3-api-texture.js +++ b/src/game-lib-d3-api-texture.js @@ -69,7 +69,7 @@ GameLib.D3.API.Texture = function( this.id = id; if (GameLib.Utils.UndefinedOrNull(typeId)) { - typeId = GameLib.D3.Texture.TEXTURE_TYPE_DIFFUSE; + typeId = GameLib.D3.Texture.TEXTURE_TYPE_NORMAL; } this.typeId = typeId; diff --git a/src/game-lib-d3-image.js b/src/game-lib-d3-image.js index 03be687..6c99701 100644 --- a/src/game-lib-d3-image.js +++ b/src/game-lib-d3-image.js @@ -49,6 +49,12 @@ GameLib.D3.Image.prototype.createInstance = function(update) { this.instance.contentType = this.contentType; } else { + // this.subscribe( + // GameLib.Event.TEXTURE_TYPE_CHANGE, + // function(data) { + // } + // ); + this.subscribe( GameLib.Event.LOAD_IMAGE, function(data) { @@ -56,31 +62,79 @@ GameLib.D3.Image.prototype.createInstance = function(update) { data.id === this.id || data.path === this.path ) { - var loader = new THREE.ImageLoader(); + var loader = null; - loader.crossOrigin = true; + if (data.textureType === GameLib.D3.Texture.TEXTURE_TYPE_NORMAL) { - loader.path = data.baseUrl; + console.log('loading normal image'); - loader.load( - this.path + '?ts=' + Date.now(), - function ( image ) { - this.instance = image; - this.publish( - GameLib.Event.IMAGE_LOADED, - { - imagePath : this.path, - imageInstance : this.instance - } - ); - }.bind(this), - function ( xhr ) { - console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); - }, - function () { - console.log('An image load error happened'); - } - ); + loader = new THREE.XHRLoader(); + + loader.crossOrigin = true; + + loader.path = data.baseUrl; + + loader.responseType = 'blob'; + + loader.load( + this.path + '?ts=' + Date.now(), + function (blob) { + + var image = document.createElement('img'); + image.onload = function ( e ) { URL.revokeObjectURL( image.src ); }; + image.src = URL.createObjectURL( blob ); + + this.instance = image; + this.publish( + GameLib.Event.IMAGE_LOADED, + { + imagePath: this.path, + imageInstance: this.instance + } + ); + }.bind(this), + function(xhr) { + console.log( (xhr.loaded / xhr.total * 100) + '% loaded of ' + this.name); + this.size = xhr.total; + }.bind(this), + function() { + console.log('An image load error happened'); + } + ); + + } else { + + console.log('loading cube map'); + + loader = new THREE.CubeTextureLoader(); + + loader.crossOrigin = true; + + loader.path = data.baseUrl; + + loader.load( + [ + this.path + '?ts=' + Date.now(), + this.path + '?ts=' + Date.now(), + this.path + '?ts=' + Date.now(), + this.path + '?ts=' + Date.now(), + this.path + '?ts=' + Date.now(), + this.path + '?ts=' + Date.now() + ], + function (texture) { + + this.instance = texture.image; + this.publish( + GameLib.Event.IMAGE_LOADED, + { + imagePath: this.path, + imageInstance: this.instance, + cubeTexture : texture + } + ); + }.bind(this) + ); + } } } ); diff --git a/src/game-lib-d3-input-editor.js b/src/game-lib-d3-input-editor.js index 3b86074..1f71c97 100644 --- a/src/game-lib-d3-input-editor.js +++ b/src/game-lib-d3-input-editor.js @@ -193,34 +193,19 @@ GameLib.D3.Input.Editor.prototype.onMouseDown = function(entity, entityManager) var scenes = entity.getComponents(GameLib.D3.Scene); - var meshes = entity.getComponents(GameLib.D3.Mesh); - - var intersects = cameras.reduce( - - function(result, camera){ - - var scene = scenes.reduce( - function(result, scene) { - - if (scene.activeCamera === camera) { - result = scene; - } - - return result; - }, - null - ); - - if (scene) { - meshes = scene.meshes; - } + var intersects = scenes.reduce( + function(result, scene) { + if (!scene.activeCamera) { + console.warn('scene ' + scene.name + ' (' + scene.id + ') has no active cameras associated with it'); + return result; + } this.raycaster.instance.setFromCamera( this.mouse, - camera.instance + scene.activeCamera.instance ); - intersects = this.raycaster.getIntersectedObjects(meshes); + intersects = this.raycaster.getIntersectedObjects(scene.meshes); intersects.map(function(intersect){ result.push(intersect); @@ -245,7 +230,7 @@ GameLib.D3.Input.Editor.prototype.onMouseDown = function(entity, entityManager) } ); - meshes = intersects.map(function(intersect){ + var meshes = intersects.map(function(intersect){ return intersect.mesh; }); diff --git a/src/game-lib-d3-material.js b/src/game-lib-d3-material.js index a1ab21b..469cb7b 100644 --- a/src/game-lib-d3-material.js +++ b/src/game-lib-d3-material.js @@ -562,7 +562,7 @@ GameLib.D3.Material.prototype.updateStandardMaterialInstance = function() { this.instance.visible = this.visible; this.instance.side = this.side; this.instance.color = this.color.instance; - // this.instance.specular = this.specular.instance; //standard material doesnt have specular color + this.instance.envMapIntensity = this.envMapIntensity; //standard material doesnt have specular color this.instance.roughness = this.roughness; this.instance.metalness = this.metalness; this.instance.lightMapIntensity = this.lightMapIntensity; @@ -639,7 +639,8 @@ GameLib.D3.Material.prototype.updatePhongMaterialInstance = function() { this.instance.aoMapIntensity = this.aoMapIntensity; this.instance.emissive = this.emissive.instance; this.instance.emissiveIntensity = this.emissiveIntensity; - this.instance.bumpScale = this.bumpScale; + this.instance.envMapIntensity = this.envMapIntensity; + this.instance.bumpScale = this.bumpScale; this.instance.normalScale = this.normalScale; this.instance.displacementScale = this.displacementScale; this.instance.combine = this.combine; @@ -753,52 +754,117 @@ GameLib.D3.Material.prototype.createInstance = function(update) { var modified = false; + /** + * We also need to check if the image of the texture is assigned - + * if not we should disable the map + */ if (this.alphaMap === data.texture) { - this.instance.alphaMap = data.texture.instance; + + if (data.texture.image) { + this.instance.alphaMap = data.texture.instance; + } else { + this.instance.alphaMap = null; + } + modified = true; } if (this.aoMap === data.texture) { - this.instance.aoMap = data.texture.instance; + + if (data.texture.image) { + this.instance.aoMap = data.texture.instance; + } else { + this.instance.aoMap = null; + } modified = true; } if (this.bumpMap === data.texture) { - this.instance.bumpMap = data.texture.instance; + + if (data.texture.image) { + this.instance.bumpMap = data.texture.instance; + } else { + this.instance.bumpMap = null; + } modified = true; } if (this.diffuseMap === data.texture) { - this.instance.map = data.texture.instance; + + if (data.texture.image) { + this.instance.map = data.texture.instance; + } else { + this.instance.map = null; + } modified = true; } if (this.displacementMap === data.texture) { - this.instance.displacementMap = data.texture.instance; + + if (data.texture.image) { + this.instance.displacementMap = data.texture.instance; + } else { + this.instance.displacementMap = null; + } modified = true; } if (this.emissiveMap === data.texture) { - this.instance.emissiveMap = data.texture.instance; + + if (data.texture.image) { + this.instance.emissiveMap = data.texture.instance; + } else { + this.instance.emissiveMap = null; + } modified = true; } if (this.environmentMap === data.texture) { - this.instance.envMap = data.texture.instance; + + if (data.texture.image) { + this.instance.envMap = data.texture.instance; + } else { + this.instance.envMap = null; + } modified = true; } if (this.lightMap === data.texture) { - this.instance.lightMap = data.texture.instance; + + if (data.texture.image) { + this.instance.lightMap = data.texture.instance; + } else { + this.instance.lightMap = null; + } modified = true; } if (this.metalnessMap === data.texture) { - this.instance.metalnessMap = data.texture.instance; + + if (data.texture.image) { + this.instance.metalnessMap = data.texture.instance; + } else { + this.instance.metalnessMap = null; + } modified = true; } if (this.normalMap === data.texture) { - this.instance.normalMap = data.texture.instance; + + if (data.texture.image) { + this.instance.normalMap = data.texture.instance; + } else { + this.instance.normalMap = null; + } modified = true; } if (this.roughnessMap === data.texture) { - this.instance.roughnessMap = data.texture.instance; + + if (data.texture.image) { + this.instance.roughnessMap = data.texture.instance; + } else { + this.instance.roughnessMap = null; + } modified = true; } if (this.specularMap === data.texture) { - this.instance.specularMap = data.texture.instance; + + if (data.texture.image) { + this.instance.specularMap = data.texture.instance; + } else { + this.instance.specularMap = null; + } modified = true; } diff --git a/src/game-lib-d3-texture.js b/src/game-lib-d3-texture.js index 2e6485c..7152576 100644 --- a/src/game-lib-d3-texture.js +++ b/src/game-lib-d3-texture.js @@ -140,18 +140,22 @@ GameLib.D3.Texture.TYPE_RGBM7_ENCODING = 3004; GameLib.D3.Texture.TYPE_RGBM16_ENCODING = 3005; GameLib.D3.Texture.TYPE_RGBD_ENCODING = 3006; // MAXRANGE IS 256. -GameLib.D3.Texture.TEXTURE_TYPE_ALPHA = 'alpha'; -GameLib.D3.Texture.TEXTURE_TYPE_AO = 'ao'; -GameLib.D3.Texture.TEXTURE_TYPE_BUMP = 'bump'; -GameLib.D3.Texture.TEXTURE_TYPE_DIFFUSE = 'diffuse'; -GameLib.D3.Texture.TEXTURE_TYPE_DISPLACEMENT = 'displacement'; -GameLib.D3.Texture.TEXTURE_TYPE_EMISSIVE = 'emissive'; -GameLib.D3.Texture.TEXTURE_TYPE_ENVIRONMENT = 'environment'; -GameLib.D3.Texture.TEXTURE_TYPE_LIGHT = 'light'; -GameLib.D3.Texture.TEXTURE_TYPE_METALNESS = 'metalness'; -GameLib.D3.Texture.TEXTURE_TYPE_NORMAL = 'normal'; -GameLib.D3.Texture.TEXTURE_TYPE_ROUGHNESS = 'roughness'; -GameLib.D3.Texture.TEXTURE_TYPE_SPECULAR = 'specular'; +GameLib.D3.Texture.TEXTURE_TYPE_NORMAL = 0x1; +GameLib.D3.Texture.TEXTURE_TYPE_CUBE = 0x2; + + +// GameLib.D3.Texture.TEXTURE_TYPE_ALPHA = 'alpha'; +// GameLib.D3.Texture.TEXTURE_TYPE_AO = 'ao'; +// GameLib.D3.Texture.TEXTURE_TYPE_BUMP = 'bump'; +// GameLib.D3.Texture.TEXTURE_TYPE_DIFFUSE = 'diffuse'; +// GameLib.D3.Texture.TEXTURE_TYPE_DISPLACEMENT = 'displacement'; +// GameLib.D3.Texture.TEXTURE_TYPE_EMISSIVE = 'emissive'; +// GameLib.D3.Texture.TEXTURE_TYPE_ENVIRONMENT = 'environment'; +// GameLib.D3.Texture.TEXTURE_TYPE_LIGHT = 'light'; +// GameLib.D3.Texture.TEXTURE_TYPE_METALNESS = 'metalness'; +// GameLib.D3.Texture.TEXTURE_TYPE_NORMAL = 'normal'; +// GameLib.D3.Texture.TEXTURE_TYPE_ROUGHNESS = 'roughness'; +// GameLib.D3.Texture.TEXTURE_TYPE_SPECULAR = 'specular'; /** * Creates an instance of our texture object @@ -173,6 +177,17 @@ GameLib.D3.Texture.prototype.createInstance = function(update) { this.instance.offset.y = this.offset.y; this.instance.repeat.x = this.repeat.x; this.instance.repeat.y = this.repeat.y; + this.instance.mapping = this.mapping; + this.instance.format = this.format; + + this.publish( + GameLib.Event.TEXTURE_LOADED, + { + texture : this + } + ); + + this.instance.needsUpdate = true; } else { @@ -190,6 +205,15 @@ GameLib.D3.Texture.prototype.createInstance = function(update) { instance.offset.y = this.offset.y; instance.repeat.x = this.repeat.x; instance.repeat.y = this.repeat.y; + instance.mapping = this.mapping; + instance.format = this.format; + + this.publish( + GameLib.Event.TEXTURE_LOADED, + { + texture : this + } + ); return instance; } @@ -199,30 +223,46 @@ GameLib.D3.Texture.prototype.createInstance = function(update) { GameLib.Event.IMAGE_LOADED, function (data) { - if (!(this.image instanceof GameLib.D3.Image)) { - console.warn('The image associated with this texture has not been setup properly - did you link the objects?') - return; - } - - // if (this.instance) { - // /** - // * The texture has already been loaded - // */ - // return; - // } - + /** + * Only work with images that belong to this texture + */ if (data.imagePath === this.image.path) { - var instance = new THREE.Texture( - data.imageInstance - ); - instance.name = this.name; - instance.flipY = this.flipY; - instance.encoding = this.encoding; - instance.offset.x = this.offset.x; - instance.offset.y = this.offset.y; - instance.repeat.x = this.repeat.x; - instance.repeat.y = this.repeat.y; - this.instance = instance; + + if (!(this.image instanceof GameLib.D3.Image)) { + if (!data.cubeTexture) { + console.warn('The image associated with this texture has not been setup properly - objects linked?'); + return; + } + } + + if (data.cubeTexture) { + + this.instance = data.cubeTexture; + this.instance.name = this.name; + this.mapping = this.instance.mapping; + this.offset.x = this.instance.offset.x; + this.offset.y = this.instance.offset.y; + this.flipY = this.instance.flipY; + this.encoding = this.instance.encoding; + this.repeat.x = this.instance.offset.x; + this.repeat.y = this.instance.offset.y; + this.format = this.instance.format; + + } else { + + var instance = new THREE.Texture( + data.imageInstance + ); + instance.name = this.name; + instance.flipY = this.flipY; + instance.encoding = this.encoding; + instance.offset.x = this.offset.x; + instance.offset.y = this.offset.y; + instance.repeat.x = this.repeat.x; + instance.repeat.y = this.repeat.y; + this.format = instance.format; + this.instance = instance; + } this.publish( GameLib.Event.TEXTURE_LOADED, @@ -231,11 +271,44 @@ GameLib.D3.Texture.prototype.createInstance = function(update) { } ); - this.instance.needsUpdate = true; + this.instance.needsUpdate = true; } } ); + this.subscribe( + GameLib.Event.IMAGE_CHANGE, + function (data) { + + var instance = null; + + if (this.image === null) { + instance = new THREE.Texture(); + } else { + instance = new THREE.Texture(this.image.instance); + instance.needsUpdate = true; + instance.name = this.name; + instance.flipY = this.flipY; + instance.encoding = this.encoding; + instance.offset.x = this.offset.x; + instance.offset.y = this.offset.y; + instance.repeat.x = this.repeat.x; + instance.repeat.y = this.repeat.y; + this.format = instance.format; + } + + this.instance = instance; + + this.publish( + GameLib.Event.TEXTURE_LOADED, + { + texture : this + } + ); + + } + ); + return null; } }; @@ -253,11 +326,16 @@ GameLib.D3.Texture.prototype.updateInstance = function() { */ GameLib.D3.Texture.prototype.toApiObject = function() { + var apiImage = null; + if (this.image) { + apiImage = this.image.id + } + return new GameLib.D3.API.Texture( this.id, this.typeId, this.name, - this.image.id, + apiImage, this.wrapS, this.wrapT, this.repeat.toApiObject(), diff --git a/src/game-lib-gui.js b/src/game-lib-gui.js index aee5a46..6dc29f4 100644 --- a/src/game-lib-gui.js +++ b/src/game-lib-gui.js @@ -199,7 +199,7 @@ GameLib.GUI.prototype.isVector2 = function(member) { // return (member instanceof GameLib.Quaternion) // }; -GameLib.GUI.prototype.buildControl = function(folder, object, property) { +GameLib.GUI.prototype.buildControl = function(folder, object, property, entityManager) { var handles = []; @@ -485,7 +485,18 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { } ).name(property).listen() ); - } else if (object instanceof GameLib.D3.Texture && property === 'textureType') { + } else if (object instanceof GameLib.D3.Texture && property === 'typeId') { + handles.push( + folder.add( + object, + property, + { + 'normal': GameLib.D3.Texture.TEXTURE_TYPE_NORMAL, + 'cube': GameLib.D3.Texture.TEXTURE_TYPE_CUBE + } + ).name(property).listen() + ); + } else if (object instanceof GameLib.D3.Texture && property === 'textureType') { handles.push( folder.add( object, @@ -545,7 +556,8 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { handles.push(folder.add(object, property, 0, 1.0).step(0.001).name(property).listen()); } else if ( property === 'shininess' || - property === 'fov' + property === 'fov'|| + property === 'envMapIntensity' ) { handles.push(folder.add(object, property, -255, 255).step(1).name(property).listen()); } else if ( @@ -562,8 +574,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { } else if ( property === 'near' || property === 'distanceGrain' || - property === 'bumpScale' || - property === 'envMapIntensity' + property === 'bumpScale' ) { handles.push(folder.add(object, property, 0, 100).step(0.001).name(property).listen()); } else if ( @@ -672,30 +683,54 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { // ) // ); // - // if (property === 'name') { - // handle.onFinishChange( - // this.buildObjectSelection.bind(this) - // ); - // } + // // }); handles.map( - function(handle) { - handle.onChange( - function (value) { - if (object[property] instanceof GameLib.Color) { - object[property].fromHex(value); - object[property].updateInstance(); - } else if (typeof this.initialValue === 'number') { - object[property] = Number(value); - } else { - object[property] = value; - } - object.updateInstance(); - // object.needsUpdate = true; - } - ); - } + function(gui) { + return function(handle) { + if (property === 'name') { + handle.onFinishChange( + function(){gui.build(entityManager)} + ); + } else { + handle.onChange( + function (value) { + if (object[property] instanceof GameLib.Color) { + object[property].fromHex(value); + object[property].updateInstance(); + } else if (typeof this.initialValue === 'number') { + object[property] = Number(value); + } else { + object[property] = value; + } + + if (object instanceof GameLib.D3.Texture && property === 'typeId') { + + var imageFactory = entityManager.queryComponents(GameLib.D3.ImageFactory)[0]; + + if (object.image) { + object.publish( + GameLib.Event.LOAD_IMAGE, + { + id : object.image.id, + textureType : object[property], + baseUrl : imageFactory.baseUrl + } + ) + } else { + console.log('changing texture type but no image specified') + } + + } + + object.updateInstance(); + // object.needsUpdate = true; + } + ); + } + } + }(this) ); }; @@ -793,18 +828,34 @@ GameLib.GUI.prototype.buildSelectControl = function(folder, object, property, en } ); - gui.build(entityManager); + } else if (property === 'image') { + + GameLib.Event.Emit( + GameLib.Event.IMAGE_CHANGE, + { + originalImage: this.initialValue, + newImage: object[property], + object: object, + entityManager: entityManager + } + ); + } else { /** * Old way of doing things */ - parentObject.buildIdToObject(); object.updateInstance(); } + /** + * Properties changed - rebuild the object list in the parent + */ + parentObject.buildIdToObject(); + /** * Properties changed - rebuild GUI */ + gui.build(entityManager); }; @@ -1001,7 +1052,7 @@ GameLib.GUI.prototype.build = function(entityManager) { console.log('ignored: ' + property); } } else { - this.buildControl(folder, object, property); + this.buildControl(folder, object, property, entityManager); } } }