image sizes, cube textures

beta.r3js.org
Theunis J. Botha 2017-06-12 15:35:13 +02:00
parent 7b70d8201e
commit 8c2ae310fb
9 changed files with 372 additions and 128 deletions

View File

@ -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

View File

@ -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
);
};

View File

@ -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;

View File

@ -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;

View File

@ -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)
);
}
}
}
);

View File

@ -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;
});

View File

@ -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;
}

View File

@ -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(),

View File

@ -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);
}
}
}