a given model then inherits from this (yeah I know … inheritance vs composition blahblah… ^^ )<\/p>\n

var Car = function(){\r\n\r\n     var assets = [\r\n     { model: 'src\/3d\/models\/car_body.js',         texture: 'src\/3d\/textures\/car_body.jpg'     },\r\n     { model: 'src\/3d\/models\/car_wheels_back.js',  texture: 'src\/3d\/textures\/wheels.jpg'   },\r\n     [...]\r\n     ];\r\n\r\n     function Model( parent, cb ){ models.generic.call( this, this, Model, assets, parent, cb ); }\r\n     var _p = Model.prototype = Object.create( models.generic.prototype );\r\n     _p.constructor = Model;\r\n\r\n     [...] specific methods for this mesh\r\n     _p.init = function(){\r\n    \r\n        Object.defineProperties( this,{\r\n            body: { get:function () { return this.children[0] || models.dummy; }},\r\n            wheels:     {get: function() { return this.children[2] || models.dummy; } }\r\n        });\r\n        this.body.material.uniforms.scaleUv.value.x = 0.5;\r\n    };\r\n    return Model;\r\n }();<\/pre>\n
then if you call a new Car( scene1 ) and new Car( scene2 ), both will appear in their respective scenes when the first has finished loading. of course\u00a0if a\u00a0Model is already loaded, it\u00a0is instantiated directly using the same\u00a0assets.<\/p>\n
the textures class is basically static\u00a0Dictionary that can load textures and\u00a0materials exposes the raw materials that each object will copy.<\/p>\n
I used\u00a03 custom materials: a regular “bitmap”, a “blend” and a “transition” material.<\/p>\n
the bitmap<\/em> material displays a texture, as we have objects that can have 2 versions of their textures, I added a deltaUv and scaleUv uniforms that let me shift and squash the uvs. \u00a0for example\u00a0the following texture is used on the bag in the last bedroom.<\/p>\n
<\/p>\n
it can be used with scaleUv = .5 a deltaUv.y = 0 to display the top half\u00a0and deltaUv.y = .5 to display the bottom half, using a deltaUv.x of .5 will switch to the “night”(right side) version of both textures.<\/p>\n
the material\u00a0has brightness saturation contrast + alpha uniforms, brightness is used to animate the popups on the desktop for instance.<\/p>\n
<\/p>\n
at some point I added a “binoculars” effect hence some extra uniforms\u00a0and a slightly heavier shader.\u00a0that’s the vertex shader (nothing fancy…) it’s the same for all 3 materials.<\/p>\n
uniform vec2 deltaUv;\r\nuniform vec2 scaleUv;\r\nvarying vec2 vUv;\r\nvoid main()\r\n{\r\n    vUv = ( uv * scaleUv ) + deltaUv;\r\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );\r\n}<\/pre>\n
and the fragment<\/p>\n
uniform sampler2D texture;\r\nuniform float brightness;\r\nuniform float saturation;\r\nuniform float contrast;\r\nuniform float alpha;\r\nuniform vec2 resolution;\r\nuniform float radius;\r\nuniform vec3 color;\r\n\r\nvec3 bsc( vec3 color, float brt, float sat, float con)\r\n{\r\n    vec3 brtColor       = color * brt;\r\n    float intensity    = dot( brtColor, vec3(0.2125,0.7154,0.0721) );\r\n    vec3 satColor       = mix( vec3( intensity ), brtColor, sat );\r\n    return mix( vec3( .5 ), satColor, con);\r\n}\r\n\r\nvarying vec2 vUv;\r\nvoid main(){\r\n\r\n    \/\/samples the texture\r\n    vec4 tex = texture2D( texture, vUv );\r\n\r\n    \/\/applies brightness\/saturation\/contrast\r\n    vec3 rgb = bsc( tex.rgb, brightness, saturation, contrast );\r\n\r\n    \/\/the 'binoculars'\r\n    \/\/get a normalized screen position in the range [-1,1]\r\n    vec2 p =  2. * ( gl_FragCoord.xy \/ resolution ) - 1.;\r\n    \/\/with the same aspect ratio as the screen\r\n    p.x *= resolution.x \/ resolution.y;\r\n\r\n    \/\/left eye \/ right eye\r\n    vec2 le = vec2( -.4, 0. );\r\n    vec2 re = vec2(  .4, 0. );\r\n\r\n    \/\/we'll compute a distance to the eyes' locations and a radius\r\n    \/\/beyond which we'll use a flat color d is the union of the 2 eyes\r\n    float d = max(  ( 1.-( distance( p, le ) * radius )  ) ,  ( 1.-( distance( p, re ) * radius )  ) );\r\n\r\n    \/\/if d < .5 -> transparent\r\n    \/\/if d > .5 -> opaque color\r\n    \/\/ .55 - .5 = 0.05 : that's the opaque to transparent gradient's length\r\n    rgb = mix( color, rgb, smoothstep( 0.5, 0.55, d ) );\r\n\r\n    gl_FragColor = vec4( rgb, smoothstep( 0.5, 1., tex.a ) * alpha );\r\n\r\n}<\/pre>\n
here’s a live example of the binoculars effect (press play to start):
\n