void InitializeContent(IDefault page = null)
{
#region make sure we atleast have our invisible DOM
if (page == null)
{
page = new HTML.Pages.Default();
}
#endregion
#region container
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.backgroundColor = "#000000";
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#endregion
#region code port
double SCREEN_WIDTH = Native.window.Width;
double SCREEN_HEIGHT = Native.window.Height;
var animDelta = 0;
var animDeltaDir = -1;
var lightVal = 0;
var lightDir = 1;
var soundVal = 0;
var oldSoundVal = 0;
var soundDir = 1;
#region animate it
animDeltaDir *= -1;
#endregion
var clock = new THREE.Clock();
var morphs = new List <THREE.MorphAnimMesh>();
var updateNoise = true;
var mlib = new Dictionary <string, THREE.ShaderMaterial>();
var soundtrack = new Five_Armies {
loop = true, volume = 0.9
};
#region HasFocus
var HasFocus = false;
Native.window.onblur +=
delegate
{
HasFocus = false;
soundtrack.volume = 0.1;
};
Native.window.onfocus +=
delegate
{
HasFocus = true;
soundtrack.volume = 0.9;
};
// Native.Document.onmousemove +=
//delegate
//{
// if (HasFocus)
// return;
// soundtrack.play();
//};
// Native.Document.onmouseout +=
// delegate
// {
// if (HasFocus)
// return;
// soundtrack.pause();
// };
#endregion
var THREE_RepeatWrapping = 0;
var THREE_FaceColors = 1;
var THREE_LinearFilter = 6;
var THREE_RGBFormat = 17;
var THREE_LinearMipMapLinearFilter = 8;
#region SCENE (RENDER TARGET)
var sceneRenderTarget = new THREE.Scene();
var cameraOrtho = new THREE.OrthographicCamera(
(int)SCREEN_WIDTH / -2,
(int)SCREEN_WIDTH / 2,
(int)SCREEN_HEIGHT / 2,
(int)SCREEN_HEIGHT / -2,
-10000,
10000
);
cameraOrtho.position.z = 100;
sceneRenderTarget.add(cameraOrtho);
#endregion
#region SCENE (FINAL)
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x050505, 2000, 4000);
scene.fog.color.setHSV(0.102, 0.9, 0.825);
var camera = new THREE.PerspectiveCamera(40, (int)Native.window.aspect, 2, 4000);
camera.position.set(-1200, 800, 1200);
scene.add(camera);
var controls = new THREE.TrackballControls(camera);
controls.target.set(0, 0, 0);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.15;
controls.keys = new[] { 65, 83, 68 };
#endregion
#region LIGHTS
scene.add(new THREE.AmbientLight(0x111111));
var spotLight = new THREE.SpotLight(0xffffff, 1.15);
spotLight.position.set(500, 2000, 0);
spotLight.castShadow = true;
scene.add(spotLight);
var pointLight = new THREE.PointLight(0xff4400, 1.5);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);
#endregion
#region HEIGHT + NORMAL MAPS
var normalShader = __THREE.ShaderExtras.normalmap;
var rx = 256;
var ry = 256;
var pars = new THREE.WebGLRenderTargetArguments
{
minFilter = THREE_LinearMipMapLinearFilter,
magFilter = THREE_LinearFilter,
format = THREE_RGBFormat
};
var heightMap = new THREE.WebGLRenderTarget(rx, ry, pars);
var normalMap = new THREE.WebGLRenderTarget(rx, ry, pars);
var uniformsNoise = new MyUniformsNoise
{
time = new THREE.ShaderExtrasModuleItem_uniforms_item {
type = "f", value = 1.0
},
scale = new THREE.ShaderExtrasModuleItem_uniforms_item {
type = "v2", value = new THREE.Vector2(1.5, 1.5)
},
offset = new THREE.ShaderExtrasModuleItem_uniforms_item {
type = "v2", value = new THREE.Vector2(0, 0)
}
};
var uniformsNormal = __THREE.UniformsUtils.clone(normalShader.uniforms);
uniformsNormal.height.value = 0.05;
((THREE.Vector2)uniformsNormal.resolution.value).set(rx, ry);
uniformsNormal.heightMap.texture = heightMap;
var vertexShader = new Shaders.NoiseVertexShader().ToString();
#endregion
#region before TEXTURES
var textureCounter = 0;
#region RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.setClearColor(scene.fog.color, 1);
renderer.domElement.style.position = IStyle.PositionEnum.absolute;
renderer.domElement.style.top = "0px";
renderer.domElement.style.left = "0px";
container.appendChild(renderer.domElement);
// //
renderer.gammaInput = true;
renderer.gammaOutput = true;
#endregion
#region applyShader
Action <THREE.ShaderExtrasModuleItem, object, object> applyShader = (shader, texture, target) =>
{
var shaderMaterial = new THREE.ShaderMaterial(
new THREE.ShaderMaterialArguments
{
fragmentShader = shader.fragmentShader,
vertexShader = shader.vertexShader,
uniforms = __THREE.UniformsUtils.clone(shader.uniforms)
}
);
shaderMaterial.uniforms.tDiffuse.texture = texture;
var sceneTmp = new THREE.Scene();
var meshTmp = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), shaderMaterial);
meshTmp.position.z = -500;
sceneTmp.add(meshTmp);
renderer.render(sceneTmp, cameraOrtho, target, true);
};
#endregion
var terrain = default(THREE.Mesh);
#region loadTextures
Action loadTextures = () =>
{
textureCounter += 1;
if (textureCounter == 3)
{
terrain.visible = true;
//document.getElementById("loading").style.display = "none";
}
};
////
#endregion
#endregion
#region TEXTURES
var specularMap = new THREE.WebGLRenderTarget(2048, 2048, pars);
var diffuseTexture1 = default(THREE.WebGLRenderTarget);
diffuseTexture1 = __THREE.ImageUtils.loadTexture(
new global::WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.grasslight_big().src,
null,
IFunction.Of(
delegate()
{
loadTextures();
applyShader(__THREE.ShaderExtras.luminosity, diffuseTexture1, specularMap);
}
)
);
var diffuseTexture2 = __THREE.ImageUtils.loadTexture(
new global::WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.backgrounddetailed6().src,
null,
IFunction.Of(
delegate()
{
loadTextures();
}
)
);
var detailTexture = __THREE.ImageUtils.loadTexture(
new global::WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.grasslight_big_nm().src,
null,
IFunction.Of(
delegate()
{
loadTextures();
}
)
);
diffuseTexture1.wrapS = THREE_RepeatWrapping;
diffuseTexture1.wrapT = THREE_RepeatWrapping;
diffuseTexture2.wrapS = THREE_RepeatWrapping;
diffuseTexture2.wrapT = THREE_RepeatWrapping;
detailTexture.wrapS = THREE_RepeatWrapping;
detailTexture.wrapT = THREE_RepeatWrapping;
specularMap.wrapS = THREE_RepeatWrapping;
specularMap.wrapT = THREE_RepeatWrapping;
#endregion
#region TERRAIN SHADER
var terrainShader = __THREE.ShaderTerrain.terrain;
var uniformsTerrain = __THREE.UniformsUtils.clone(terrainShader.uniforms);
uniformsTerrain.tNormal.texture = normalMap;
uniformsTerrain.uNormalScale.value = 3.5;
uniformsTerrain.tDisplacement.texture = heightMap;
uniformsTerrain.tDiffuse1.texture = diffuseTexture1;
uniformsTerrain.tDiffuse2.texture = diffuseTexture2;
uniformsTerrain.tSpecular.texture = specularMap;
uniformsTerrain.tDetail.texture = detailTexture;
uniformsTerrain.enableDiffuse1.value = true;
uniformsTerrain.enableDiffuse2.value = true;
uniformsTerrain.enableSpecular.value = true;
((THREE.Color)uniformsTerrain.uDiffuseColor.value).setHex(0xffffff);
((THREE.Color)uniformsTerrain.uSpecularColor.value).setHex(0xffffff);
((THREE.Color)uniformsTerrain.uAmbientColor.value).setHex(0x111111);
uniformsTerrain.uShininess.value = 30;
uniformsTerrain.uDisplacementScale.value = 375;
((THREE.Vector2)uniformsTerrain.uRepeatOverlay.value).set(6, 6);
var _params = new[] {
new { id = "heightmap", fragmentShader = new Shaders.NoiseFragmentShader().ToString(), vertexShader = vertexShader, uniforms = (object)uniformsNoise, lights = false },
new { id = "normal", fragmentShader = normalShader.fragmentShader, vertexShader = normalShader.vertexShader, uniforms = (object)uniformsNormal, lights = false },
new { id = "terrain", fragmentShader = terrainShader.fragmentShader, vertexShader = terrainShader.vertexShader, uniforms = (object)uniformsTerrain, lights = true }
};
for (var i = 0; i < _params.Length; i++)
{
var material = new THREE.ShaderMaterial(
new THREE.ShaderMaterialArguments
{
uniforms = (THREE.ShaderExtrasModuleItem_uniforms)_params[i].uniforms,
vertexShader = _params[i].vertexShader,
fragmentShader = _params[i].fragmentShader,
lights = _params[i].lights,
fog = true
}
);
mlib[(string)_params[i].id] = material;
}
var plane = new THREE.PlaneGeometry(Native.window.Width, Native.window.Height);
var quadTarget = new THREE.Mesh(
plane,
new THREE.MeshBasicMaterial(
new THREE.MeshBasicMaterialArguments {
color = 0xff0000
}
)
);
quadTarget.position.z = -500;
sceneRenderTarget.addObject(quadTarget);
#endregion
#region TERRAIN MESH
var geometryTerrain = new THREE.PlaneGeometry(6000, 6000, 256, 256);
geometryTerrain.computeFaceNormals();
geometryTerrain.computeVertexNormals();
geometryTerrain.computeTangents();
terrain = new THREE.Mesh(geometryTerrain, mlib["terrain"]);
terrain.rotation.set(-Math.PI / 2.0, 0, 0);
terrain.position.set(0, -125, 0);
terrain.visible = false;
scene.add(terrain);
#endregion
#region COMPOSER
renderer.autoClear = false;
var renderTargetParameters = new THREE.WebGLRenderTargetArguments
{
minFilter = THREE_LinearFilter,
magFilter = THREE_LinearFilter,
format = THREE_RGBFormat,
stencilBufer = false
};
var renderTarget = new THREE.WebGLRenderTarget((int)SCREEN_WIDTH, (int)SCREEN_HEIGHT, renderTargetParameters);
var effectBloom = new THREE.BloomPass(0.6);
var effectBleach = new THREE.ShaderPass(__THREE.ShaderExtras.bleachbypass);
var hblur = new THREE.ShaderPass(__THREE.ShaderExtras.horizontalTiltShift);
var vblur = new THREE.ShaderPass(__THREE.ShaderExtras.verticalTiltShift);
var bluriness = 6;
hblur.uniforms.h.value = bluriness / SCREEN_WIDTH;
vblur.uniforms.v.value = bluriness / SCREEN_HEIGHT;
hblur.uniforms.r.value = 0.5;
vblur.uniforms.r.value = 0.5;
effectBleach.uniforms.opacity.value = 0.65;
var composer0 = new THREE.EffectComposer(renderer, renderTarget);
var renderModel = new THREE.RenderPass(scene, camera);
vblur.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer, renderTarget);
composer.addPass(renderModel);
composer.addPass(effectBloom);
//composer.addPass( effectBleach );
composer.addPass(hblur);
composer.addPass(vblur);
#endregion
var r = new Random();
Func <f> Math_random = () => (f)r.NextDouble();
#region addMorph
Action <MyModelGeometry, f, f, f, f, f> addMorph = (geometry, speed, duration, x, y, z) =>
{
var material = new THREE.MeshLambertMaterial(
new THREE.MeshLambertMaterialArguments
{
color = 0xffaa55,
morphTargets = true,
vertexColors = THREE_FaceColors
}
);
var meshAnim = new THREE.MorphAnimMesh(geometry, material);
meshAnim.speed = speed;
meshAnim.duration = duration;
meshAnim.time = 600.0 * Math_random();
meshAnim.position.set(x, y, z);
meshAnim.rotation.y = (f)(Math.PI / 2f);
meshAnim.castShadow = true;
meshAnim.receiveShadow = false;
scene.add(meshAnim);
morphs.Add(meshAnim);
renderer.initWebGLObjects(scene);
};
#endregion
#region morphColorsToFaceColors
Action <MyModelGeometry> morphColorsToFaceColors = (geometry) =>
{
if (geometry.morphColors != null)
{
if (geometry.morphColors.Length > 0)
{
var colorMap = geometry.morphColors[0];
for (var i = 0; i < colorMap.colors.Length; i++)
{
geometry.faces[i].color = colorMap.colors[i];
}
}
}
};
#endregion
#region Models
var loader = new THREE.JSONLoader();
var startX = -3000;
loader.load(
new Models.parrot().Content.src,
IFunction.OfDelegate(
new Action <MyModelGeometry>(
geometry =>
{
morphColorsToFaceColors(geometry);
addMorph(geometry, 250, 500, startX - 500, 500, 700);
addMorph(geometry, 250, 500, startX - Math_random() * 500, 500, -200);
addMorph(geometry, 250, 500, startX - Math_random() * 500, 500, 200);
addMorph(geometry, 250, 500, startX - Math_random() * 500, 500, 1000);
}
)
)
);
loader.load(
new Models.flamingo().Content.src,
IFunction.OfDelegate(
new Action <MyModelGeometry>(
geometry =>
{
morphColorsToFaceColors(geometry);
addMorph(geometry, 500, 1000, startX - Math_random() * 500, 350, 40);
}
)
)
);
loader.load(
new Models.stork().Content.src,
IFunction.OfDelegate(
new Action <MyModelGeometry>(
geometry =>
{
morphColorsToFaceColors(geometry);
addMorph(geometry, 350, 1000, startX - Math_random() * 500, 350, 340);
}
)
)
);
#endregion
#region PRE-INIT
renderer.initWebGLObjects(scene);
#endregion
#region onkeydown
Native.document.body.onkeydown +=
(e) =>
{
if (e.KeyCode == 78)
{
lightDir *= -1;
}
if (e.KeyCode == 77)
{
animDeltaDir *= -1;
}
if (e.KeyCode == 66)
{
soundDir *= -1;
}
};
#endregion
Action __loaded = null;
#region event Action loaded;
Native.window.parent.With(
parent =>
{
__loaded = delegate
{
__loaded = null;
parent.postMessage("WebGLDynamicTerrainTemplate.loaded");
};
}
);
#endregion
#region render
Action render = () =>
{
var delta = clock.getDelta();
soundVal = __THREE.Math.clamp(soundVal + delta * soundDir, 0, 1);
if (soundVal != oldSoundVal)
{
if (soundtrack != null)
{
soundtrack.volume = soundVal;
oldSoundVal = soundVal;
}
}
//Native.Document.title = "textureCounter " + textureCounter;
if (terrain.visible)
{
controls.update();
var Date_now = new IDate().getTime();
var time = Date_now * 0.001;
var fLow = 0.4;
var fHigh = 0.825;
lightVal = __THREE.Math.clamp(lightVal + 0.5 * delta * lightDir, fLow, fHigh);
var valNorm = (lightVal - fLow) / (fHigh - fLow);
var sat = __THREE.Math.mapLinear(valNorm, 0, 1, 0.95, 0.25);
scene.fog.color.setHSV(0.1, sat, lightVal);
renderer.setClearColor(scene.fog.color, 1);
spotLight.intensity = __THREE.Math.mapLinear(valNorm, 0, 1, 0.1, 1.15);
pointLight.intensity = __THREE.Math.mapLinear(valNorm, 0, 1, 0.9, 1.5);
uniformsTerrain.uNormalScale.value = __THREE.Math.mapLinear(valNorm, 0, 1, 0.6, 3.5);
if (updateNoise)
{
animDelta = __THREE.Math.clamp(animDelta + 0.00075 * animDeltaDir, 0, 0.05);
uniformsNoise.time.value = ((f)uniformsNoise.time.value) + delta * animDelta;
var uniformsNoise_offset_value = (THREE.Vector3)uniformsNoise.offset.value;
uniformsNoise_offset_value.x += delta * 0.05f;
var uniformsTerrain_uOffset_value = (THREE.Vector3)uniformsTerrain.uOffset.value;
uniformsTerrain_uOffset_value.x = 4.0f * uniformsNoise_offset_value.x;
quadTarget.material = mlib["heightmap"];
renderer.render(sceneRenderTarget, cameraOrtho, heightMap, true);
quadTarget.material = mlib["normal"];
renderer.render(sceneRenderTarget, cameraOrtho, normalMap, true);
//updateNoise = false;
}
for (var i = 0; i < morphs.Count; i++)
{
var morph = morphs[i];
morph.updateAnimation(1000 * delta);
morph.position.x += morph.speed * delta;
if (morph.position.x > 2000)
{
morph.position.x = -1500 - Math_random() * 500;
}
}
//renderer.render( scene, camera );
composer.render(0.1);
if (__loaded != null)
{
__loaded();
}
}
else
{
}
};
#endregion
Native.window.onframe +=
delegate
{
if (IsDisposed)
{
return;
}
render();
};
#endregion
#region IsDisposed
Dispose = delegate
{
if (IsDisposed)
{
return;
}
IsDisposed = true;
//page.song.pause();
soundtrack.pause();
container.Orphanize();
};
#endregion
#region AtResize
Action AtResize = delegate
{
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
renderer.setSize(Native.window.Width, Native.window.Height);
camera.aspect = Native.window.Width / Native.window.Height;
camera.updateProjectionMatrix();
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
Native.document.body.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
Native.document.body.requestFullscreen();
}
};
#region requestFullscreen
Native.document.body.ondblclick +=
delegate
{
if (IsDisposed)
{
return;
}
// http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
Native.document.body.requestFullscreen();
//AtResize();
};
#endregion
}
void InitializeContent(IDefault page = null)
{
#region make sure we atleast have our invisible DOM
if (page == null)
page = new HTML.Pages.Default();
#endregion
#region container
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.backgroundColor = "#000000";
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#endregion
#region code port
double SCREEN_WIDTH = Native.window.Width ;
double SCREEN_HEIGHT = Native.window.Height;
var animDelta = 0;
var animDeltaDir = -1;
var lightVal = 0;
var lightDir = 1;
var soundVal = 0;
var oldSoundVal = 0;
var soundDir = 1;
#region animate it
animDeltaDir *= -1;
#endregion
var clock = new THREE.Clock();
var morphs = new List<THREE.MorphAnimMesh>();
var updateNoise = true;
var mlib = new Dictionary<string, THREE.ShaderMaterial>();
var soundtrack = new Five_Armies { loop = true, volume = 0.9 };
#region HasFocus
var HasFocus = false;
Native.window.onblur +=
delegate
{
HasFocus = false;
soundtrack.volume = 0.1;
};
Native.window.onfocus +=
delegate
{
HasFocus = true;
soundtrack.volume = 0.9;
};
// Native.Document.onmousemove +=
//delegate
//{
// if (HasFocus)
// return;
// soundtrack.play();
//};
// Native.Document.onmouseout +=
// delegate
// {
// if (HasFocus)
// return;
// soundtrack.pause();
// };
#endregion
var THREE_RepeatWrapping = 0;
var THREE_FaceColors = 1;
var THREE_LinearFilter = 6;
var THREE_RGBFormat = 17;
var THREE_LinearMipMapLinearFilter = 8;
#region SCENE (RENDER TARGET)
var sceneRenderTarget = new THREE.Scene();
var cameraOrtho = new THREE.OrthographicCamera(
(int)SCREEN_WIDTH / -2,
(int)SCREEN_WIDTH / 2,
(int)SCREEN_HEIGHT / 2,
(int)SCREEN_HEIGHT / -2,
-10000,
10000
);
cameraOrtho.position.z = 100;
sceneRenderTarget.add(cameraOrtho);
#endregion
#region SCENE (FINAL)
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x050505, 2000, 4000);
scene.fog.color.setHSV(0.102, 0.9, 0.825);
var camera = new THREE.PerspectiveCamera(40, (int)Native.window.aspect, 2, 4000);
camera.position.set(-1200, 800, 1200);
scene.add(camera);
var controls = new THREE.TrackballControls(camera);
controls.target.set(0, 0, 0);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.15;
controls.keys = new[] { 65, 83, 68 };
#endregion
#region LIGHTS
scene.add(new THREE.AmbientLight(0x111111));
var spotLight = new THREE.SpotLight(0xffffff, 1.15);
spotLight.position.set(500, 2000, 0);
spotLight.castShadow = true;
scene.add(spotLight);
var pointLight = new THREE.PointLight(0xff4400, 1.5);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);
#endregion
#region HEIGHT + NORMAL MAPS
var normalShader = __THREE.ShaderExtras.normalmap;
var rx = 256;
var ry = 256;
var pars = new THREE.WebGLRenderTargetArguments
{
minFilter = THREE_LinearMipMapLinearFilter,
magFilter = THREE_LinearFilter,
format = THREE_RGBFormat
};
var heightMap = new THREE.WebGLRenderTarget(rx, ry, pars);
var normalMap = new THREE.WebGLRenderTarget(rx, ry, pars);
var uniformsNoise = new MyUniformsNoise
{
time = new THREE.ShaderExtrasModuleItem_uniforms_item { type = "f", value = 1.0 },
scale = new THREE.ShaderExtrasModuleItem_uniforms_item { type = "v2", value = new THREE.Vector2(1.5, 1.5) },
offset = new THREE.ShaderExtrasModuleItem_uniforms_item { type = "v2", value = new THREE.Vector2(0, 0) }
};
var uniformsNormal = __THREE.UniformsUtils.clone(normalShader.uniforms);
uniformsNormal.height.value = 0.05;
((THREE.Vector2)uniformsNormal.resolution.value).set(rx, ry);
uniformsNormal.heightMap.texture = heightMap;
var vertexShader = new Shaders.NoiseVertexShader().ToString();
#endregion
#region before TEXTURES
var textureCounter = 0;
#region RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.setClearColor(scene.fog.color, 1);
renderer.domElement.style.position = IStyle.PositionEnum.absolute;
renderer.domElement.style.top = "0px";
renderer.domElement.style.left = "0px";
container.appendChild(renderer.domElement);
// //
renderer.gammaInput = true;
renderer.gammaOutput = true;
#endregion
#region applyShader
Action<THREE.ShaderExtrasModuleItem, object, object> applyShader = (shader, texture, target) =>
{
var shaderMaterial = new THREE.ShaderMaterial(
new THREE.ShaderMaterialArguments
{
fragmentShader = shader.fragmentShader,
vertexShader = shader.vertexShader,
uniforms = __THREE.UniformsUtils.clone(shader.uniforms)
}
);
shaderMaterial.uniforms.tDiffuse.texture = texture;
var sceneTmp = new THREE.Scene();
var meshTmp = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), shaderMaterial);
meshTmp.position.z = -500;
sceneTmp.add(meshTmp);
renderer.render(sceneTmp, cameraOrtho, target, true);
};
#endregion
var terrain = default(THREE.Mesh);
#region loadTextures
Action loadTextures = () =>
{
textureCounter += 1;
if (textureCounter == 3)
{
terrain.visible = true;
//document.getElementById("loading").style.display = "none";
}
};
////
#endregion
#endregion
#region TEXTURES
var specularMap = new THREE.WebGLRenderTarget(2048, 2048, pars);
var diffuseTexture1 = default(THREE.WebGLRenderTarget);
diffuseTexture1 = __THREE.ImageUtils.loadTexture(
new global::WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.grasslight_big().src,
null,
IFunction.Of(
delegate ()
{
loadTextures();
applyShader(__THREE.ShaderExtras.luminosity, diffuseTexture1, specularMap);
}
)
);
var diffuseTexture2 = __THREE.ImageUtils.loadTexture(
new global::WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.backgrounddetailed6().src,
null,
IFunction.Of(
delegate ()
{
loadTextures();
}
)
);
var detailTexture = __THREE.ImageUtils.loadTexture(
new global::WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.grasslight_big_nm().src,
null,
IFunction.Of(
delegate ()
{
loadTextures();
}
)
);
diffuseTexture1.wrapS = THREE_RepeatWrapping;
diffuseTexture1.wrapT = THREE_RepeatWrapping;
diffuseTexture2.wrapS = THREE_RepeatWrapping;
diffuseTexture2.wrapT = THREE_RepeatWrapping;
detailTexture.wrapS = THREE_RepeatWrapping;
detailTexture.wrapT = THREE_RepeatWrapping;
specularMap.wrapS = THREE_RepeatWrapping;
specularMap.wrapT = THREE_RepeatWrapping;
#endregion
#region TERRAIN SHADER
var terrainShader = __THREE.ShaderTerrain.terrain;
var uniformsTerrain = __THREE.UniformsUtils.clone(terrainShader.uniforms);
uniformsTerrain.tNormal.texture = normalMap;
uniformsTerrain.uNormalScale.value = 3.5;
uniformsTerrain.tDisplacement.texture = heightMap;
uniformsTerrain.tDiffuse1.texture = diffuseTexture1;
uniformsTerrain.tDiffuse2.texture = diffuseTexture2;
uniformsTerrain.tSpecular.texture = specularMap;
uniformsTerrain.tDetail.texture = detailTexture;
uniformsTerrain.enableDiffuse1.value = true;
uniformsTerrain.enableDiffuse2.value = true;
uniformsTerrain.enableSpecular.value = true;
((THREE.Color)uniformsTerrain.uDiffuseColor.value).setHex(0xffffff);
((THREE.Color)uniformsTerrain.uSpecularColor.value).setHex(0xffffff);
((THREE.Color)uniformsTerrain.uAmbientColor.value).setHex(0x111111);
uniformsTerrain.uShininess.value = 30;
uniformsTerrain.uDisplacementScale.value = 375;
((THREE.Vector2)uniformsTerrain.uRepeatOverlay.value).set(6, 6);
var _params = new[] {
new { id= "heightmap", fragmentShader= new Shaders.NoiseFragmentShader().ToString(), vertexShader= vertexShader, uniforms= (object)uniformsNoise, lights = false },
new { id="normal", fragmentShader= normalShader.fragmentShader, vertexShader=normalShader.vertexShader, uniforms=(object)uniformsNormal, lights = false },
new { id="terrain", fragmentShader= terrainShader.fragmentShader, vertexShader=terrainShader.vertexShader, uniforms=(object)uniformsTerrain, lights = true }
};
for (var i = 0; i < _params.Length; i++)
{
var material = new THREE.ShaderMaterial(
new THREE.ShaderMaterialArguments
{
uniforms = (THREE.ShaderExtrasModuleItem_uniforms)_params[i].uniforms,
vertexShader = _params[i].vertexShader,
fragmentShader = _params[i].fragmentShader,
lights = _params[i].lights,
fog = true
}
);
mlib[(string)_params[i].id] = material;
}
var plane = new THREE.PlaneGeometry(Native.window.Width, Native.window.Height);
var quadTarget = new THREE.Mesh(
plane,
new THREE.MeshBasicMaterial(
new THREE.MeshBasicMaterialArguments { color = 0xff0000 }
)
);
quadTarget.position.z = -500;
sceneRenderTarget.addObject(quadTarget);
#endregion
#region TERRAIN MESH
var geometryTerrain = new THREE.PlaneGeometry(6000, 6000, 256, 256);
geometryTerrain.computeFaceNormals();
geometryTerrain.computeVertexNormals();
geometryTerrain.computeTangents();
terrain = new THREE.Mesh(geometryTerrain, mlib["terrain"]);
terrain.rotation.set(-Math.PI / 2.0, 0, 0);
terrain.position.set(0, -125, 0);
terrain.visible = false;
scene.add(terrain);
#endregion
#region COMPOSER
renderer.autoClear = false;
var renderTargetParameters = new THREE.WebGLRenderTargetArguments
{
minFilter = THREE_LinearFilter,
magFilter = THREE_LinearFilter,
format = THREE_RGBFormat,
stencilBufer = false
};
var renderTarget = new THREE.WebGLRenderTarget((int)SCREEN_WIDTH, (int)SCREEN_HEIGHT, renderTargetParameters);
var effectBloom = new THREE.BloomPass(0.6);
var effectBleach = new THREE.ShaderPass(__THREE.ShaderExtras.bleachbypass);
var hblur = new THREE.ShaderPass(__THREE.ShaderExtras.horizontalTiltShift);
var vblur = new THREE.ShaderPass(__THREE.ShaderExtras.verticalTiltShift);
var bluriness = 6;
hblur.uniforms.h.value = bluriness / SCREEN_WIDTH;
vblur.uniforms.v.value = bluriness / SCREEN_HEIGHT;
hblur.uniforms.r.value = 0.5;
vblur.uniforms.r.value = 0.5;
effectBleach.uniforms.opacity.value = 0.65;
var composer0 = new THREE.EffectComposer(renderer, renderTarget);
var renderModel = new THREE.RenderPass(scene, camera);
vblur.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer, renderTarget);
composer.addPass(renderModel);
composer.addPass(effectBloom);
//composer.addPass( effectBleach );
composer.addPass(hblur);
composer.addPass(vblur);
#endregion
var r = new Random();
Func<f> Math_random = () => (f)r.NextDouble();
#region addMorph
Action<MyModelGeometry, f, f, f, f, f> addMorph = (geometry, speed, duration, x, y, z) =>
{
var material = new THREE.MeshLambertMaterial(
new THREE.MeshLambertMaterialArguments
{
color = 0xffaa55,
morphTargets = true,
vertexColors = THREE_FaceColors
}
);
var meshAnim = new THREE.MorphAnimMesh(geometry, material);
meshAnim.speed = speed;
meshAnim.duration = duration;
meshAnim.time = 600.0 * Math_random();
meshAnim.position.set(x, y, z);
meshAnim.rotation.y = (f)(Math.PI / 2f);
meshAnim.castShadow = true;
meshAnim.receiveShadow = false;
scene.add(meshAnim);
morphs.Add(meshAnim);
renderer.initWebGLObjects(scene);
};
#endregion
#region morphColorsToFaceColors
Action<MyModelGeometry> morphColorsToFaceColors = (geometry) =>
{
if (geometry.morphColors != null)
if (geometry.morphColors.Length > 0)
{
var colorMap = geometry.morphColors[0];
for (var i = 0; i < colorMap.colors.Length; i++)
{
geometry.faces[i].color = colorMap.colors[i];
}
}
};
#endregion
#region Models
var loader = new THREE.JSONLoader();
var startX = -3000;
loader.load(
new Models.parrot().Content.src,
IFunction.OfDelegate(
new Action<MyModelGeometry>(
geometry =>
{
morphColorsToFaceColors(geometry);
addMorph(geometry, 250, 500, startX - 500, 500, 700);
addMorph(geometry, 250, 500, startX - Math_random() * 500, 500, -200);
addMorph(geometry, 250, 500, startX - Math_random() * 500, 500, 200);
addMorph(geometry, 250, 500, startX - Math_random() * 500, 500, 1000);
}
)
)
);
loader.load(
new Models.flamingo().Content.src,
IFunction.OfDelegate(
new Action<MyModelGeometry>(
geometry =>
{
morphColorsToFaceColors(geometry);
addMorph(geometry, 500, 1000, startX - Math_random() * 500, 350, 40);
}
)
)
);
loader.load(
new Models.stork().Content.src,
IFunction.OfDelegate(
new Action<MyModelGeometry>(
geometry =>
{
morphColorsToFaceColors(geometry);
addMorph(geometry, 350, 1000, startX - Math_random() * 500, 350, 340);
}
)
)
);
#endregion
#region PRE-INIT
renderer.initWebGLObjects(scene);
#endregion
#region onkeydown
Native.document.body.onkeydown +=
(e) =>
{
if (e.KeyCode == 78) lightDir *= -1;
if (e.KeyCode == 77) animDeltaDir *= -1;
if (e.KeyCode == 66) soundDir *= -1;
};
#endregion
Action __loaded = null;
#region event Action loaded;
Native.window.parent.With(
parent =>
{
__loaded = delegate
{
__loaded = null;
parent.postMessage("WebGLDynamicTerrainTemplate.loaded");
};
}
);
#endregion
#region render
Action render = () =>
{
var delta = clock.getDelta();
soundVal = __THREE.Math.clamp(soundVal + delta * soundDir, 0, 1);
if (soundVal != oldSoundVal)
{
if (soundtrack != null)
{
soundtrack.volume = soundVal;
oldSoundVal = soundVal;
}
}
//Native.Document.title = "textureCounter " + textureCounter;
if (terrain.visible)
{
controls.update();
var Date_now = new IDate().getTime();
var time = Date_now * 0.001;
var fLow = 0.4;
var fHigh = 0.825;
lightVal = __THREE.Math.clamp(lightVal + 0.5 * delta * lightDir, fLow, fHigh);
var valNorm = (lightVal - fLow) / (fHigh - fLow);
var sat = __THREE.Math.mapLinear(valNorm, 0, 1, 0.95, 0.25);
scene.fog.color.setHSV(0.1, sat, lightVal);
renderer.setClearColor(scene.fog.color, 1);
spotLight.intensity = __THREE.Math.mapLinear(valNorm, 0, 1, 0.1, 1.15);
pointLight.intensity = __THREE.Math.mapLinear(valNorm, 0, 1, 0.9, 1.5);
uniformsTerrain.uNormalScale.value = __THREE.Math.mapLinear(valNorm, 0, 1, 0.6, 3.5);
if (updateNoise)
{
animDelta = __THREE.Math.clamp(animDelta + 0.00075 * animDeltaDir, 0, 0.05);
uniformsNoise.time.value = ((f)uniformsNoise.time.value) + delta * animDelta;
var uniformsNoise_offset_value = (THREE.Vector3)uniformsNoise.offset.value;
uniformsNoise_offset_value.x += delta * 0.05f;
var uniformsTerrain_uOffset_value = (THREE.Vector3)uniformsTerrain.uOffset.value;
uniformsTerrain_uOffset_value.x = 4.0f * uniformsNoise_offset_value.x;
quadTarget.material = mlib["heightmap"];
renderer.render(sceneRenderTarget, cameraOrtho, heightMap, true);
quadTarget.material = mlib["normal"];
renderer.render(sceneRenderTarget, cameraOrtho, normalMap, true);
//updateNoise = false;
}
for (var i = 0; i < morphs.Count; i++)
{
var morph = morphs[i];
morph.updateAnimation(1000 * delta);
morph.position.x += morph.speed * delta;
if (morph.position.x > 2000)
{
morph.position.x = -1500 - Math_random() * 500;
}
}
//renderer.render( scene, camera );
composer.render(0.1);
if (__loaded != null)
__loaded();
}
else
{
}
};
#endregion
Native.window.onframe +=
delegate
{
if (IsDisposed)
return;
render();
};
#endregion
#region IsDisposed
Dispose = delegate
{
if (IsDisposed)
return;
IsDisposed = true;
//page.song.pause();
soundtrack.pause();
container.Orphanize();
};
#endregion
#region AtResize
Action AtResize = delegate
{
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
renderer.setSize(Native.window.Width, Native.window.Height);
camera.aspect = Native.window.Width / Native.window.Height;
camera.updateProjectionMatrix();
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
Native.document.body.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
Native.document.body.requestFullscreen();
}
};
#region requestFullscreen
Native.document.body.ondblclick +=
delegate
{
if (IsDisposed)
return;
// http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
Native.document.body.requestFullscreen();
//AtResize();
};
#endregion
}