// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://alteredqualia.com/three/examples/webgl_cars.html
// http://alteredqualia.com/xg/examples/animation_physics_terrain.html
// https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea
// Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P
// https://github.com/dotnet/roslyn/issues/98
//Icon image is missing.
//At least one new-style screenshot or video is required.
//Small tile image is missing.
//Please select a Primary Category for your item.
//Language is not selected.
// 640x400
// 128x128
// 440x280
public Application(IApp page)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128
Console.WriteLine("enter WebGLHZBlendCharacter");
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
Console.WriteLine("invoke TheServerWithAppWindow.Invoke");
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
{ TexturesImages ref0; }
// http://www.realitymeltdown.com/WebGL3/character-controller.html
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127
//Native.css
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
//Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46
// used by, for?
var clock = new THREE.Clock();
//var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 };
var scene = new THREE.Scene();
var skyScene = new THREE.Scene();
scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.domElement.AttachToDocument();
// this will mess up
// three.OrbitControls.js
// onMouseMove
//new IStyle(renderer.domElement)
//{
// position = IStyle.PositionEnum.absolute,
// left = "0px",
// top = "0px",
// right = "0px",
// bottom = "0px",
//};
//new { }.With(
// async delegate
// {
// await Native.window.async.onresize;
// // if the reload were fast, then we could actually do that:D
// Native.document.location.reload();
// }
//);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
while (true)
{
await Native.window.async.onframe;
cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
}
}
);
#endregion
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
scene.add(blendMesh);
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
blendMesh.showSkeleton(!xtrue);
var radius = blendMesh.geometry.boundingSphere.radius;
Native.document.title = new { radius }.ToString();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
camera.position.set(0.0, radius * 3, radius * 3.5);
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var controls = new THREE.OrbitControls(camera);
//controls.noPan = true;
//var loader = new THREE.JSONLoader();
//loader.load(new Models.ground().Content.src,
// new Action<THREE.Geometry, THREE.Material[]>(
// (xgeometry, materials) =>
// {
// var ground = new THREE.Mesh(xgeometry, materials[0]);
// ground.scale.set(20, 20, 20);
// ground.receiveShadow = true;
// ground.castShadow = true;
// scene.add(ground);
// }
// )
// );
#region createSky
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
dynamic shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
// We're inside the box, so make sure to render the backsides
// It will typically be rendered first in the scene and without depth so anything else will be drawn in front
var material = new THREE.ShaderMaterial(new
{
fragmentShader = shader.fragmentShader,
vertexShader = shader.vertexShader,
uniforms = shader.uniforms,
depthWrite = false,
side = THREE.BackSide
});
// THREE.CubeGeometry has been renamed to THREE.BoxGeometry
// The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values.
var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material);
//skyMesh.renderDepth = -10;
skyScene.add(skyMesh);
#endregion
////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height,
//// new
//// {
//// minFilter = THREE.LinearFilter,
//// magFilter = THREE.LinearFilter,
//// format = THREE.RGBFormat,
//// stencilBufer = false
//// }
////);
////var composer = new THREE.EffectComposer(renderer, renderTarget);
////composer.addPass(new THREE.RenderPass(skyScene, skyCamera));
////composer.addPass(new THREE.RenderPass(scene, camera));
////#region vblur
////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6;
////// Show Details Severity Code Description Project File Line
//////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
////(hblur.uniforms as dynamic).r.value = 0.5;
////(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
////composer.addPass(hblur);
////composer.addPass(vblur);
////#endregion
//composer.addPass(new THREE.RenderPass(scene, camera));
//
#region onframe
Native.window.onframe +=
delegate
{
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
blendMesh.updateSkeletonHelper();
}
controls.center.copy(blendMesh.position);
controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position = controls.center.clone().add(camOffset);
skyCamera.rotation.copy(camera.rotation);
//composer.render(0.1);
//renderer.clear();
renderer.render(skyScene, skyCamera);
renderer.render(scene, camera);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
)
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://threejs.org/examples/#webgl_materials_cubemap_dynamic
// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
// http://threejs.org/examples/#webgl_postprocessing_dof
// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var clock = new THREE.Clock();
var radius = 100;
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000);
camera.position.z = 200;
var skyScene = new THREE.Scene();
var scene = new THREE.Scene();
//scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.sortObjects = false;
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
//var material_depth = new THREE.MeshDepthMaterial();
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var sw = Stopwatch.StartNew();
for (var i = 1; i < 5; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 4 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 300;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
var _i = i;
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 4 * 500 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 300;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
}
#endregion
// maskpass
// THREE.EffectComposer relies on THREE.CopyShader
var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
// THREE.BokehPass relies on THREE.BokehShader
var bokehPass = new THREE.BokehPass(scene, camera, new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0,
width = Native.window.Width,
height = Native.window.Height
});
bokehPass.renderToScreen = true;
composer.addPass(bokehPass);
renderer.autoClear = false;
var controls = new THREE.OrbitControls(camera);
Native.document.onclick +=
delegate
{
// THREE.AnimationHandler.add() has been deprecated.
// how to make it work with bokah?
//THREE.AnimationHandler.update(1);
};
#region onframe
Native.window.onframe +=
delegate
{
controls.update();
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
//THREE.AnimationHandler.update(stepSize);
}
camera.position = controls.center.clone();
skyCamera.rotation.copy(camera.rotation);
composer.render(0.1);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
onMouseDownPosition = new THREE.Vector2();
//camera = new THREE.PerspectiveCamera(
// 45,
// Native.window.aspect,
// 1,
// 1000
// //2000
// );
//camera.position.z = 400;
camera = new THREE.PerspectiveCamera(40, Native.window.Width / Native.window.Height, 1, 10000);
camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.position.y = radious * Math.Sin(phi * Math.PI / 360);
camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var obj = new THREE.Object3D();
var buttomCylinder1 = new THREE.Mesh(
new THREE.CylinderGeometry(50, 50, 50, 32),
new THREE.MeshPhongMaterial(
new
{
specular = new THREE.Color(0xa0a0a0),
color = new THREE.Color(0xa0a0a0),
})
);
buttomCylinder1.rotation.x = -90 * Math.PI / 180;
//buttomCylinder1.position.x = 0;
//buttomCylinder1.position.y = 0;
//buttomCylinder1.position.z = 0;
obj.add(buttomCylinder1);
scene.add(obj);
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize(Native.window.Width, Native.window.Height);
this.canvas = (IHTMLCanvas)renderer.domElement;
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
camera.lookAt(scene.position);
scene.add(obj);
//var plane = new THREE.Mesh(new THREE.Plane(1000, 1000));
//plane.rotation.x = -90 * Math.PI / 180;
//scene.add(plane);
#region onmousedown
this.canvas.onmousedown +=
e =>
{
e.preventDefault();
isMouseDown = true;
onMouseDownTheta = theta;
onMouseDownPhi = phi;
onMouseDownPosition.x = e.CursorX;
onMouseDownPosition.y = e.CursorY;
};
#endregion
this.canvas.onmousewheel +=
e =>
{
radious -= e.WheelDirection;
camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.position.y = radious * Math.Sin(phi * Math.PI / 360);
camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.updateMatrix();
};
#region onmousemove
this.canvas.onmousemove +=
e =>
{
e.preventDefault();
if (isMouseDown)
{
theta = -((e.CursorX - onMouseDownPosition.x) * 0.5) + onMouseDownTheta;
phi = ((e.CursorX - onMouseDownPosition.y) * 0.5) + onMouseDownPhi;
phi = Math.Min(360, Math.Max(0, phi));
camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.position.y = radious * Math.Sin(phi * Math.PI / 360);
camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.updateMatrix();
}
};
#endregion
this.canvas.onmouseup += e =>
{
e.preventDefault();
isMouseDown = false;
onMouseDownPosition.x = e.CursorX - onMouseDownPosition.x;
onMouseDownPosition.y = e.CursorY - onMouseDownPosition.y;
};
// could we
Native.window.onframe +=
e =>
{
renderer.clear();
camera.updateProjectionMatrix();
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
{
renderer.setSize();
}
};
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://threejs.org/examples/#webgl_materials_cubemap_dynamic
// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
// http://threejs.org/examples/#webgl_postprocessing_dof
// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var clock = new THREE.Clock();
var radius = 100;
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000);
camera.position.z = 200;
var skyScene = new THREE.Scene();
var scene = new THREE.Scene();
//scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.sortObjects = false;
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
//var material_depth = new THREE.MeshDepthMaterial();
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var sw = Stopwatch.StartNew();
for (var i = 1; i < 5; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 4 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 300;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
var _i = i;
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 4 * 500 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 300;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
}
#endregion
// maskpass
// THREE.EffectComposer relies on THREE.CopyShader
var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
// THREE.BokehPass relies on THREE.BokehShader
var bokehPass = new THREE.BokehPass(scene, camera, new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0,
width = Native.window.Width,
height = Native.window.Height
});
bokehPass.renderToScreen = true;
composer.addPass(bokehPass);
renderer.autoClear = false;
var controls = new THREE.OrbitControls(camera);
Native.document.onclick +=
delegate
{
// THREE.AnimationHandler.add() has been deprecated.
// how to make it work with bokah?
//THREE.AnimationHandler.update(1);
};
#region onframe
Native.window.onframe +=
delegate
{
controls.update();
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
//THREE.AnimationHandler.update(stepSize);
}
camera.position = controls.center.clone();
skyCamera.rotation.copy(camera.rotation);
composer.render(0.1);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
void InitializeContent()
{
#region make sure we atleast have our invisible DOM
var page_song = new nyanlooped {
loop = true
};
var page_song2 = new nyanslow {
loop = true
};
#endregion
#region container
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.backgroundColor = "#003366";
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#endregion
var renderer = new THREE.WebGLRenderer();
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachTo(container);
var numStars = 10;
var numRainChunks = 30;
var mouseX = 0;
var mouseY = 0;
var clock = new Stopwatch();
clock.Start();
var deltaSum = 0f;
//tick=0,
var frame = 0;
var running = true;
#region onmousemove
Native.document.onmousemove +=
e =>
{
if (IsDisposed)
{
return;
}
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
mouseX = (e.CursorX - windowHalfX);
mouseY = (e.CursorY - windowHalfY);
};
#endregion
Action PlaySomething =
delegate
{
if (running)
{
page_song.play();
page_song2.pause();
}
else
{
page_song.pause();
page_song2.play();
}
};
#region onmousedown
Native.document.onmousedown +=
e =>
{
if (IsDisposed)
{
return;
}
running = !running;
PlaySomething();
};
#endregion
#region HasFocus
var HasFocus = false;
Native.window.onblur +=
delegate
{
HasFocus = false;
page_song.pause();
page_song2.pause();
};
Native.window.onfocus +=
delegate
{
HasFocus = true;
PlaySomething();
};
Native.Document.onmousemove +=
delegate
{
if (HasFocus)
{
return;
}
PlaySomething();
};
Native.Document.onmouseout +=
delegate
{
if (HasFocus)
{
return;
}
page_song.pause();
page_song2.pause();
};
#endregion
#region helper
Action <THREE.Object3D, f, f, f, f, f, f, int> helper =
(o, x, y, z, w, h, d, c) =>
{
// function helper(o, x, y, z, w, h, d, c){
var material = new THREE.MeshLambertMaterial(new { color = c });
var geometry = new THREE.CubeGeometry(w, h, d, 1, 1, 1);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x + (w / 2);
mesh.position.y = y - (h / 2);
mesh.position.z = z + (d / 2);
o.add(mesh);
};
#endregion
#region buildStar
Action <THREE.Object3D, int> buildStar =
(star, state) =>
{
#region dear JSC, please start supporting switch!
if (state == 0)
{
helper(star, 0, 0, 0, 1, 1, 1, 0xffffff);
}
else if (state == 1)
{
helper(star, 1, 0, 0, 1, 1, 1, 0xffffff);
helper(star, -1, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 0, 1, 0, 1, 1, 1, 0xffffff);
helper(star, 0, -1, 0, 1, 1, 1, 0xffffff);
}
else if (state == 2)
{
helper(star, 1, 0, 0, 2, 1, 1, 0xffffff);
helper(star, -2, 0, 0, 2, 1, 1, 0xffffff);
helper(star, 0, 2, 0, 1, 2, 1, 0xffffff);
helper(star, 0, -1, 0, 1, 2, 1, 0xffffff);
}
else if (state == 3)
{
helper(star, 0, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 2, 0, 0, 2, 1, 1, 0xffffff);
helper(star, -3, 0, 0, 2, 1, 1, 0xffffff);
helper(star, 0, 3, 0, 1, 2, 1, 0xffffff);
helper(star, 0, -2, 0, 1, 2, 1, 0xffffff);
}
else if (state == 4)
{
helper(star, 0, 3, 0, 1, 1, 1, 0xffffff);
helper(star, 2, 2, 0, 1, 1, 1, 0xffffff);
helper(star, 3, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 2, -2, 0, 1, 1, 1, 0xffffff);
helper(star, 0, -3, 0, 1, 1, 1, 0xffffff);
helper(star, -2, -2, 0, 1, 1, 1, 0xffffff);
helper(star, -3, 0, 0, 1, 1, 1, 0xffffff);
helper(star, -2, 2, 0, 1, 1, 1, 0xffffff);
}
else if (state == 4)
{
helper(star, 2, 0, 0, 1, 1, 1, 0xffffff);
helper(star, -2, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 0, 2, 0, 1, 1, 1, 0xffffff);
helper(star, 0, -2, 0, 1, 1, 1, 0xffffff);
}
#endregion
};
#endregion
var r = new Random();
Func <f> Math_random = () => r.NextFloat();
var stars = new List <List <THREE.Object3D> >();
#region init
var camera = new THREE.PerspectiveCamera(45,
Native.window.Width / Native.window.Height, .1f, 10000);
camera.position.z = 30;
camera.position.x = 0;
camera.position.y = 0;
var scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x003366, 0.0095f);
#region POPTART
var poptart = new THREE.Object3D();
// object x y z w h d color
helper(poptart, 0, -2, -1, 21, 14, 3, 0x222222);
helper(poptart, 1, -1, -1, 19, 16, 3, 0x222222);
helper(poptart, 2, 0, -1, 17, 18, 3, 0x222222);
helper(poptart, 1, -2, -1.5f, 19, 14, 4, 0xffcc99);
helper(poptart, 2, -1, -1.5f, 17, 16, 4, 0xffcc99);
helper(poptart, 2, -4, 2, 17, 10, .6f, 0xff99ff);
helper(poptart, 3, -3, 2, 15, 12, .6f, 0xff99ff);
helper(poptart, 4, -2, 2, 13, 14, .6f, 0xff99ff);
helper(poptart, 4, -4, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 9, -3, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 12, -3, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 16, -5, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 8, -7, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 5, -9, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 9, -10, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 3, -11, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 7, -13, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 4, -14, 2, 1, 1, .7f, 0xff3399);
poptart.position.x = -10.5f;
poptart.position.y = 9;
scene.add(poptart);
#endregion
#region FEET
var feet = new THREE.Object3D();
helper(feet, 0, -2, .49f, 3, 3, 1, 0x222222);
helper(feet, 1, -1, .49f, 3, 3, 1, 0x222222);
helper(feet, 1, -2, -.01f, 2, 2, 2, 0x999999);
helper(feet, 2, -1, -.01f, 2, 2, 2, 0x999999);
helper(feet, 6, -2, -.5f, 3, 3, 1, 0x222222);
helper(feet, 6, -2, -.5f, 4, 2, 1, 0x222222);
helper(feet, 7, -2, -.99f, 2, 2, 2, 0x999999);
helper(feet, 16, -3, .49f, 3, 2, 1, 0x222222);
helper(feet, 15, -2, .49f, 3, 2, 1, 0x222222);
helper(feet, 15, -2, -.01f, 2, 1, 2, 0x999999);
helper(feet, 16, -3, -.01f, 2, 1, 2, 0x999999);
helper(feet, 21, -3, -.5f, 3, 2, 1, 0x222222);
helper(feet, 20, -2, -.5f, 3, 2, 1, 0x222222);
helper(feet, 20, -2, -.99f, 2, 1, 2, 0x999999);
helper(feet, 21, -3, -.99f, 2, 1, 2, 0x999999);
feet.position.x = -12.5f;
feet.position.y = -6;
scene.add(feet);
#endregion
#region TAIL
var tail = new THREE.Object3D();
helper(tail, 0, 0, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 1, -1, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 2, -2, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 3, -3, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 1, -1, -.5f, 2, 1, 2, 0x999999);
helper(tail, 2, -2, -.5f, 2, 1, 2, 0x999999);
helper(tail, 3, -3, -.5f, 2, 1, 2, 0x999999);
helper(tail, 4, -4, -.5f, 2, 1, 2, 0x999999);
tail.position.x = -16.5f;
tail.position.y = 2;
scene.add(tail);
#endregion
#region FACE
var face = new THREE.Object3D();
helper(face, 2, -3, -3, 12, 9, 4, 0x222222);
helper(face, 0, -5, 0, 16, 5, 1, 0x222222);
helper(face, 1, -1, 0, 4, 10, 1, 0x222222);
helper(face, 11, -1, 0, 4, 10, 1, 0x222222);
helper(face, 3, -11, 0, 10, 2, 1, 0x222222);
helper(face, 2, 0, 0, 2, 2, 1, 0x222222);
helper(face, 4, -2, 0, 2, 2, 1, 0x222222);
helper(face, 12, 0, 0, 2, 2, 1, 0x222222);
helper(face, 10, -2, 0, 2, 2, 1, 0x222222);
helper(face, 1, -5, .5f, 14, 5, 1, 0x999999);
helper(face, 3, -4, .5f, 10, 8, 1, 0x999999);
helper(face, 2, -1, .5f, 2, 10, 1, 0x999999);
helper(face, 12, -1, .5f, 2, 10, 1, 0x999999);
helper(face, 4, -2, .5f, 1, 2, 1, 0x999999);
helper(face, 5, -3, .5f, 1, 1, 1, 0x999999);
helper(face, 11, -2, .5f, 1, 2, 1, 0x999999);
helper(face, 10, -3, .5f, 1, 1, 1, 0x999999);
//Eyes
helper(face, 4, -6, .6f, 2, 2, 1, 0x222222);
helper(face, 11, -6, .6f, 2, 2, 1, 0x222222);
helper(face, 3.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff);
helper(face, 10.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff);
//MOUTH
helper(face, 5, -10, .6f, 7, 1, 1, 0x222222);
helper(face, 5, -9, .6f, 1, 2, 1, 0x222222);
helper(face, 8, -9, .6f, 1, 2, 1, 0x222222);
helper(face, 11, -9, .6f, 1, 2, 1, 0x222222);
//CHEEKS
helper(face, 2, -8, .6f, 2, 2, .91f, 0xff9999);
helper(face, 13, -8, .6f, 2, 2, .91f, 0xff9999);
face.position.x = -.5f;
face.position.y = 4;
face.position.z = 4;
scene.add(face);
#endregion
#region RAINBOW
var rainbow = new THREE.Object3D();
for (var c = 0; c < numRainChunks - 1; c++)
{
var yOffset = 8;
if (c % 2 == 1)
{
yOffset = 7;
}
var xOffset = (-c * 8) - 16.5f;
helper(rainbow, xOffset, yOffset, 0, 8, 3, 1, 0xff0000);
helper(rainbow, xOffset, yOffset - 3, 0, 8, 3, 1, 0xff9900);
helper(rainbow, xOffset, yOffset - 6, 0, 8, 3, 1, 0xffff00);
helper(rainbow, xOffset, yOffset - 9, 0, 8, 3, 1, 0x33ff00);
helper(rainbow, xOffset, yOffset - 12, 0, 8, 3, 1, 0x0099ff);
helper(rainbow, xOffset, yOffset - 15, 0, 8, 3, 1, 0x6633ff);
}
scene.add(rainbow);
#endregion
#region rainChunk
var rainChunk = new THREE.Object3D();
helper(rainChunk, -16.5f, 7, 0, 8, 3, 1, 0xff0000);
helper(rainChunk, -16.5f, 4, 0, 8, 3, 1, 0xff9900);
helper(rainChunk, -16.5f, 1, 0, 8, 3, 1, 0xffff00);
helper(rainChunk, -16.5f, -2, 0, 8, 3, 1, 0x33ff00);
helper(rainChunk, -16.5f, -5, 0, 8, 3, 1, 0x0099ff);
helper(rainChunk, -16.5f, -8, 0, 8, 3, 1, 0x6633ff);
rainChunk.position.x -= (8 * (numRainChunks - 1));
scene.add(rainChunk);
#endregion
#region stars
for (var state = 0; state < 6; state++)
{
stars.Add(new List <THREE.Object3D>());
for (var c = 0; c < numStars; c++)
{
var star = new THREE.Object3D();
star.position.x = Math_random() * 200 - 100;
star.position.y = Math_random() * 200 - 100;
star.position.z = Math_random() * 200 - 100;
buildStar(star, state);
scene.add(star);
stars[state].Add(star);
}
}
#endregion
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.z = 1000;
scene.add(pointLight);
#endregion
#region IsDisposed
Dispose = delegate
{
if (IsDisposed)
{
return;
}
IsDisposed = true;
page_song.pause();
page_song2.pause();
container.Orphanize();
};
#endregion
Native.window.onframe +=
delegate
{
f delta = clock.ElapsedMilliseconds * 0.001f;
clock.Restart();
if (running)
{
deltaSum += delta;
}
if (deltaSum > .07)
{
deltaSum = deltaSum % .07f;
frame = (frame + 1) % 12;
for (var c = 0; c < numStars; c++)
{
var tempX = stars[5][c].position.x;
var tempY = stars[5][c].position.y;
var tempZ = stars[5][c].position.z;
for (var state = 5; state > 0; state--)
{
var star = stars[state][c];
var star2 = stars[state - 1][c];
star.position.x = star2.position.x - 8;
star.position.y = star2.position.y;
star.position.z = star2.position.z;
if (star.position.x < -100)
{
star.position.x += 200;
star.position.y = Math_random() * 200 - 100;
star.position.z = Math_random() * 200 - 100;
}
}
stars[0][c].position.x = tempX;
stars[0][c].position.y = tempY;
stars[0][c].position.z = tempZ;
}
#region dear JSC, please start supporting switch!
if (frame == 0)
{
face.position.x++;
feet.position.x++;
}
else if (frame == 1)
{
face.position.y--;
feet.position.x++;
feet.position.y--;
poptart.position.y--;
rainbow.position.x -= 9;
rainChunk.position.x += (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 2)
{
feet.position.x--;
}
else if (frame == 3)
{
face.position.x--;
feet.position.x--;
rainbow.position.x += 9;
rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 4)
{
face.position.y++;
}
else if (frame == 5)
{
poptart.position.y++;
feet.position.y++;
rainbow.position.x -= 9;
rainChunk.position.x += (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 6)
{
face.position.x++;
feet.position.x++;
}
else if (frame == 7)
{
poptart.position.y--;
face.position.y--;
feet.position.x++;
feet.position.y--;
rainbow.position.x += 9;
rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 8)
{
feet.position.x--;
}
else if (frame == 9)
{
face.position.x--;
feet.position.x--;
rainbow.position.x -= 9;
rainChunk.position.x += (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 10)
{
face.position.y++;
}
else if (frame == 11)
{
poptart.position.y++;
feet.position.y++;
rainbow.position.x += 9;
rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1;
}
#endregion
}
camera.position.x += (mouseX - camera.position.x) * .005f;
camera.position.y += (-mouseY - camera.position.y) * .005f;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
#region AtResize
Action AtResize = delegate
{
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
#region requestFullscreen
Native.document.body.ondblclick +=
delegate
{
if (IsDisposed)
{
return;
}
// http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
Native.document.body.requestFullscreen();
};
#endregion
}
public void addLocation(double lat, double lon, double radius, double heigth, THREE.Object3D parent, double segments)
{
var phi = (lat) * Math.PI / 180;
var theta = (lon - 180) * Math.PI / 180;
var x = -(radius + heigth) * Math.Cos(phi) * Math.Cos(theta);
var y = (radius + heigth) * Math.Sin(phi);
var z = (radius + heigth) * Math.Cos(phi) * Math.Sin(theta);
var latLongOnSphere = new THREE.Vector3(x, y, z);
var p = new THREE.Mesh(
new THREE.SphereGeometry(
0.005,
segments, segments),
new THREE.MeshBasicMaterial(
new
{
color = "red"
})
);
p.position = latLongOnSphere;
locations.Add(p);
parent.add(p);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// X:\jsc.svn\examples\javascript\CanvasMarchinAntsExperiment\CanvasMarchinAntsExperiment\Application.cs
// http://mattdesl.svbtle.com/drawing-lines-is-hard
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// http://threejs.org/examples/webgl_lines_dashed.html
var objects = new List <THREE.Line>();
var camera = new THREE.PerspectiveCamera(60,
Native.window.aspect, 1, 200);
camera.position.z = 150;
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x111111, 150, 200);
var root = new THREE.Object3D();
var subdivisions = 6;
var recursion = 1;
var points = hilbert3D(new THREE.Vector3(), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7);
Console.WriteLine(
new { points.Length }
);
#region spline
var spline = new THREE.Spline(points);
var geometrySpline = new THREE.Geometry();
for (var i = 0; i < points.Length * subdivisions; i++)
{
var index = (double)i / (points.Length * subdivisions);
var position = spline.getPoint(index);
geometrySpline.vertices[i] = new THREE.Vector3(position.x, position.y, position.z);
Console.WriteLine(
new { i, index, position.x, position.y, position.z }
);
}
#endregion
var geometryCube = cube(50);
geometryCube.computeLineDistances();
geometrySpline.computeLineDistances();
{
var ogeometrySpline = new THREE.Line(geometrySpline, new THREE.LineDashedMaterial(
new { color = 0xffffff, dashSize = 1, gapSize = 0.5 }
), THREE.LineStrip);
objects.Add(ogeometrySpline);
scene.add(ogeometrySpline);
ogeometrySpline.AttachTo(scene);
}
{
var ogeometryCube = new THREE.Line(geometryCube, new THREE.LineDashedMaterial(
new { color = 0xffaa00, dashSize = 3, gapSize = 1, linewidth = 2 }
), THREE.LinePieces);
objects.Add(ogeometryCube);
ogeometryCube.AttachTo(scene);
}
{
var geometry = new THREE.Geometry
{
vertices = new[] {
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(100, 0, 0)
}
};
var oline = new THREE.Line(geometry, new THREE.LineDashedMaterial(
new { color = 0x00aaff, dashSize = 3, gapSize = 3, linewidth = 20 }
), THREE.LinePieces);
objects.Add(oline);
//scene.add(o);
oline.AttachTo(scene);
}
var renderer = new THREE.WebGLRenderer(new { antialias = true });
renderer.setClearColor(0x111111);
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(
Native.window.Width,
Native.window.Height
);
renderer.domElement.AttachToDocument();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var sw = Stopwatch.StartNew();
Native.window.onframe +=
delegate
{
//var time = sw.ElapsedMilliseconds * 0.001;
//for (var i = 0; i < objects.Count; i++)
//{
// var o = objects[i];
// //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
// o.rotation.x = 0.25 * time;
// o.rotation.y = 0.25 * time;
//}
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
//var ze = new ZeProperties
//{
// //() => renderer
//};
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://threejs.org/examples/#webgl_postprocessing_godrays
// view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var sunPosition = new THREE.Vector3(0, 1000, -1000);
var screenSpacePosition = new THREE.Vector3();
var mouseX = 0;
var mouseY = 0;
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
//var postprocessing = { enabled : true };
var orbitRadius = 200;
var bgColor = 0x000511;
var sunColor = 0xffee00;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
//
var materialDepth = new THREE.MeshDepthMaterial(new { });
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var loader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
loader.load(
new Models.tree().Content.src,
new Action <THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
// sphere
var geo = new THREE.SphereGeometry(1, 20, 10);
var sphereMesh = new THREE.Mesh(geo, materialScene);
var sc = 20;
sphereMesh.scale.set(sc, sc, sc);
scene.add(sphereMesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setClearColor(bgColor);
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.autoClear = false;
renderer.sortObjects = false;
var postprocessing_scene = new THREE.Scene();
var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000);
postprocessing_camera.position.z = 100;
postprocessing_scene.add(postprocessing_camera);
var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat };
var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
// investigate further for now.
// pars.format = THREE.LuminanceFormat;
// I would have this quarter size and use it as one of the ping-pong render
// targets but the aliasing causes some temporal flickering
var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Aggressive downsize god-ray ping-pong render targets to minimize cost
var w = Native.window.Width / 4;
var h = Native.window.Height / 4;
var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars);
var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars);
// god-ray shaders
// X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl
// these are special <script src="js/ShaderGodRays.js"></script>
var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic;
var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms);
var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayGenUniforms,
vertexShader = godraysGenShader.vertexShader,
fragmentShader = godraysGenShader.fragmentShader
});
var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic;
var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms);
var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayCombineUniforms,
vertexShader = godraysCombineShader.vertexShader,
fragmentShader = godraysCombineShader.fragmentShader
});
var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic;
var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms);
var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godraysFakeSunUniforms,
vertexShader = godraysFakeSunShader.vertexShader,
fragmentShader = godraysFakeSunShader.fragmentShader
});
postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor);
postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor);
postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75;
var postprocessing_quad = new THREE.Mesh(
new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height),
postprocessing_materialGodraysGenerate
);
postprocessing_quad.position.z = -9900;
postprocessing_scene.add(postprocessing_quad);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
//var planeMaterial = new THREE.MeshLambertMaterial(
// new
// {
// //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src),
// color = 0xA26D41
// //color = 0xff0000
// }
//);
//planeMaterial.map.repeat.x = 300;
//planeMaterial.map.repeat.y = 300;
//planeMaterial.map.wrapS = THREE.RepeatWrapping;
//planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.position.y = -.5f * 100;
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
//scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region Comanche
new Comanche().Source.Task.ContinueWithResult(
Comanche =>
{
Comanche.position.y = 200;
//dae.position.z = 280;
Comanche.AttachTo(scene);
//scene.add(dae);
//oo.Add(Comanche);
// wont do it
//dae.castShadow = true;
// http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
//var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
//helper.update();
//// If you want a visible bounding box
//scene.add(helper);
Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
Comanche.scale.set(0.5, 0.5, 0.5);
//helper.scale.set(0.5, 0.5, 0.5);
var s2w = Stopwatch.StartNew();
Native.window.onframe += delegate
{
//dae.children[0].children[0].children.Last().al
//dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
//dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
//rotation.y = sw.ElapsedMilliseconds * 0.01;
Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001;
//dae.children[0].children[0].children.Last().app
};
}
);
#endregion
var sw = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// Show Details Severity Code Description Project File Line
//Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238
Native.window.onframe +=
delegate
{
//var time = IDate.now() / 4000;
var time = sw.ElapsedMilliseconds / 4000.0;
sphereMesh.position.x = orbitRadius * Math.Cos(time);
sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100;
//controls.center.copy(blendMesh.position);
//controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position.x += (mouseX - camera.position.x) * 0.036;
//camera.position.y += (-(mouseY) - camera.position.y) * 0.036;
//camera.lookAt(scene.position);
// Find the screenspace position of the sun
screenSpacePosition.copy(sunPosition).project(camera);
screenSpacePosition.x = (screenSpacePosition.x + 1) / 2;
screenSpacePosition.y = (screenSpacePosition.y + 1) / 2;
// Give it to the god-ray and sun shaders
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
// -- Draw sky and sun --
// Clear colors and depths, will clear to sky color
renderer.clearTarget(postprocessing_rtTextureColors, true, true, false);
// Sun render. Runs a shader that gives a brightness based on the screen
// space distance to the sun. Not very efficient, so i make a scissor
// rectangle around the suns position to avoid rendering surrounding pixels.
var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader
var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected
screenSpacePosition.x *= Native.window.Width;
screenSpacePosition.y *= Native.window.Height;
renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH);
renderer.enableScissorTest(true);
postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors);
renderer.enableScissorTest(false);
// -- Draw scene objects --
// Colors
scene.overrideMaterial = null;
renderer.render(scene, camera, postprocessing_rtTextureColors);
// Depth
scene.overrideMaterial = materialDepth;
renderer.render(scene, camera, postprocessing_rtTextureDepth, true);
// -- Render god-rays --
// Maximum length of god-rays (in texture space [0,1]X[0,1])
var filterLen = 1.0;
// Samples taken by filter
var TAPS_PER_PASS = 6.0;
// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
// would start with a small filter support and grow to large. however
// the large-to-small order produces less objectionable aliasing artifacts that
// appear as a glimmer along the length of the beams
// pass 1 - render into first ping-pong target
var pass = 1.0;
var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// pass 2 - render into second ping-pong target
pass = 2.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1);
// pass 3 - 1st RT
pass = 3.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// final pass - composite god-rays onto colors
postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors;
postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine;
renderer.render(postprocessing_scene, postprocessing_camera);
postprocessing_scene.overrideMaterial = null;
};
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// X:\jsc.svn\examples\javascript\CanvasMarchinAntsExperiment\CanvasMarchinAntsExperiment\Application.cs
// http://mattdesl.svbtle.com/drawing-lines-is-hard
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// http://threejs.org/examples/webgl_lines_dashed.html
var objects = new List<THREE.Line>();
var camera = new THREE.PerspectiveCamera(60,
Native.window.aspect, 1, 200);
camera.position.z = 150;
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x111111, 150, 200);
var root = new THREE.Object3D();
var subdivisions = 6;
var recursion = 1;
var points = hilbert3D(new THREE.Vector3(), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7);
Console.WriteLine(
new { points.Length }
);
#region spline
var spline = new THREE.Spline(points);
var geometrySpline = new THREE.Geometry();
for (var i = 0; i < points.Length * subdivisions; i++)
{
var index = (double)i / (points.Length * subdivisions);
var position = spline.getPoint(index);
geometrySpline.vertices[i] = new THREE.Vector3(position.x, position.y, position.z);
Console.WriteLine(
new { i, index, position.x, position.y, position.z }
);
}
#endregion
var geometryCube = cube(50);
geometryCube.computeLineDistances();
geometrySpline.computeLineDistances();
{
var ogeometrySpline = new THREE.Line(geometrySpline, new THREE.LineDashedMaterial(
new { color = 0xffffff, dashSize = 1, gapSize = 0.5 }
), THREE.LineStrip);
objects.Add(ogeometrySpline);
scene.add(ogeometrySpline);
ogeometrySpline.AttachTo(scene);
}
{
var ogeometryCube = new THREE.Line(geometryCube, new THREE.LineDashedMaterial(
new { color = 0xffaa00, dashSize = 3, gapSize = 1, linewidth = 2 }
), THREE.LinePieces);
objects.Add(ogeometryCube);
ogeometryCube.AttachTo(scene);
}
{
var geometry = new THREE.Geometry
{
vertices = new[] {
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(100, 0, 0)
}
};
var oline = new THREE.Line(geometry, new THREE.LineDashedMaterial(
new { color = 0x00aaff, dashSize = 3, gapSize = 3, linewidth = 20 }
), THREE.LinePieces);
objects.Add(oline);
//scene.add(o);
oline.AttachTo(scene);
}
var renderer = new THREE.WebGLRenderer(new { antialias = true });
renderer.setClearColor(0x111111);
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(
Native.window.Width,
Native.window.Height
);
renderer.domElement.AttachToDocument();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var sw = Stopwatch.StartNew();
Native.window.onframe +=
delegate
{
//var time = sw.ElapsedMilliseconds * 0.001;
//for (var i = 0; i < objects.Count; i++)
//{
// var o = objects[i];
// //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
// o.rotation.x = 0.25 * time;
// o.rotation.y = 0.25 * time;
//}
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
//var ze = new ZeProperties
//{
// //() => renderer
//};
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
void InitializeContent()
{
#region make sure we atleast have our invisible DOM
var page_song = new nyanlooped { loop = true };
var page_song2 = new nyanslow { loop = true };
#endregion
#region container
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.backgroundColor = "#003366";
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#endregion
var renderer = new THREE.WebGLRenderer();
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachTo(container);
var numStars = 10;
var numRainChunks = 30;
var mouseX = 0;
var mouseY = 0;
var clock = new Stopwatch();
clock.Start();
var deltaSum = 0f;
//tick=0,
var frame = 0;
var running = true;
#region onmousemove
Native.document.onmousemove +=
e =>
{
if (IsDisposed)
return;
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
mouseX = (e.CursorX - windowHalfX);
mouseY = (e.CursorY - windowHalfY);
};
#endregion
Action PlaySomething =
delegate
{
if (running)
{
page_song.play();
page_song2.pause();
}
else
{
page_song.pause();
page_song2.play();
}
};
#region onmousedown
Native.document.onmousedown +=
e =>
{
if (IsDisposed)
return;
running = !running;
PlaySomething();
};
#endregion
#region HasFocus
var HasFocus = false;
Native.window.onblur +=
delegate
{
HasFocus = false;
page_song.pause();
page_song2.pause();
};
Native.window.onfocus +=
delegate
{
HasFocus = true;
PlaySomething();
};
Native.Document.onmousemove +=
delegate
{
if (HasFocus)
return;
PlaySomething();
};
Native.Document.onmouseout +=
delegate
{
if (HasFocus)
return;
page_song.pause();
page_song2.pause();
};
#endregion
#region helper
Action<THREE.Object3D, f, f, f, f, f, f, int> helper =
(o, x, y, z, w, h, d, c) =>
{
// function helper(o, x, y, z, w, h, d, c){
var material = new THREE.MeshLambertMaterial(new { color = c });
var geometry = new THREE.CubeGeometry(w, h, d, 1, 1, 1);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x + (w / 2);
mesh.position.y = y - (h / 2);
mesh.position.z = z + (d / 2);
o.add(mesh);
};
#endregion
#region buildStar
Action<THREE.Object3D, int> buildStar =
(star, state) =>
{
#region dear JSC, please start supporting switch!
if (state == 0)
{
helper(star, 0, 0, 0, 1, 1, 1, 0xffffff);
}
else if (state == 1)
{
helper(star, 1, 0, 0, 1, 1, 1, 0xffffff);
helper(star, -1, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 0, 1, 0, 1, 1, 1, 0xffffff);
helper(star, 0, -1, 0, 1, 1, 1, 0xffffff);
}
else if (state == 2)
{
helper(star, 1, 0, 0, 2, 1, 1, 0xffffff);
helper(star, -2, 0, 0, 2, 1, 1, 0xffffff);
helper(star, 0, 2, 0, 1, 2, 1, 0xffffff);
helper(star, 0, -1, 0, 1, 2, 1, 0xffffff);
}
else if (state == 3)
{
helper(star, 0, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 2, 0, 0, 2, 1, 1, 0xffffff);
helper(star, -3, 0, 0, 2, 1, 1, 0xffffff);
helper(star, 0, 3, 0, 1, 2, 1, 0xffffff);
helper(star, 0, -2, 0, 1, 2, 1, 0xffffff);
}
else if (state == 4)
{
helper(star, 0, 3, 0, 1, 1, 1, 0xffffff);
helper(star, 2, 2, 0, 1, 1, 1, 0xffffff);
helper(star, 3, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 2, -2, 0, 1, 1, 1, 0xffffff);
helper(star, 0, -3, 0, 1, 1, 1, 0xffffff);
helper(star, -2, -2, 0, 1, 1, 1, 0xffffff);
helper(star, -3, 0, 0, 1, 1, 1, 0xffffff);
helper(star, -2, 2, 0, 1, 1, 1, 0xffffff);
}
else if (state == 4)
{
helper(star, 2, 0, 0, 1, 1, 1, 0xffffff);
helper(star, -2, 0, 0, 1, 1, 1, 0xffffff);
helper(star, 0, 2, 0, 1, 1, 1, 0xffffff);
helper(star, 0, -2, 0, 1, 1, 1, 0xffffff);
}
#endregion
};
#endregion
var r = new Random();
Func<f> Math_random = () => r.NextFloat();
var stars = new List<List<THREE.Object3D>>();
#region init
var camera = new THREE.PerspectiveCamera(45,
Native.window.Width / Native.window.Height, .1f, 10000);
camera.position.z = 30;
camera.position.x = 0;
camera.position.y = 0;
var scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x003366, 0.0095f);
#region POPTART
var poptart = new THREE.Object3D();
// object x y z w h d color
helper(poptart, 0, -2, -1, 21, 14, 3, 0x222222);
helper(poptart, 1, -1, -1, 19, 16, 3, 0x222222);
helper(poptart, 2, 0, -1, 17, 18, 3, 0x222222);
helper(poptart, 1, -2, -1.5f, 19, 14, 4, 0xffcc99);
helper(poptart, 2, -1, -1.5f, 17, 16, 4, 0xffcc99);
helper(poptart, 2, -4, 2, 17, 10, .6f, 0xff99ff);
helper(poptart, 3, -3, 2, 15, 12, .6f, 0xff99ff);
helper(poptart, 4, -2, 2, 13, 14, .6f, 0xff99ff);
helper(poptart, 4, -4, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 9, -3, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 12, -3, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 16, -5, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 8, -7, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 5, -9, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 9, -10, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 3, -11, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 7, -13, 2, 1, 1, .7f, 0xff3399);
helper(poptart, 4, -14, 2, 1, 1, .7f, 0xff3399);
poptart.position.x = -10.5f;
poptart.position.y = 9;
scene.add(poptart);
#endregion
#region FEET
var feet = new THREE.Object3D();
helper(feet, 0, -2, .49f, 3, 3, 1, 0x222222);
helper(feet, 1, -1, .49f, 3, 3, 1, 0x222222);
helper(feet, 1, -2, -.01f, 2, 2, 2, 0x999999);
helper(feet, 2, -1, -.01f, 2, 2, 2, 0x999999);
helper(feet, 6, -2, -.5f, 3, 3, 1, 0x222222);
helper(feet, 6, -2, -.5f, 4, 2, 1, 0x222222);
helper(feet, 7, -2, -.99f, 2, 2, 2, 0x999999);
helper(feet, 16, -3, .49f, 3, 2, 1, 0x222222);
helper(feet, 15, -2, .49f, 3, 2, 1, 0x222222);
helper(feet, 15, -2, -.01f, 2, 1, 2, 0x999999);
helper(feet, 16, -3, -.01f, 2, 1, 2, 0x999999);
helper(feet, 21, -3, -.5f, 3, 2, 1, 0x222222);
helper(feet, 20, -2, -.5f, 3, 2, 1, 0x222222);
helper(feet, 20, -2, -.99f, 2, 1, 2, 0x999999);
helper(feet, 21, -3, -.99f, 2, 1, 2, 0x999999);
feet.position.x = -12.5f;
feet.position.y = -6;
scene.add(feet);
#endregion
#region TAIL
var tail = new THREE.Object3D();
helper(tail, 0, 0, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 1, -1, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 2, -2, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 3, -3, -.25f, 4, 3, 1.5f, 0x222222);
helper(tail, 1, -1, -.5f, 2, 1, 2, 0x999999);
helper(tail, 2, -2, -.5f, 2, 1, 2, 0x999999);
helper(tail, 3, -3, -.5f, 2, 1, 2, 0x999999);
helper(tail, 4, -4, -.5f, 2, 1, 2, 0x999999);
tail.position.x = -16.5f;
tail.position.y = 2;
scene.add(tail);
#endregion
#region FACE
var face = new THREE.Object3D();
helper(face, 2, -3, -3, 12, 9, 4, 0x222222);
helper(face, 0, -5, 0, 16, 5, 1, 0x222222);
helper(face, 1, -1, 0, 4, 10, 1, 0x222222);
helper(face, 11, -1, 0, 4, 10, 1, 0x222222);
helper(face, 3, -11, 0, 10, 2, 1, 0x222222);
helper(face, 2, 0, 0, 2, 2, 1, 0x222222);
helper(face, 4, -2, 0, 2, 2, 1, 0x222222);
helper(face, 12, 0, 0, 2, 2, 1, 0x222222);
helper(face, 10, -2, 0, 2, 2, 1, 0x222222);
helper(face, 1, -5, .5f, 14, 5, 1, 0x999999);
helper(face, 3, -4, .5f, 10, 8, 1, 0x999999);
helper(face, 2, -1, .5f, 2, 10, 1, 0x999999);
helper(face, 12, -1, .5f, 2, 10, 1, 0x999999);
helper(face, 4, -2, .5f, 1, 2, 1, 0x999999);
helper(face, 5, -3, .5f, 1, 1, 1, 0x999999);
helper(face, 11, -2, .5f, 1, 2, 1, 0x999999);
helper(face, 10, -3, .5f, 1, 1, 1, 0x999999);
//Eyes
helper(face, 4, -6, .6f, 2, 2, 1, 0x222222);
helper(face, 11, -6, .6f, 2, 2, 1, 0x222222);
helper(face, 3.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff);
helper(face, 10.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff);
//MOUTH
helper(face, 5, -10, .6f, 7, 1, 1, 0x222222);
helper(face, 5, -9, .6f, 1, 2, 1, 0x222222);
helper(face, 8, -9, .6f, 1, 2, 1, 0x222222);
helper(face, 11, -9, .6f, 1, 2, 1, 0x222222);
//CHEEKS
helper(face, 2, -8, .6f, 2, 2, .91f, 0xff9999);
helper(face, 13, -8, .6f, 2, 2, .91f, 0xff9999);
face.position.x = -.5f;
face.position.y = 4;
face.position.z = 4;
scene.add(face);
#endregion
#region RAINBOW
var rainbow = new THREE.Object3D();
for (var c = 0; c < numRainChunks - 1; c++)
{
var yOffset = 8;
if (c % 2 == 1) yOffset = 7;
var xOffset = (-c * 8) - 16.5f;
helper(rainbow, xOffset, yOffset, 0, 8, 3, 1, 0xff0000);
helper(rainbow, xOffset, yOffset - 3, 0, 8, 3, 1, 0xff9900);
helper(rainbow, xOffset, yOffset - 6, 0, 8, 3, 1, 0xffff00);
helper(rainbow, xOffset, yOffset - 9, 0, 8, 3, 1, 0x33ff00);
helper(rainbow, xOffset, yOffset - 12, 0, 8, 3, 1, 0x0099ff);
helper(rainbow, xOffset, yOffset - 15, 0, 8, 3, 1, 0x6633ff);
}
scene.add(rainbow);
#endregion
#region rainChunk
var rainChunk = new THREE.Object3D();
helper(rainChunk, -16.5f, 7, 0, 8, 3, 1, 0xff0000);
helper(rainChunk, -16.5f, 4, 0, 8, 3, 1, 0xff9900);
helper(rainChunk, -16.5f, 1, 0, 8, 3, 1, 0xffff00);
helper(rainChunk, -16.5f, -2, 0, 8, 3, 1, 0x33ff00);
helper(rainChunk, -16.5f, -5, 0, 8, 3, 1, 0x0099ff);
helper(rainChunk, -16.5f, -8, 0, 8, 3, 1, 0x6633ff);
rainChunk.position.x -= (8 * (numRainChunks - 1));
scene.add(rainChunk);
#endregion
#region stars
for (var state = 0; state < 6; state++)
{
stars.Add(new List<THREE.Object3D>());
for (var c = 0; c < numStars; c++)
{
var star = new THREE.Object3D();
star.position.x = Math_random() * 200 - 100;
star.position.y = Math_random() * 200 - 100;
star.position.z = Math_random() * 200 - 100;
buildStar(star, state);
scene.add(star);
stars[state].Add(star);
}
}
#endregion
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.z = 1000;
scene.add(pointLight);
#endregion
#region IsDisposed
Dispose = delegate
{
if (IsDisposed)
return;
IsDisposed = true;
page_song.pause();
page_song2.pause();
container.Orphanize();
};
#endregion
Native.window.onframe +=
delegate
{
f delta = clock.ElapsedMilliseconds * 0.001f;
clock.Restart();
if (running) deltaSum += delta;
if (deltaSum > .07)
{
deltaSum = deltaSum % .07f;
frame = (frame + 1) % 12;
for (var c = 0; c < numStars; c++)
{
var tempX = stars[5][c].position.x;
var tempY = stars[5][c].position.y;
var tempZ = stars[5][c].position.z;
for (var state = 5; state > 0; state--)
{
var star = stars[state][c];
var star2 = stars[state - 1][c];
star.position.x = star2.position.x - 8;
star.position.y = star2.position.y;
star.position.z = star2.position.z;
if (star.position.x < -100)
{
star.position.x += 200;
star.position.y = Math_random() * 200 - 100;
star.position.z = Math_random() * 200 - 100;
}
}
stars[0][c].position.x = tempX;
stars[0][c].position.y = tempY;
stars[0][c].position.z = tempZ;
}
#region dear JSC, please start supporting switch!
if (frame == 0)
{
face.position.x++;
feet.position.x++;
}
else if (frame == 1)
{
face.position.y--;
feet.position.x++;
feet.position.y--;
poptart.position.y--;
rainbow.position.x -= 9;
rainChunk.position.x += (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 2)
{
feet.position.x--;
}
else if (frame == 3)
{
face.position.x--;
feet.position.x--;
rainbow.position.x += 9;
rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 4)
{
face.position.y++;
}
else if (frame == 5)
{
poptart.position.y++;
feet.position.y++;
rainbow.position.x -= 9;
rainChunk.position.x += (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 6)
{
face.position.x++;
feet.position.x++;
}
else if (frame == 7)
{
poptart.position.y--;
face.position.y--;
feet.position.x++;
feet.position.y--;
rainbow.position.x += 9;
rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 8)
{
feet.position.x--;
}
else if (frame == 9)
{
face.position.x--;
feet.position.x--;
rainbow.position.x -= 9;
rainChunk.position.x += (8 * (numRainChunks - 1)) - 1;
}
else if (frame == 10)
{
face.position.y++;
}
else if (frame == 11)
{
poptart.position.y++;
feet.position.y++;
rainbow.position.x += 9;
rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1;
}
#endregion
}
camera.position.x += (mouseX - camera.position.x) * .005f;
camera.position.y += (-mouseY - camera.position.y) * .005f;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
#region AtResize
Action AtResize = delegate
{
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
#region requestFullscreen
Native.document.body.ondblclick +=
delegate
{
if (IsDisposed)
return;
// http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
Native.document.body.requestFullscreen();
};
#endregion
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// https://3dwarehouse.sketchup.com/model.html?id=e78dca4863e8572d86ea4fa6bd93bc43
// https://3dwarehouse.sketchup.com/model.html?id=38d1045b8de1cf12b08e958a32ef3184
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
// scene
var scene = new THREE.Scene();
//var ambient = new THREE.AmbientLight(0x101030);
//// addTrace?
//scene.add(ambient);
// should jsc package c# source code along here for code lense like peeking?
new THREE.AmbientLight(0x101030).AttachTo(scene);
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
// why is idl showing 110?
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
light.AttachTo(scene);
{
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
var plane = new THREE.Mesh(
planeGeometry,
material: new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.receiveShadow = true;
var ZeFloor = new THREE.Object3D();
plane.AttachTo(ZeFloor);
ZeFloor.rotation.x = -Math.PI / 2;
ZeFloor.scale.set(10, 10, 10);
ZeFloor.AttachTo(scene);
}
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
//var mouseX = 0;
//var mouseY = 0;
//var st = new Stopwatch();
//st.Start();
//Native.window.document.onmousemove +=
// e =>
// {
// mouseX = e.CursorX - Native.window.Width / 2;
// mouseY = e.CursorY - Native.window.Height / 2;
// };
var camera = new THREE.PerspectiveCamera(
//40,
20,
//10,
Native.window.aspect, 2,
// how far out do we want to zoom?
200000
//9000
);
camera.position.set(-1200, 800, -3200);
camera.AttachTo(scene);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Native.window.onframe +=
delegate
{
//oo.WithEach(
// x =>
// x.rotation.y = (st.ElapsedMilliseconds + mouseX * 100) * 0.00001
//);
//camera.position.x += (mouseX - camera.position.x) * .05;
//camera.position.y += (-mouseY - camera.position.y) * .05;
//camera.lookAt(scene.position);
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(window.Width, window.Height);
};
#endregion
#region Comanche
new Comanche().Source.Task.ContinueWithResult(
Comanche =>
{
Comanche.position.y = 200;
//dae.position.z = 280;
Comanche.AttachTo(scene);
//scene.add(dae);
oo.Add(Comanche);
// wont do it
//dae.castShadow = true;
// http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
//var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
//helper.update();
//// If you want a visible bounding box
//scene.add(helper);
Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
Comanche.scale.set(0.5, 0.5, 0.5);
//helper.scale.set(0.5, 0.5, 0.5);
var sw = Stopwatch.StartNew();
Native.window.onframe += delegate
{
//dae.children[0].children[0].children.Last().al
//dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
//dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
//rotation.y = sw.ElapsedMilliseconds * 0.01;
Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001;
//dae.children[0].children[0].children.Last().app
};
}
);
#endregion
//#region ZeProperties
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
//#endregion
//f.treeView1.Nodes.Add("controls : " + typeof(THREE.OrbitControls)).Tag = controls;
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://threejs.org/examples/#webgl_postprocessing_godrays
// view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var sunPosition = new THREE.Vector3(0, 1000, -1000);
var screenSpacePosition = new THREE.Vector3();
var mouseX = 0;
var mouseY = 0;
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
//var postprocessing = { enabled : true };
var orbitRadius = 200;
var bgColor = 0x000511;
var sunColor = 0xffee00;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
//
var materialDepth = new THREE.MeshDepthMaterial(new { });
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var loader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
loader.load(
new Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
// sphere
var geo = new THREE.SphereGeometry(1, 20, 10);
var sphereMesh = new THREE.Mesh(geo, materialScene);
var sc = 20;
sphereMesh.scale.set(sc, sc, sc);
scene.add(sphereMesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setClearColor(bgColor);
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.autoClear = false;
renderer.sortObjects = false;
var postprocessing_scene = new THREE.Scene();
var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000);
postprocessing_camera.position.z = 100;
postprocessing_scene.add(postprocessing_camera);
var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat };
var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
// investigate further for now.
// pars.format = THREE.LuminanceFormat;
// I would have this quarter size and use it as one of the ping-pong render
// targets but the aliasing causes some temporal flickering
var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Aggressive downsize god-ray ping-pong render targets to minimize cost
var w = Native.window.Width / 4;
var h = Native.window.Height / 4;
var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars);
var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars);
// god-ray shaders
// X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl
// these are special <script src="js/ShaderGodRays.js"></script>
var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic;
var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms);
var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayGenUniforms,
vertexShader = godraysGenShader.vertexShader,
fragmentShader = godraysGenShader.fragmentShader
});
var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic;
var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms);
var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayCombineUniforms,
vertexShader = godraysCombineShader.vertexShader,
fragmentShader = godraysCombineShader.fragmentShader
});
var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic;
var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms);
var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godraysFakeSunUniforms,
vertexShader = godraysFakeSunShader.vertexShader,
fragmentShader = godraysFakeSunShader.fragmentShader
});
postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor);
postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor);
postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75;
var postprocessing_quad = new THREE.Mesh(
new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height),
postprocessing_materialGodraysGenerate
);
postprocessing_quad.position.z = -9900;
postprocessing_scene.add(postprocessing_quad);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
//var planeMaterial = new THREE.MeshLambertMaterial(
// new
// {
// //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src),
// color = 0xA26D41
// //color = 0xff0000
// }
//);
//planeMaterial.map.repeat.x = 300;
//planeMaterial.map.repeat.y = 300;
//planeMaterial.map.wrapS = THREE.RepeatWrapping;
//planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.position.y = -.5f * 100;
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
//scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region Comanche
new Comanche().Source.Task.ContinueWithResult(
Comanche =>
{
Comanche.position.y = 200;
//dae.position.z = 280;
Comanche.AttachTo(scene);
//scene.add(dae);
//oo.Add(Comanche);
// wont do it
//dae.castShadow = true;
// http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
//var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
//helper.update();
//// If you want a visible bounding box
//scene.add(helper);
Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
Comanche.scale.set(0.5, 0.5, 0.5);
//helper.scale.set(0.5, 0.5, 0.5);
var s2w = Stopwatch.StartNew();
Native.window.onframe += delegate
{
//dae.children[0].children[0].children.Last().al
//dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
//dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
//rotation.y = sw.ElapsedMilliseconds * 0.01;
Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001;
//dae.children[0].children[0].children.Last().app
};
}
);
#endregion
var sw = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// Show Details Severity Code Description Project File Line
//Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238
Native.window.onframe +=
delegate
{
//var time = IDate.now() / 4000;
var time = sw.ElapsedMilliseconds / 4000.0;
sphereMesh.position.x = orbitRadius * Math.Cos(time);
sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100;
//controls.center.copy(blendMesh.position);
//controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position.x += (mouseX - camera.position.x) * 0.036;
//camera.position.y += (-(mouseY) - camera.position.y) * 0.036;
//camera.lookAt(scene.position);
// Find the screenspace position of the sun
screenSpacePosition.copy(sunPosition).project(camera);
screenSpacePosition.x = (screenSpacePosition.x + 1) / 2;
screenSpacePosition.y = (screenSpacePosition.y + 1) / 2;
// Give it to the god-ray and sun shaders
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
// -- Draw sky and sun --
// Clear colors and depths, will clear to sky color
renderer.clearTarget(postprocessing_rtTextureColors, true, true, false);
// Sun render. Runs a shader that gives a brightness based on the screen
// space distance to the sun. Not very efficient, so i make a scissor
// rectangle around the suns position to avoid rendering surrounding pixels.
var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader
var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected
screenSpacePosition.x *= Native.window.Width;
screenSpacePosition.y *= Native.window.Height;
renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH);
renderer.enableScissorTest(true);
postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors);
renderer.enableScissorTest(false);
// -- Draw scene objects --
// Colors
scene.overrideMaterial = null;
renderer.render(scene, camera, postprocessing_rtTextureColors);
// Depth
scene.overrideMaterial = materialDepth;
renderer.render(scene, camera, postprocessing_rtTextureDepth, true);
// -- Render god-rays --
// Maximum length of god-rays (in texture space [0,1]X[0,1])
var filterLen = 1.0;
// Samples taken by filter
var TAPS_PER_PASS = 6.0;
// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
// would start with a small filter support and grow to large. however
// the large-to-small order produces less objectionable aliasing artifacts that
// appear as a glimmer along the length of the beams
// pass 1 - render into first ping-pong target
var pass = 1.0;
var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// pass 2 - render into second ping-pong target
pass = 2.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1);
// pass 3 - 1st RT
pass = 3.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// final pass - composite god-rays onto colors
postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors;
postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine;
renderer.render(postprocessing_scene, postprocessing_camera);
postprocessing_scene.overrideMaterial = null;
};
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// what are we looking at?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 1000);
camera.position.z = 300;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var cube = new THREE.CubeGeometry(0.5,0.5,0.5);
var material = new THREE.MeshBasicMaterial(new
{
color = new THREE.Color(0xADD8E6),
});
var obj = new THREE.Object3D();
for (var x = 0; x < 100; x++)
{
for (var y = 0; y < 100; y++)
{
for (var zz = 0; zz < 15; zz++)
{
var mesh1 = new THREE.Mesh(cube, material);
mesh1.position.x = x;
mesh1.position.y = y;
mesh1.position.z = zz;
obj.add(mesh1);
}
}
}
//var mesh1 = new THREE.Mesh(cube, material);
//mesh1.position.x = 1;
//mesh1.position.y = 1;
//mesh1.position.z = 1;
//obj.add(mesh1);
scene.add(obj);
var z = camera.position.z;
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
Native.window.onframe +=
e =>
{
//if (this.canvas.parentNode == null)
// return;
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
obj.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
renderer.setSize();
};
}
// no animation no more?
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page = null)
{
// 20150527 i see a red blob. broken?
var sw = Stopwatch.StartNew();
// X:\jsc.svn\examples\javascript\synergy\webgl\WebGLMD2MorphtargetExample\WebGLMD2MorphtargetExample\Application.cs
Console.WriteLine("before three");
// fails with gallery? why?
//Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
Console.WriteLine("InitializeContent");
// http://oos.moxiecode.com/js_webgl/md5_test/
var oldTime = 0L;
var cameraTarget = new THREE.Vector3 { x = 0, y = 300, z = 0 };
var positionVector = new THREE.Vector3();
var lookVector = new THREE.Vector3();
var lastframe = 0;
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1000, 5000);
var camera = new THREE.PerspectiveCamera(50, Native.window.aspect, 1, 10000);
camera.position.z = 800;
camera.position.y = 100;
camera.lookAt(scene.position);
scene.add(camera);
// floor
var plane = new THREE.PlaneGeometry(10000, 10000, 50, 50);
var floorMaterial = new THREE.MeshBasicMaterial(new { wireframe = true, color = 0x333333 });
var floor = new THREE.Mesh(plane, floorMaterial);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
// renderer
var renderer = new THREE.WebGLRenderer(new { antialias = true });
//renderer.setClearColorHex(0x000000);
renderer.domElement.AttachToDocument();
// 0200001f WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2
// script: error JSC1000: unsupported flow detected, try to simplify.
//Assembly V:\WebGLBossHarvesterByOutsideOfSociety.Application.exe
//DeclaringType WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2,
//OwnerMethod <.ctor > b__5
//Offset 005b
// did the problem just dissapear?
var controls = new THREE.OrbitControls(camera, renderer.domElement);
#region harvester_md5mesh
new THREE.JSONLoader().load(
new WebGLBossHarvesterByOutsideOfSociety.Models.harvester_md5mesh().Content.src,
(Action<dynamic>)
(geometry =>
{
Console.WriteLine("geometry ready!");
//console.log("Number of bones: "+geometry.bones.length);
var material = new THREE.MeshBasicMaterial(new
{
color = 0xffffff,
wireframe = true,
opacity = 0.25,
transparent = true,
skinning = true
});
object geometry_object = geometry;
var skin = new THREE.SkinnedMesh(geometry_object, material);
scene.add(skin);
object geometry_animation = geometry.animation;
//THREE.AnimationHandler.add(geometry_animation);
//var animation = new THREE.Animation(skin, "walk1");
//animation.play();
skin.rotation.x = -Math.PI / 2;
skin.rotation.z = -Math.PI / 2;
// view-source:http://threejs.org/examples/webgl_animation_skinning_morph.html
var boneArray = new Dictionary<int, THREE.Mesh>();
var boneContainer = new THREE.Object3D();
boneContainer.rotation.x = -Math.PI / 2;
boneContainer.rotation.z = -Math.PI / 2;
scene.add(boneContainer);
var index = 0;
var pmaterial = new THREE.MeshPhongMaterial(new { color = 0xff0000 });
//for (var b = 1; b != skin.bones.Length; b++)
//{
// var bone = skin.bones[b];
// var nc = bone.children.Length;
// for (var c = 0; c != nc; c++)
// {
// var child = bone.children[c];
// var size = Math.Min(child.position.length() * 0.05, 8);
// var cylinder = new THREE.CylinderGeometry(size, 0.1, child.position.length(), 6);
// // ERROR: Matrix's .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code.
// cylinder.applyMatrix(
// new THREE.Matrix4().makeRotationFromEuler(
// new THREE.Euler(Math.PI / 2, 0, 0)
// )
// );
// cylinder.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0, 0, 0.5 * child.position.length())));
// var mesh = new THREE.Mesh(cylinder, pmaterial);
// boneArray[child.id] = mesh;
// boneContainer.add(mesh);
// }
//}
#region render
Native.window.onframe += delegate
{
Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null);
var time = Date_now();
double delta = time - oldTime;
if (oldTime == 0)
{
delta = 1000 / 60.0;
}
oldTime = time;
THREE.AnimationHandler.update(delta / 1000.0);
// does not exist?
//for (var b = 1; b != skin.bones.Length; b++)
//{
// var bone = skin.bones[b];
// var nc = bone.children.Length;
// for (var c = 0; c != nc; c++)
// {
// var child = bone.children[c];
// var child_bone = (THREE.Bone)(object)child;
// var id = child.id;
// var mesh = boneArray[id];
// positionVector.getPositionFromMatrix(child_bone.skinMatrix);
// mesh.position.copy(positionVector);
// var child_parent_bone = (THREE.Bone)(object)child.parent;
// lookVector.getPositionFromMatrix(child_parent_bone.skinMatrix);
// mesh.lookAt(lookVector);
// }
//}
boneContainer.position.z = skin.position.z;
//var frame = (int)Math.Floor(animation.currentTime * 24.0);
var frame = (int)Math.Floor(sw.ElapsedMilliseconds * 24.0);
if (frame >= 0 && lastframe > frame)
{
skin.position.z += 304.799987793; // got that from the root bone, total movement of one walk cycle
}
lastframe = frame;
var speed = delta * 0.131;
cameraTarget.z += speed;
if (skin.position.z > floor.position.z + 1000.0)
{
floor.position.z += 1000.0;
};
//camera.position.x = 800.0 * Math.Sin(time / 3000.0);
//camera.position.z = cameraTarget.z + 800.0 * Math.Cos(time / 3000.0);
//camera.lookAt(cameraTarget);
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
#endregion
}
)
);
#endregion
//var harvester_src = new WebGLBossHarvesterByOutsideOfSociety.Models.harvester().Content.src;
//Console.WriteLine("before harvester " + new { harvester_src });
//loader.load(harvester_src, harvesterLoaded);
// lights
var pointLight = new THREE.PointLight(0xffffff, 1.0, 0);
pointLight.AttachTo(camera);
#region AtResize
Action AtResize = delegate
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
Console.WriteLine("renderer ready!");
//#region onmousedown
//Native.document.onmousedown +=
// e =>
// {
// if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
// {
// if (Native.document.pointerLockElement == Native.document.body)
// {
// // cant requestFullscreen while pointerLockElement
// Console.WriteLine("exitPointerLock");
// Native.document.exitPointerLock();
// //Native.document.exitFullscreen();
// return;
// }
// Console.WriteLine("requestFullscreen");
// //Native.document.body.requestFullscreen();
// Native.document.body.requestPointerLock();
// return;
// }
// };
//#endregion
#region ZeProperties
var ze = new ZeProperties();
ze.Show();
ze.treeView1.Nodes.Clear();
ze.Add(() => renderer);
ze.Add(() => controls);
ze.Add(() => scene);
ze.Left = 0;
#endregion
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
onMouseDownPosition = new THREE.Vector2();
//camera = new THREE.PerspectiveCamera(
// 45,
// Native.window.aspect,
// 1,
// 1000
// //2000
// );
//camera.position.z = 400;
camera = new THREE.PerspectiveCamera(40, Native.window.Width / Native.window.Height, 1, 10000);
camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.position.y = radious * Math.Sin(phi * Math.PI / 360);
camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var obj = new THREE.Object3D();
var buttomCylinder1 = new THREE.Mesh(
new THREE.CylinderGeometry(50, 50, 50, 32),
new THREE.MeshPhongMaterial(
new
{
specular = new THREE.Color(0xa0a0a0),
color = new THREE.Color(0xa0a0a0),
})
);
buttomCylinder1.rotation.x = - 90 * Math.PI / 180;
//buttomCylinder1.position.x = 0;
//buttomCylinder1.position.y = 0;
//buttomCylinder1.position.z = 0;
obj.add(buttomCylinder1);
scene.add(obj);
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize(Native.window.Width, Native.window.Height);
this.canvas = (IHTMLCanvas)renderer.domElement;
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
camera.lookAt(scene.position);
scene.add(obj);
//var plane = new THREE.Mesh(new THREE.Plane(1000, 1000));
//plane.rotation.x = -90 * Math.PI / 180;
//scene.add(plane);
#region onmousedown
this.canvas.onmousedown +=
e =>
{
e.preventDefault();
isMouseDown = true;
onMouseDownTheta = theta;
onMouseDownPhi = phi;
onMouseDownPosition.x = e.CursorX;
onMouseDownPosition.y = e.CursorY;
};
#endregion
this.canvas.onmousewheel +=
e =>
{
radious -= e.WheelDirection;
camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.position.y = radious * Math.Sin(phi * Math.PI / 360);
camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.updateMatrix();
};
#region onmousemove
this.canvas.onmousemove +=
e =>
{
e.preventDefault();
if (isMouseDown)
{
theta = -((e.CursorX - onMouseDownPosition.x) * 0.5) + onMouseDownTheta;
phi = ((e.CursorX - onMouseDownPosition.y) * 0.5) + onMouseDownPhi;
phi = Math.Min(360, Math.Max(0, phi));
camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.position.y = radious * Math.Sin(phi * Math.PI / 360);
camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360);
camera.updateMatrix();
}
};
#endregion
this.canvas.onmouseup += e =>
{
e.preventDefault();
isMouseDown = false;
onMouseDownPosition.x = e.CursorX - onMouseDownPosition.x;
onMouseDownPosition.y = e.CursorY - onMouseDownPosition.y;
};
// could we
Native.window.onframe +=
e =>
{
renderer.clear();
camera.updateProjectionMatrix();
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
renderer.setSize();
};
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst /D b:
// subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web
// subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web
// what if we want to do subst in another winstat or session?
// ColladaLoader: Empty or non-existing file (assets/ChromeStereoLightAnimation/S6Edge.dae)
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://stemkoski.github.io/Three.js/Shadow.html
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#region += Launched chrome.app.window
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
//chrome.runtime.UpdateAvailable += delegate
//{
// new chrome.Notification(title: "UpdateAvailable");
//};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "ChromeStereoLightAnimation");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.padding = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// Severity Code Description Project File Line
//Error CS0201 Only assignment, call, increment, decrement, and new object expressions can be used as a statement ChromeStereoLightAnimation Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\Application.cs 187
//new Action<int>(
var camera0 = default(THREE.PerspectiveCamera);
foreach (var y in
from eyeid in new[] { 0, 1 }
select (Action)
delegate
{
var scene = new THREE.Scene();
var floorTexture = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets.checkerboard().src
//"images/checkerboard.jpg"
);
#region function init()
// SCENE
// CAMERA
float SCREEN_WIDTH = Native.window.Width / 2;
//float SCREEN_WIDTH = Native.screen.width / 2;
float SCREEN_HEIGHT = Native.window.Height;
var VIEW_ANGLE = 45;
float ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;
// RENDERER
// WebGLDeferredRenderer
var renderer = new THREE.WebGLRenderer(new { antialias = true });
//renderer.setSize((int)SCREEN_WIDTH, (int)SCREEN_HEIGHT);
renderer.domElement.AttachToDocument();
//renderer.domElement.style.SetLocation(Native.window.Width / 2 * (1 - eyeid), 0);
// EVENTS
// CONTROLS
// STATS
// LIGHT
//var light = new THREE.PointLight(0xffffff);
//light.position.set(0,250,0);
//scene.add(light);
////////////
// CUSTOM //
////////////
// must enable shadows on the renderer
renderer.shadowMapEnabled = true;
// SKYBOX/FOG
var skyBoxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyBoxMaterial = new THREE.MeshBasicMaterial(new { color = 0x9999ff, side = THREE.BackSide });
var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
// scene.add(skyBox);
scene.fog = new THREE.FogExp2(0x9999ff, 0.00025);
// "shadow cameras" show the light source and direction
// spotlight #1 -- yellow, dark shadow
var spotlight = new THREE.SpotLight(0xffff00);
spotlight.position.set(-60, 150, -30);
spotlight.shadowCameraVisible = true;
spotlight.shadowDarkness = 0.95;
spotlight.intensity = 2;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
scene.add(spotlight);
// spotlight #2 -- red, light shadow
var spotlight2 = new THREE.SpotLight(0xff0000);
//var spotlight2 = new THREE.SpotLight(0xffff00);
spotlight2.position.set(60, 150, -60);
scene.add(spotlight2);
spotlight2.shadowCameraVisible = true;
spotlight2.shadowDarkness = 0.70;
spotlight2.intensity = 2;
spotlight2.castShadow = true;
// THREE.WebGLProgram: gl.getProgramInfoLog() Pixel shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16).
for (int i = 0; i < 8; i++)
{
// spotlight #3 blue
var spotlight3 = new THREE.SpotLight(0x0000ff);
//var spotlight3 = new THREE.SpotLight(0x00ffff);
spotlight3.position.set(150 * i, 80, -100);
//spotlight3.shadowCameraVisible = true;
spotlight3.shadowDarkness = 0.95;
spotlight3.intensity = 2;
spotlight3.castShadow = true;
scene.add(spotlight3);
// change the direction this spotlight is facing
var lightTarget = new THREE.Object3D();
lightTarget.position.set(150 * i, 10, -100);
scene.add(lightTarget);
spotlight3.target = lightTarget;
}
// cube: mesh to cast shadows
#region castShadow
var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0x888888 });
var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial);
//cube.position.set(0, 50, 0);
cube0.position.set(0, 100, 0);
// Note that the mesh is flagged to cast shadows
cube0.castShadow = true;
scene.add(cube0);
// floor: mesh to receive shadows
// public static ImageUtilsType ImageUtils;
//var floorTexture = new THREE.ImageUtils.loadTexture("images/checkerboard.jpg");
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);
#endregion
// Note the change to Lambert material.
#region receiveShadow
var floorMaterial = new THREE.MeshLambertMaterial(new { map = floorTexture, side = THREE.DoubleSide });
//var floorGeometry = new THREE.PlaneGeometry(1000 * 8, 1000 * 8, 100, 100);
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100);
for (int i = 0; i < 8; i++)
{
var floor0 = new THREE.Mesh(floorGeometry, floorMaterial);
floor0.position.y = -0.5;
floor0.position.x = 1000 * i;
floor0.rotation.x = Math.PI / 2;
// Note the mesh is flagged to receive shadows
floor0.receiveShadow = true;
scene.add(floor0);
}
#endregion
// create "light-ball" meshes
var sphereGeometry = new THREE.SphereGeometry(10, 16, 8);
var darkMaterial = new THREE.MeshBasicMaterial(new { color = 0x000000 });
{
var wireframeMaterial = new THREE.MeshBasicMaterial(
new { color = 0xffff00, wireframe = true, transparent = true });
var shape = THREE.SceneUtils.createMultiMaterialObject(
sphereGeometry, new[] { darkMaterial, wireframeMaterial });
shape.position = spotlight.position;
scene.add(shape);
}
{
var wireframeMaterial = new THREE.MeshBasicMaterial(
new { color = 0xff0000, wireframe = true, transparent = true });
var shape = THREE.SceneUtils.createMultiMaterialObject(
sphereGeometry, new[] { darkMaterial, wireframeMaterial });
shape.position = spotlight2.position;
scene.add(shape);
}
//{
// var wireframeMaterial = new THREE.MeshBasicMaterial(
// new { color = 0x0000ff, wireframe = true, transparent = true });
// var shape = THREE.SceneUtils.createMultiMaterialObject(
// sphereGeometry, new[] { darkMaterial, wireframeMaterial });
// shape.position = spotlight3.position;
// scene.add(shape);
//}
#endregion
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0, 150, 400);
camera.lookAt(scene.position);
if (eyeid == 0)
{
camera0 = camera;
var controls = new THREE.OrbitControls(camera0, renderer.domElement);
//var controls = new THREE.OrbitControls(camera0, Native.document.body);
Native.window.onframe += delegate
{
renderer.render(scene, camera0);
controls.update();
//stats.update();
};
}
else
{
Native.window.onframe += delegate
{
camera.rotation.set(camera0.rotation.x, camera0.rotation.y, camera0.rotation.z);
camera.position.set(camera0.position.x, camera0.position.y, camera0.position.z);
// lets not add any stereo effect. as we may need to run in 360 mono mode anyway to gain speed?
//camera.translateX()
// scene is unique to renderer!!!!!
// we are doing everything twice for now.
renderer.render(scene, camera);
//controls.update();
//stats.update();
};
}
#region onresize
new { }.With(
async delegate
{
do
{
// allow webview to behave in S6 multiview mode
//SCREEN_WIDTH = Native.screen.width / 2;
SCREEN_WIDTH = Native.window.Width / 2;
//camera.aspect = Native.window.aspect;
camera.aspect = SCREEN_WIDTH / Native.window.Height;
camera.updateProjectionMatrix();
//renderer0.setSize(Native.window.Width / 2, Native.window.Height);
renderer.setSize((int)SCREEN_WIDTH, Native.window.Height);
//renderer0.domElement.style.SetLocation(Native.window.Width / 2 * eyeid, 0);
renderer.domElement.style.SetLocation((int)SCREEN_WIDTH * (1 - eyeid), 0);
}
while (await Native.window.async.onresize);
});
#endregion
}
)
y();
Console.WriteLine("do you see it?");
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// if we are running in a SYSTEM account
// the chrome no-sandbox only allows software renderer
// where we get 1 frame per sec.
// on older systems we may not get GL_OES_standard_derivatives
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
// ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
// or that system is just old as hell
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
//http://thematicmapping.org/playground/webgl/earth/
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222
// Earth params
var radius = 0.5;
//var segments = 32;
var segments = 128;
var rotation = 6;
var scene = new THREE.Scene();
locations = new ArrayList();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);
camera.position.z = 1.5;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
parent = new THREE.Object3D();
scene.add(parent);
#region sphere
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial(
new
{
map = new THREE.Texture().With(
async s =>
{
//0:75ms event: _2_no_clouds_4k_low view-source:36543
//Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
//Application Cache Progress event (2 of 2) 192.168.1.72/:1
//Application Cache Cached event 192.168.1.72/:1
//1:1018ms event: _2_no_clouds_4k_low done view-source:36543
//1:1019ms event: _2_no_clouds_4k view-source:36543
//event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
//1:16445ms event: _2_no_clouds_4k done
// ~ tilde to open css editor?
Console.WriteLine("event: _2_no_clouds_4k_low");
s.image = await new _2_no_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k_low done");
await 20000;
Console.WriteLine("event: _2_no_clouds_4k");
s.image = await new _2_no_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k done");
}
),
bumpMap = THREE.ImageUtils.loadTexture(
new elev_bump_4k().src
//new elev_bump_4k_low().src
),
// applies onyl to shaders to create the shadow
bumpScale = 0.001,
specularMap = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: water_4k_low");
s.image = await new water_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: water_4k_low done");
await 20000;
Console.WriteLine("event: water_4k");
s.image = await new water_4k();
s.needsUpdate = true;
Console.WriteLine("event: water_4k done");
}
),
//specular = new THREE.Color("grey")
specular = new THREE.Color(0xa0a0a0)
})
);
#endregion
// http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane
//sphere.rotation.y = rotation;
parent.rotation.y = rotation;
//sphere.position.x = 10;
//sphere.position.y = 10;
//sphere.position.z = 10;
//sphere.position.normalize();
//sphere.position.multiplyScalar(200);
parent.add(sphere);
//scene.add(sphere);
#region clouds
var clouds = new THREE.Mesh(
new THREE.SphereGeometry(
//radius + 0.003,
radius + 0.006,
segments, segments),
new THREE.MeshPhongMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(
// //new fair_clouds_4k().src
// new fair_clouds_4k_low().src
// ),
map = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: fair_clouds_4k_low");
s.image = await new fair_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k_low done");
await 20000;
Console.WriteLine("event: fair_clouds_4k");
s.image = await new fair_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k done");
}
),
transparent = true
})
);
//clouds.rotation.y = rotation;
parent.add(clouds);
//scene.add(clouds);
#endregion
var citiesData = new XElement("cities");
{
var cityH = new XElement("city");
cityH.Add(new XElement("name", "Tallinn"));
cityH.Add(new XElement("longitude", "24.7281"));
cityH.Add(new XElement("latitude", "59.4339"));
citiesData.Add(cityH);
}
{
var cityH = new XElement("city");
cityH.Add(new XElement("name", "London"));
cityH.Add(new XElement("longitude", "-0.116667"));
cityH.Add(new XElement("latitude", "51.5"));
citiesData.Add(cityH);
}
var shadowL = new ShadowLayout().AttachTo(Native.shadow);
page.dataHolder = citiesData;
#region Location on sphere
Action AddCities = async delegate
{
//var table = await this.GetAllCities();
//Console.WriteLine(table.Rows.Count.ToString());
//for (var r = 0; r < table.Rows.Count; r++)
//{
// var latitude = (double)table.Rows[r]["Latitude"];
// var longtitude = (double)table.Rows[r]["Longtitude"];
// addLocation(latitude, longtitude, radius, 0.001, parent, 6);
// Console.WriteLine(latitude.ToString());
// await 100;
//}
var elemList = citiesData.Elements();
Console.WriteLine(elemList.Count().ToString());
foreach (var i in elemList)
{
//Console.WriteLine(i.ToString());
//foreach (var t in i.Elements())
//{
// Console.WriteLine(t.ToString());
//}
//var l = i.Element("name");
//if (l == null)
//{
// Console.WriteLine("F**k");
//}
//else
//{
// Console.WriteLine(l.Value);
//}
//Console.WriteLine(i.Element("longitude"));
//Console.WriteLine(i.Element("latitude"));
var lat = i.Element("latitude");
if (lat != null)
{
Console.WriteLine("Latitude not null");
var latitude = Convert.ToDouble(lat.Value);
Console.WriteLine(latitude.ToString());
var longit = i.Element("longitude");
if (longit != null)
{
Console.WriteLine("Longitude not null");
var longtitude = Convert.ToDouble(longit.Value);
addLocation(latitude, longtitude, radius, 0.001, parent, 6);
Console.WriteLine(longtitude.ToString());
}
}
}
};
citiesData.Changed += (send, arg) =>
{
//if(arg.ObjectChange == XObjectChange.Value)
//{
//Console.WriteLine(citiesData);
//Console.WriteLine("Sender name "+((XAttribute)send).Name);
//Console.WriteLine("Sender val " + ((XAttribute)send).Value);
removeLocations();
AddCities();
//}
};
AddCities();
#endregion
var stars = new THREE.Mesh(
new THREE.SphereGeometry(90, 64, 64),
new THREE.MeshBasicMaterial(
new
{
map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
side = THREE.BackSide
})
);
scene.add(stars);
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachTo(shadowL.webGlCanvas);
this.canvas.style.SetLocation(0, 0);
// jsc, what pointers do we have in store?
this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;
var
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// //sphere.rotation.x,
// //sphere.rotation.y
//},
//clouds = new
//{
// //clouds.rotation.x,
// //clouds.rotation.y,
//},
CursorX = 0,
CursorY = 0
};
#region onmousedown
this.canvas.onmousedown +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
this.canvas.requestFullscreen();
this.canvas.requestPointerLock();
}
else
{
// movementX no longer works
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// sphere.rotation.x,
// sphere.rotation.y
//},
//clouds = new
//{
// clouds.rotation.x,
// clouds.rotation.y,
//},
e.CursorX,
e.CursorY
};
if (pointerLock)
{
// skip
}
else
{
e.CaptureMouse();
}
}
};
#endregion
var z = camera.position.z;
var sfx = new TestWebGLEarthShadowDomXML.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
{
autobuffer = true,
// this aint working
//loop = true
};
sfx.play();
//sfx.AttachToHead();
// http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/
this.canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 0.1 * e.WheelDirection;
z = z.Max(0.6).Min(4.5);
//Native.document.title = new { camera.position.z }.ToString();
};
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
this.canvas.onmousemove +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
if (pointerLock)
{
parent.rotation.x += 0.01 * e.movementY;
parent.rotation.y += 0.01 * e.movementX;
//sphere.rotation.x += 0.01 * e.movementY;
//sphere.rotation.y += 0.01 * e.movementX;
//clouds.rotation.x += 0.01 * e.movementY;
//clouds.rotation.y += 0.01 * e.movementX;
}
else
{
parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY);
parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX);
//sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
//sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);
//clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
//clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
}
// Native.document.title = new { e.movementX, e.movementY }.ToString();
}
};
#endregion
// could we
Native.window.onframe +=
e =>
{
if (this.canvas.parentNode == null)
{
return;
}
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
parent.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
{
renderer.setSize();
}
};
//new IStyle(this.canvas.css.before)
//{
// content = "'do a middle click to maximize the earth dashboard'",
// left = "1em",
// bottom = "1em",
// color = "white",
// position = IStyle.PositionEnum.absolute
//};
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page = null)
{
{ THREE.SkinnedMesh ref0; }
{ THREE.SpeedBlendCharacter ref0; }
// will skip DefineVersionInfoResource
//102c: 02:01:1e RewriteToAssembly error: System.NotSupportedException: Type 'xchrome.BCLImplementation.System.Net.Sockets.__TcpListener' was not completed.
#region AtFormCreated
FormStyler.AtFormCreated =
s =>
{
s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// this is working?
var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
};
#endregion
#if false
#region ChromeTCPServer
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
chrome.Notification.DefaultTitle = "WebGLYomotsuTPS";
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text,
AtFormCreated: FormStyler.AtFormCreated
);
return;
}
#endregion
#endif
var fov = 40;
#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
var player_model_objects = new THREE.Object3D();
var player_position_x = 0.0f;
var player_position_y = 0.0f;
var player_position_z = 0.0f;
var player_position_direction = 0;
var player_camera_speed = 300;
var player_camera_distance = 5;
var player_camera_x = 0.0f;
var player_camera_y = 0.0f;
var player_camera_z = 0.0f;
var player_motion = default(motion);
//var width = Native.window.Width;
//var height = Native.window.Height;
var clock = new Stopwatch();
clock.Start();
//var clock = new THREE.Clock();
var scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.05f);
scene.add(player_model_objects);
var camera = new THREE.PerspectiveCamera(fov,
Native.window.aspect,
//width / height,
1, 1000);
scene.add(camera);
#region light
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(1, 1, 1).normalize();
light.castShadow = true;
scene.add(light);
#endregion
var md2frames = new md2frames();
var moveState_moving = false;
var moveState_front = false;
var moveState_Backwards = false;
var moveState_left = false;
var moveState_right = false;
var moveState_speed = .1;
var moveState_angle = 0;
#region move
Action move = delegate
{
// if(player.model.motion !== 'run' && player.model.state === 'stand'){
// changeMotion('run');
//}
//if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){
// changeMotion('crwalk');
//}
var speed = moveState_speed;
//if(player.model.state === 'crstand'){speed *= .5;}
//if(player.model.state === 'freeze') {speed *= 0;}
var direction = moveState_angle;
if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right) { direction += 0; }
if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 45; }
if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 90; }
if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right) { direction += 135; }
if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right) { direction += 180; }
if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right) { direction += 225; }
if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 270; }
if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 315; }
player_model_objects.rotation.y = (float)(direction * Math.PI / 180);
player_position_x -= (float)(Math.Sin(direction * Math.PI / 180) * speed);
player_position_z -= (float)(Math.Cos(direction * Math.PI / 180) * speed);
};
#endregion
#region camera rotation
Action rotate = delegate { };
var pointer_x = 0f;
var pointer_y = 0f;
var oldPointerX = 0f;
var oldPointerY = 0f;
container.onmousemove +=
e =>
{
if (Native.document.pointerLockElement == container)
{
oldPointerX = 0;
oldPointerY = 0;
pointer_x = e.movementX * 0.01f;
pointer_y = -e.movementY * 0.01f;
rotate();
return;
}
pointer_x = (e.CursorX / Native.window.Width) * 2 - 1;
pointer_y = -(e.CursorY / Native.window.Height) * 2 + 1;
rotate();
};
container.onmouseup +=
e =>
{
rotate = delegate { };
Native.document.exitPointerLock();
};
container.onmousedown +=
e =>
{
oldPointerX = pointer_x;
oldPointerY = pointer_y;
rotate = delegate
{
player_camera_x += (oldPointerX - pointer_x) * player_camera_speed;
player_camera_y += (oldPointerY - pointer_y) * player_camera_speed;
if (player_camera_y > 150)
{
player_camera_y = 150;
}
if (player_camera_y < -150)
{
player_camera_y = -150;
}
moveState_angle = Convert.ToInt32(player_camera_x / 2) % 360;
oldPointerX = pointer_x;
oldPointerY = pointer_y;
};
Console.WriteLine("requestPointerLock");
container.requestPointerLock();
};
#endregion
var renderer = new THREE.WebGLRenderer();
//renderer.setSize(width, height);
renderer.setSize();
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.domElement.AttachTo(container);
#region create field
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var planeMaterial = new THREE.MeshLambertMaterial(
new
{
map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.bg().src),
color = 0xffffff
}
);
planeMaterial.map.repeat.x = 300;
planeMaterial.map.repeat.y = 300;
planeMaterial.map.wrapS = THREE.RepeatWrapping;
planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 0; i < 100; i++)
{
var ii = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial(
new
{
color = (Convert.ToInt32(0xffffff * random.NextDouble()))
}));
ii.position.x = i % 2 * 5 - 2.5f;
ii.position.y = .5f;
ii.position.z = -1 * i * 4;
ii.castShadow = true;
ii.receiveShadow = true;
meshArray.Add(ii);
scene.add(ii);
}
#endregion
//load converted md2 data
var material = new THREE.MeshPhongMaterial(
new
{
map = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets._1().src
),
ambient = 0x999999,
color = 0xffffff,
specular = 0xffffff,
shininess = 25,
morphTargets = true
}
);
var loader = new THREE.JSONLoader();
loader.load(
new global::WebGLYomotsuTPS.Design.droid().Content.src,
xgeometry =>
{
var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material);
md2meshBody.rotation.y = (float)(-Math.PI / 2);
md2meshBody.scale.set(.02, .02, .02);
md2meshBody.position.y = .5f;
md2meshBody.castShadow = true;
md2meshBody.receiveShadow = false;
#region player_motion
Action<motion> player_changeMotion = motion =>
{
Console.WriteLine(
new { motion, md2frames.run, md2frames.stand });
player_motion = motion;
// player.state = md2frames[motion][3].state;
var animMin = motion.min;
var animMax = motion.max;
var animFps = motion.fps;
md2meshBody.time = 0;
md2meshBody.duration = (int)(
1000 * ((animMax - animMin) / (double)animFps)
);
Native.document.title = new { animMin, animMax }.ToString();
md2meshBody.setFrameRange(animMin, animMax);
};
player_changeMotion(md2frames.stand);
#endregion
player_model_objects.add(md2meshBody);
#region onkeydown
Native.document.onkeydown +=
e =>
{
if (e.KeyCode == 67)
{
if (player_motion == md2frames.stand)
player_changeMotion(md2frames.crstand);
else if (player_motion == md2frames.crstand)
player_changeMotion(md2frames.stand);
}
else if (e.KeyCode == 87)
{
moveState_front = true;
moveState_Backwards = false;
}
else if (e.KeyCode == 83)
{
moveState_front = false;
moveState_Backwards = true;
}
else if (e.KeyCode == 65)
{
moveState_left = true;
moveState_right = false;
}
else if (e.KeyCode == 68)
{
moveState_left = false;
moveState_right = true;
}
var isStand = player_motion == md2frames.stand;
Console.WriteLine(
new { e.KeyCode, moveState_front, moveState_Backwards, isStand }
);
if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
if (player_motion == md2frames.stand)
player_changeMotion(md2frames.run);
else if (player_motion == md2frames.crstand)
player_changeMotion(md2frames.crwalk);
};
#endregion
#region onkeyup
Native.document.onkeyup +=
e =>
{
if (e.KeyCode == 87)
{
moveState_front = false;
}
else if (e.KeyCode == 83)
{
moveState_Backwards = false;
}
else if (e.KeyCode == 65)
{
moveState_left = false;
}
else if (e.KeyCode == 68)
{
moveState_right = false;
}
};
#endregion
#region loop
Native.window.onframe += delegate
{
if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
move();
else
if (player_motion == md2frames.run)
player_changeMotion(md2frames.stand);
else if (player_motion == md2frames.crwalk)
player_changeMotion(md2frames.crstand);
player_model_objects.position.x = player_position_x;
player_model_objects.position.y = player_position_y;
player_model_objects.position.z = player_position_z;
// camera rotate x
camera.position.x = (float)(player_position_x + player_camera_distance * Math.Sin((player_camera_x) * Math.PI / 360.0));
camera.position.z = (float)(player_position_z + player_camera_distance * Math.Cos((player_camera_x) * Math.PI / 360.0));
//camera rotate y
//camera.position.x = player.position.x + player.camera.distance * Math.cos( (player.camera.y) * Math.PI / 360 );
camera.position.y = (float)(player_position_y + player_camera_distance * Math.Sin((player_camera_y) * Math.PI / 360.0));
//camera.position.z = player.position.z + player.camera.distance * Math.cos( (player.camera.y) * Math.PI / 360 );
camera.position.y += 1;
//console.log(camera.position.z)
var vec3 = new THREE.Vector3(player_position_x, player_position_y, player_position_z);
camera.lookAt(vec3);
#region model animation
var delta = clock.ElapsedMilliseconds * 0.001;
clock.Restart();
var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe);
var isAction = player_motion.action;
var x = (isAction && !isEndFleame);
if (!isAction || x)
{
md2meshBody.updateAnimation(1000 * delta);
}
else if (player_motion.state == "freeze")
{
//dead...
}
else
{
player_changeMotion(player_motion);
}
#endregion
renderer.render(scene, camera);
};
#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.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100);
//camera.aspect = Native.Window.Width / Native.Window.Height;
//camera.updateProjectionMatrix();
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
#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
}
);
}
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hznosky.png" "/sdcard/oculus/360photos/"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web
// ColladaLoader: Empty or non-existing file (assets/Chrome360HZ/S6Edge.dae)
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#region += Launched chrome.app.window
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
//chrome.runtime.UpdateAvailable += delegate
//{
// new chrome.Notification(title: "UpdateAvailable");
//};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "Chrome360HZ");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 2048; // 6 faces, ?
const int cubefacesize = 512; // 6 faces, ?
var uizoom = 0.05;
var far = 0xfffff;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument();
pause.onchange += delegate
{
if (pause.@checked)
sw.Stop();
else
sw.Start();
};
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
// should we fix jsc to do a more correct IDL?
//var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
//directionalLight.position.set(0, 0, 1);
//scene.add(directionalLight);
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
renderer0.setClearColor(0xfffff, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
canvasNY.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
Native.body.onmousedown +=
async e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
return;
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
//e.CaptureMouse();
var release = e.Element.CaptureMouse();
await e.Element.async.onmouseup;
release();
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
Native.body.onmousemove +=
e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
{
Native.body.style.cursor = IStyle.CursorEnum.@default;
return;
}
e.preventDefault();
e.stopPropagation();
Native.body.style.cursor = IStyle.CursorEnum.move;
var pointerLock = canvas0 == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
oo.WithEach(
x =>
{
x.rotation.y += 0.006 * (e.CursorX - old.CursorX);
x.rotation.x += 0.006 * (e.CursorY - old.CursorY);
}
);
old = new
{
e.CursorX,
e.CursorY
};
}
};
#endregion
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
c.width = 3840;
c.height = 2160;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = "scale(" + suizoom + ")";
c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
var frame0 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var mesh = new THREE.Mesh(new THREE.SphereGeometry(far / 2, 50, 50),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
//new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src
//new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src
frame0.src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
#region fixup rotation
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
#endregion
scene.add(mesh);
//new IHTMLButton { }
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
if (dir == null)
return;
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
dir.WriteAllBytes("0000.png", f0);
// 3.7MB
// 3840x2160
};
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
//dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = Stopwatch.StartNew();
//Native.window.onframe += delegate
//{
// //dae.children[0].children[0].children.Last().al
// //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
// //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\WebGLGodRay.csproj"
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// could we get some film grain?
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(10, 10, 10);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
//var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 100;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
if (i % 2 == 0)
{
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
//blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
//blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
#endregion
#endif
}
}
#endregion
#region HZCannon
// "Z:\jsc.svn\examples\javascript\WebGL\HeatZeekerRTSOrto\HeatZeekerRTSOrto\HeatZeekerRTSOrto.csproj"
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
scene.add(cube);
}
);
#endregion
new Models.ColladaS6Edge().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = -(65 - 200);
var scale = 0.9;
// jsc, do we have ILObserver available yet?
dae.scale.x = scale;
dae.scale.y = scale;
dae.scale.z = scale;
#region onmousewheel
Native.body.onmousewheel +=
e =>
{
e.preventDefault();
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
dae.position.z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
//dae.position.z = dae.position.z.Max(-200).Min(200);
//Native.document.title = new { z }.ToString();
};
#endregion
//dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
dae.position.x = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 190.0;
dae.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 90.0;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
#region x
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
};
}
);
#endregion
Console.WriteLine("do you see it?");
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// what are we looking at?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 1000);
camera.position.z = 300;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var cube = new THREE.CubeGeometry(0.5, 0.5, 0.5);
var material = new THREE.MeshBasicMaterial(new
{
color = new THREE.Color(0xADD8E6),
});
var obj = new THREE.Object3D();
for (var x = 0; x < 100; x++)
{
for (var y = 0; y < 100; y++)
{
for (var zz = 0; zz < 15; zz++)
{
var mesh1 = new THREE.Mesh(cube, material);
mesh1.position.x = x;
mesh1.position.y = y;
mesh1.position.z = zz;
obj.add(mesh1);
}
}
}
//var mesh1 = new THREE.Mesh(cube, material);
//mesh1.position.x = 1;
//mesh1.position.y = 1;
//mesh1.position.z = 1;
//obj.add(mesh1);
scene.add(obj);
var z = camera.position.z;
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
Native.window.onframe +=
e =>
{
//if (this.canvas.parentNode == null)
// return;
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
obj.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
{
renderer.setSize();
}
};
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chromeequirectangularcameraexperiment
// "x:\util\android-sdk-windows\platform-tools\adb.exe" install -r "r:\jsc.svn\examples\javascript\WebGL\WebGLVRHZTeaser\WebGLVRHZTeaser\bin\Debug\staging\WebGLVRHZTeaser.ApplicationWebService\staging.apk\staging\apk\bin\WebGLVRHZTeaser.Activities-release.apk"
//I/Web Console(25108): 0ms NewInstanceConstructor restore fields.. at http://10.144.157.179:23222/view-source:50800
//I/Web Console(25108): THREE.WebGLRenderer at http://10.144.157.179:23222/view-source:90370
//E/Web Console(25108): Error creating WebGL context. at http://10.144.157.179:23222/view-source:90581
//E/Web Console(25108): Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null at http://10.144.157.179:23222/view-source:90585
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
#if false
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
chrome.Notification.DefaultTitle = "HZ";
chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
#endif
// https://code.google.com/p/chromium/issues/detail?id=483890
Native.document.body.style.margin = "0px";
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.style.backgroundColor = "black";
Native.document.body.Clear();
// what dto do if webgl not supported?
double SCREEN_WIDTH = Native.window.Width;
double SCREEN_HEIGHT = Native.window.Height;
#region scene
var scene = new THREE.Scene();
var clock = new THREE.Clock();
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,
-100000,
100000
);
cameraOrtho.position.z = 100;
sceneRenderTarget.add(cameraOrtho);
var camera = new THREE.PerspectiveCamera(
//40,
20,
//10,
Native.window.aspect, 2,
// how far out do we want to zoom?
200000
//9000
);
camera.position.set(-1200, 800, 1200);
var target = new THREE.Vector3(0, 0, 0);
scene.add(camera);
//scene.add(new THREE.AmbientLight(0x212121));
//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);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0x101030));
#endregion
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var renderer = new THREE.WebGLRenderer(
new
{
// http://stackoverflow.com/questions/20495302/transparent-background-with-three-js
alpha = true,
preserveDrawingBuffer = true,
antialias = true
}
);
renderer.setSize(1920, 1080);
//renderer.setSize(2560, 1440);
renderer.domElement.AttachToDocument();
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
var renderTarget = new THREE.WebGLRenderTarget(
Native.window.Width, Native.window.Height,
new
{
minFilter = THREE.LinearFilter,
magFilter = THREE.LinearFilter,
format = THREE.RGBAFormat,
stencilBufer = false
}
);
//var composer = new THREE.EffectComposer(renderer, renderTarget);
//var renderModel = new THREE.RenderPass(scene, camera);
//composer.addPass(renderModel);
//#region vblur
//var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
//var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6.0;
//var bluriness = 4.0;
//// Show Details Severity Code Description Project File Line
////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
//(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
//(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
//(hblur.uniforms as dynamic).r.value = 0.5;
//(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
//composer.addPass(hblur);
//composer.addPass(vblur);
//#endregion
// Uncaught TypeError: renderer.setSize is not a function
// Uncaught TypeError: renderer.getClearColor is not a function
var effect = new THREE.OculusRiftEffect(
renderer,
// how to get the vblur into oculus effect?
//renderModel,
//composer,
//renderTarget,
new
{
worldScale = 100,
//HMD
}
);
effect.setSize(1920, 1080);
//effect.setSize(2560, 1440);
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
//dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = Stopwatch.StartNew();
//Native.window.onframe += delegate
//{
// //dae.children[0].children[0].children.Last().al
// //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
// //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// could we get some film grain?
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(10, 10, 10);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 100;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
if (i % 2 == 0)
{
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
//blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
//blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
#endregion
#endif
}
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
scene.add(cube);
}
);
#endregion
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
//var controls = new THREE.OrbitControls(camera);
var camera_rotation_z = 0.0;
Native.window.onframe +=
delegate
{
////var delta = clock.getDelta();
//controls.update();
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
}
//camera.position = controls.center.clone();
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//var lat2 = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
//Native.document.title = new { lon0 }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = camera.position.x + (500 * Math.Sin(phi) * Math.Cos(theta));
target.y = camera.position.y + (500 * Math.Cos(phi));
target.z = camera.position.z + (500 * Math.Sin(phi) * Math.Sin(theta));
//controls.update();
//camera.position = controls.center.clone();
// camera beta tilt?
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
//composer.render(0.1);
//renderer.render(scene, camera);
effect.render(scene, camera);
};
new { }.With(
async delegate
{
retry:
//var s = (double)Native.window.Width / 1920.0;
//var s = (double)Native.window.Height / Native.screen.height;
//var s = (double)Native.window.Height / 1440;
var s = (double)Native.window.Height / 1080;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
// gamma -0 .. -90
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
Alternative calculation (replacing lines 99-107 above):
var compassHeading = Math.atan2(rA, rB);
if(rA < 0) {
compassHeading += 2 * Math.PI;
}
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection; ;
};
}
// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://alteredqualia.com/three/examples/webgl_cars.html
// http://alteredqualia.com/xg/examples/animation_physics_terrain.html
// https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea
// Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P
// https://github.com/dotnet/roslyn/issues/98
//Icon image is missing.
//At least one new-style screenshot or video is required.
//Small tile image is missing.
//Please select a Primary Category for your item.
//Language is not selected.
// 640x400
// 128x128
// 440x280
public Application(IApp page)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128
Console.WriteLine("enter WebGLHZBlendCharacter");
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
Console.WriteLine("invoke TheServerWithAppWindow.Invoke");
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
{ TexturesImages ref0; }
// http://www.realitymeltdown.com/WebGL3/character-controller.html
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127
//Native.css
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
//Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46
// used by, for?
var clock = new THREE.Clock();
//var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 };
var scene = new THREE.Scene();
var skyScene = new THREE.Scene();
scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.domElement.AttachToDocument();
// this will mess up
// three.OrbitControls.js
// onMouseMove
//new IStyle(renderer.domElement)
//{
// position = IStyle.PositionEnum.absolute,
// left = "0px",
// top = "0px",
// right = "0px",
// bottom = "0px",
//};
//new { }.With(
// async delegate
// {
// await Native.window.async.onresize;
// // if the reload were fast, then we could actually do that:D
// Native.document.location.reload();
// }
//);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
while (true)
{
await Native.window.async.onframe;
cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
}
}
);
#endregion
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
scene.add(blendMesh);
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
blendMesh.showSkeleton(!xtrue);
var radius = blendMesh.geometry.boundingSphere.radius;
Native.document.title = new { radius }.ToString();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
camera.position.set(0.0, radius * 3, radius * 3.5);
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var controls = new THREE.OrbitControls(camera);
//controls.noPan = true;
//var loader = new THREE.JSONLoader();
//loader.load(new Models.ground().Content.src,
// new Action<THREE.Geometry, THREE.Material[]>(
// (xgeometry, materials) =>
// {
// var ground = new THREE.Mesh(xgeometry, materials[0]);
// ground.scale.set(20, 20, 20);
// ground.receiveShadow = true;
// ground.castShadow = true;
// scene.add(ground);
// }
// )
// );
#region createSky
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
dynamic shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
// We're inside the box, so make sure to render the backsides
// It will typically be rendered first in the scene and without depth so anything else will be drawn in front
var material = new THREE.ShaderMaterial(new
{
fragmentShader = shader.fragmentShader,
vertexShader = shader.vertexShader,
uniforms = shader.uniforms,
depthWrite = false,
side = THREE.BackSide
});
// THREE.CubeGeometry has been renamed to THREE.BoxGeometry
// The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values.
var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material);
//skyMesh.renderDepth = -10;
skyScene.add(skyMesh);
#endregion
////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height,
//// new
//// {
//// minFilter = THREE.LinearFilter,
//// magFilter = THREE.LinearFilter,
//// format = THREE.RGBFormat,
//// stencilBufer = false
//// }
////);
////var composer = new THREE.EffectComposer(renderer, renderTarget);
////composer.addPass(new THREE.RenderPass(skyScene, skyCamera));
////composer.addPass(new THREE.RenderPass(scene, camera));
////#region vblur
////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6;
////// Show Details Severity Code Description Project File Line
//////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
////(hblur.uniforms as dynamic).r.value = 0.5;
////(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
////composer.addPass(hblur);
////composer.addPass(vblur);
////#endregion
//composer.addPass(new THREE.RenderPass(scene, camera));
//
#region onframe
Native.window.onframe +=
delegate
{
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
blendMesh.updateSkeletonHelper();
}
controls.center.copy(blendMesh.position);
controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position = controls.center.clone().add(camOffset);
skyCamera.rotation.copy(camera.rotation);
//composer.render(0.1);
//renderer.clear();
renderer.render(skyScene, skyCamera);
renderer.render(scene, camera);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
)
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// if we are running in a SYSTEM account
// the chrome no-sandbox only allows software renderer
// where we get 1 frame per sec.
// on older systems we may not get GL_OES_standard_derivatives
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
// ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
// or that system is just old as hell
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
//http://thematicmapping.org/playground/webgl/earth/
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222
// Earth params
var radius = 0.5;
//var segments = 32;
var segments = 128;
var rotation = 6;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);
camera.position.z = 1.5;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var parent = new THREE.Object3D();
scene.add(parent);
#region sphere
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial(
new
{
map = new THREE.Texture().With(
async s =>
{
//0:75ms event: _2_no_clouds_4k_low view-source:36543
//Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
//Application Cache Progress event (2 of 2) 192.168.1.72/:1
//Application Cache Cached event 192.168.1.72/:1
//1:1018ms event: _2_no_clouds_4k_low done view-source:36543
//1:1019ms event: _2_no_clouds_4k view-source:36543
//event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
//1:16445ms event: _2_no_clouds_4k done
// ~ tilde to open css editor?
Console.WriteLine("event: _2_no_clouds_4k_low");
s.image = await new _2_no_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k_low done");
await 20000;
Console.WriteLine("event: _2_no_clouds_4k");
s.image = await new _2_no_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k done");
}
),
bumpMap = THREE.ImageUtils.loadTexture(
new elev_bump_4k().src
//new elev_bump_4k_low().src
),
// applies onyl to shaders to create the shadow
bumpScale = 0.001,
specularMap = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: water_4k_low");
s.image = await new water_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: water_4k_low done");
await 20000;
Console.WriteLine("event: water_4k");
s.image = await new water_4k();
s.needsUpdate = true;
Console.WriteLine("event: water_4k done");
}
),
//specular = new THREE.Color("grey")
specular = new THREE.Color(0xa0a0a0)
})
);
#endregion
// http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane
//sphere.rotation.y = rotation;
parent.rotation.y = rotation;
//sphere.position.x = 10;
//sphere.position.y = 10;
//sphere.position.z = 10;
//sphere.position.normalize();
//sphere.position.multiplyScalar(200);
parent.add(sphere);
//scene.add(sphere);
#region clouds
var clouds = new THREE.Mesh(
new THREE.SphereGeometry(
//radius + 0.003,
radius + 0.006,
segments, segments),
new THREE.MeshPhongMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(
// //new fair_clouds_4k().src
// new fair_clouds_4k_low().src
// ),
map = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: fair_clouds_4k_low");
s.image = await new fair_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k_low done");
await 20000;
Console.WriteLine("event: fair_clouds_4k");
s.image = await new fair_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k done");
}
),
transparent = true
})
);
//clouds.rotation.y = rotation;
parent.add(clouds);
//scene.add(clouds);
#endregion
#region Location on sphere
Action AddCities = async delegate
{
var table = await this.GetAllCities();
Console.WriteLine(table.Rows.Count.ToString());
for (var r = 0; r < table.Rows.Count; r++)
{
var latitude = (double)table.Rows[r]["Latitude"];
var longtitude = (double)table.Rows[r]["Longtitude"];
addLocation(latitude, longtitude, radius, 0.001, parent, 6);
Console.WriteLine(latitude.ToString());
await 100;
}
};
AddCities();
#endregion
var stars = new THREE.Mesh(
new THREE.SphereGeometry(90, 64, 64),
new THREE.MeshBasicMaterial(
new
{
map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
side = THREE.BackSide
})
);
scene.add(stars);
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
// jsc, what pointers do we have in store?
this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;
var
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// //sphere.rotation.x,
// //sphere.rotation.y
//},
//clouds = new
//{
// //clouds.rotation.x,
// //clouds.rotation.y,
//},
CursorX = 0,
CursorY = 0
};
#region onmousedown
this.canvas.onmousedown +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
this.canvas.requestFullscreen();
this.canvas.requestPointerLock();
}
else
{
// movementX no longer works
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// sphere.rotation.x,
// sphere.rotation.y
//},
//clouds = new
//{
// clouds.rotation.x,
// clouds.rotation.y,
//},
e.CursorX,
e.CursorY
};
if (pointerLock)
{
// skip
}
else
{
e.CaptureMouse();
}
}
};
#endregion
var z = camera.position.z;
var sfx = new WebGLEarthTest.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
{
autobuffer = true,
// this aint working
//loop = true
};
sfx.play();
//sfx.AttachToHead();
// http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/
this.canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 0.1 * e.WheelDirection;
z = z.Max(0.6).Min(4.5);
//Native.document.title = new { camera.position.z }.ToString();
};
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
this.canvas.onmousemove +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
if (pointerLock)
{
parent.rotation.x += 0.01 * e.movementY;
parent.rotation.y += 0.01 * e.movementX;
//sphere.rotation.x += 0.01 * e.movementY;
//sphere.rotation.y += 0.01 * e.movementX;
//clouds.rotation.x += 0.01 * e.movementY;
//clouds.rotation.y += 0.01 * e.movementX;
}
else
{
parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY);
parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX);
//sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
//sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);
//clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
//clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
}
// Native.document.title = new { e.movementX, e.movementY }.ToString();
}
};
#endregion
// could we
Native.window.onframe +=
e =>
{
if (this.canvas.parentNode == null)
return;
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
parent.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
renderer.setSize();
};
//new IStyle(this.canvas.css.before)
//{
// content = "'do a middle click to maximize the earth dashboard'",
// left = "1em",
// bottom = "1em",
// color = "white",
// position = IStyle.PositionEnum.absolute
//};
}
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hznosky.png" "/sdcard/oculus/360photos/"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// "X:\vr\tape360hzlights\0000.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "r:\vr\tape360hzlights\0000.png" "/sdcard/oculus/360photos/hzlights.png"
// 1421 KB/s (2516443 bytes in 1.729s)
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst /D a:
// subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360LightAnimation\Chrome360LightAnimation\bin\Debug\staging\Chrome360LightAnimation.Application\web
// subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360LightAnimation\Chrome360LightAnimation\bin\Debug\staging\Chrome360LightAnimation.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360LightAnimation\Chrome360LightAnimation\bin\Debug\staging\Chrome360LightAnimation.Application\web
// what if we want to do subst in another winstat or session?
// ColladaLoader: Empty or non-existing file (assets/Chrome360LightAnimation/S6Edge.dae)
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#region += Launched chrome.app.window
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
//chrome.runtime.UpdateAvailable += delegate
//{
// new chrome.Notification(title: "UpdateAvailable");
//};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "Chrome360LightAnimation");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 1024; // 6 faces, ?
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/Chrome360LightAnimation/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg )
int cubefacesize = 2048; // 6 faces, ?
// "X:\vr\tape1\0000x2048.png"
// for 60hz render we may want to use float camera percision, not available for ui.
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/"
//if (Environment.ProcessorCount < 8)
// //cubefacesize = 64; // 6 faces, ?
// cubefacesize = 128; // 6 faces, ?
new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument();
// can we keep fast fps yet highp?
// can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm?
//const int cubefacesize = 128; // 6 faces, ?
//var cubecameraoffsetx = 256;
var cubecameraoffsetx = 400;
//var uizoom = 0.1;
//var uizoom = cubefacesize / 128f;
var uizoom = 128f / cubefacesize;
var far = 0xffffff;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
//new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var oo = new List<THREE.Object3D>();
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
// since our cube camera is somewhat a fixed thing
// would it be easier to move mountains to come to us?
// once we change code would chrome app be able to let VR know that a new view is available?
var sceneg = new THREE.Group();
sceneg.AttachTo(scene);
// fly up?
//sceneg.translateZ(-1024);
// rotate the world, as the skybox then matches what we have on filesystem
scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
// yet for headtracking we shall rotate camera
//sceneg.position.set(0, 0, -1024);
//sceneg.position.set(0, -1024, 0);
var ambient = new THREE.AmbientLight(0x303030).AttachTo(sceneg);
//scene.add(ambient);
// should we fix jsc to do a more correct IDL?
//var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
//directionalLight.position.set(0, 0, 1);
//scene.add(directionalLight);
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
// wont show if we add skybox?
xlight.shadowCameraVisible = true;
//scene.add(light);
//light.AttachTo(sceneg);
#endregion
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// must enable shadows on the renderer
renderer0.shadowMapEnabled = true;
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
//renderer0.setClearColor(0xfffff, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
// can we aniamte it?
//var cameraoffset = new THREE.Vector3(0, 800, 1200);
// can we have linear animation fromcenter of the map to the edge and back?
// then do the flat earth sun orbit?
var cameraoffset = new THREE.Vector3(
// left?
-512,
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1024,
//1200
0
// can we hover top of the map?
);
// original vieworigin
//var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048, max = 0 + 2048, valueAsNumber = -512, title = "camerax" }.AttachToDocument();
// up. whats the most high a rocket can go 120km?
new IHTMLHorizontalRule { }.AttachToDocument();
// how high is the bunker?
var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 64, max = 2048, valueAsNumber = 1024, title = "cameray" }.AttachToDocument();
new IHTMLBreak { }.AttachToDocument();
var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument();
new IHTMLHorizontalRule { }.AttachToDocument();
var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048, max = 0 + 2048, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
// for render server
var fcamerax = 0.0;
var fcameray = 0.0;
var fcameraz = 0.0;
//while (await camerax.async.onchange)
//cameray.onchange += delegate
//{
// if (cameray.valueAsNumber < cameray.max)
// camerayHigh.valueAsNumber = camerayHigh.min;
//};
camerayHigh.onmousedown += delegate
{
//if (camerayHigh.valueAsNumber > camerayHigh.min)
cameray.valueAsNumber = cameray.max;
};
Action applycameraoffset = delegate
{
// make sure UI and gpu sync up
var cy = cameray;
if (cameray.valueAsNumber < cameray.max)
camerayHigh.valueAsNumber = camerayHigh.min;
if (camerayHigh.valueAsNumber > camerayHigh.min)
cameray.valueAsNumber = cameray.max;
if (cameray.valueAsNumber == cameray.max)
cy = camerayHigh;
cameraoffset = new THREE.Vector3(
// left?
camerax + fcamerax,
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
cy + fcameray,
//1200
cameraz + fcameraz
// can we hover top of the map?
);
};
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraNY.position.copy(new THREE.Vector3(0, 0, 0));
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
};
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
canvasNY.canvas.style.transform = $"scale({uizoom})";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraPY.position.copy(new THREE.Vector3(0, 0, 0));
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
};
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = $"scale({uizoom})";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraNX.position.copy(new THREE.Vector3(0, 0, 0));
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = $"scale({uizoom})";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraPX.position.copy(new THREE.Vector3(0, 0, 0));
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
};
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = $"scale({uizoom})";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
applycameraoffset += delegate
{
cameraNZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = $"scale({uizoom})";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
applycameraoffset += delegate
{
cameraPZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
};
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = $"scale({uizoom})";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
Native.body.onmousedown +=
async e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
return;
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
//e.CaptureMouse();
var release = e.Element.CaptureMouse();
await e.Element.async.onmouseup;
release();
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
Native.body.onmousemove +=
e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
{
Native.body.style.cursor = IStyle.CursorEnum.@default;
return;
}
e.preventDefault();
e.stopPropagation();
Native.body.style.cursor = IStyle.CursorEnum.move;
var pointerLock = canvas0 == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
oo.WithEach(
x =>
{
x.rotation.y += 0.006 * (e.CursorX - old.CursorX);
x.rotation.x += 0.006 * (e.CursorY - old.CursorY);
}
);
old = new
{
e.CursorX,
e.CursorY
};
}
};
#endregion
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
c.width = 3840;
c.height = 2160;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = $"scale({suizoom})";
//c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3);
#region skybox
// what shall the skybox do if we reach upper altitude?
// fade into space skybox ?
var skybox = new THREE.Mesh(new THREE.SphereGeometry(far * 0.9, 50, 50),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
//new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src
//new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src
frame0.src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
skybox.scale.x = -1;
skybox.AttachTo(sceneg);
#endregion
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
// dont need the fixup. unless we want to animate the sky rotate?
//mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
// hide the sky to see camera lines?
// can we show this as HUD on VR in webview?
//skybox.visible = false;
//scene.add(skybox);
//new IHTMLButton { }
#region DirectoryEntry
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
if (dir == null)
{
// not exporting to file system?
var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
return;
}
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
//dir.WriteAllBytes("0000.png", gl.canvas);
var glsw = Stopwatch.StartNew();
dir.WriteAllBytes("0000.png", gl);
new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument();
// {{ ElapsedMilliseconds = 1548 }}
// 3.7MB
// 3840x2160
};
#endregion
var vsync = default(TaskCompletionSource<object>);
new IHTMLButton {
"render 60hz 30sec"
}.AttachToDocument().onclick += async e =>
{
e.Element.disabled = true;
var total = Stopwatch.StartNew();
var status = "rendering... " + new { dir };
new IHTMLPre { () => status }.AttachToDocument();
if (dir == null)
{
//dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
}
total.Restart();
vsync = new TaskCompletionSource<object>();
await vsync.Task;
status = "rendering... vsync";
var frameid = -1;
goto beforeframe;
//fcamerax = -15.0;
// parallax offset?
await_nextframe:
var filename = frameid.ToString().PadLeft(4, '0') + ".png";
status = "rendering... " + new { frameid, filename };
vsync = new TaskCompletionSource<object>();
await vsync.Task;
// frame0 has been rendered
var swcapture = Stopwatch.StartNew();
status = "WriteAllBytes... " + new { filename };
//await Native.window.async.onframe;
if (dir != null)
// https://code.google.com/p/chromium/issues/detail?id=404301
await dir.WriteAllBytes(filename, gl);
//await dir.WriteAllBytes(filename, gl.canvas);
status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds };
status = "rdy " + new { filename, fcamerax };
//await Native.window.async.onframe;
beforeframe:
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
fcamerax = 128 * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
fcameraz = 256 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
// up
fcameray = 16 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcamerax += (1.0 / 60.0);
//fcamerax += (1.0 / 60.0) * 120;
if (Environment.ProcessorCount < 8)
frameid += 30;
else
frameid++;
// 60hz 30sec
if (frameid < 60 * 30)
{
// Blob GC? either this helms or the that we made a Blob static.
await Task.Delay(11);
goto await_nextframe;
}
total.Stop();
status = "all done " + new { frameid, total.ElapsedMilliseconds };
vsync = default(TaskCompletionSource<object>);
// http://stackoverflow.com/questions/22899333/delete-javascript-blobs
e.Element.disabled = false;
};
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
dae.AttachTo(sceneg);
//dae.position.y = -40;
//dae.position.z = 280;
//scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = Stopwatch.StartNew();
//Native.window.onframe += delegate
//{
// //dae.children[0].children[0].children.Last().al
// //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
// //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\WebGLGodRay.csproj"
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
//treeMesh.AttachTo(scene);
treeMesh.AttachTo(sceneg);
}
)
);
#endregion
// http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/
#region create floor
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// can we have our checkerboard?
var floorColors = new[] {
0xA26D41,
0xA06040,
0xAF6F4F,
// marker to detect horizon
0xAF0000,
0xA26D41,
0xA06040,
0xAF6F4F,
// marker to detect horizon
0x006D00,
0xA26D41,
0xA06040,
0xAF6F4F,
// marker to detect horizon
0x0000FF
};
// human eye can see up to 10miles, then horizion flattens out.
var planeGeometry = new THREE.CubeGeometry(2048, 1, 2048);
var planeGeometryMarkerH = new THREE.CubeGeometry(2048, 1, 2048 * 5);
var planeGeometryMarkerV = new THREE.CubeGeometry(2048 * 5 * 4, 1, 2048 * 4);
var planeGeometryV = new THREE.CubeGeometry(2048 * 4, 1, 2048 * 4);
////var floor0 = new THREE.Mesh(planeGeometry,
//// new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//// );
//////plane.castShadow = false;
////floor0.receiveShadow = true;
////floor0.AttachTo(sceneg);
////var floor1 = new THREE.Mesh(planeGeometry,
//// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//// new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//// );
//////plane.castShadow = false;
////floor1.receiveShadow = true;
////floor1.position.set(2048, 0, 1024);
////floor1.AttachTo(sceneg);
// can we see horizon?
for (int i = 0; i < 3 * 256; i++)
{
var planeGeometry0 = planeGeometry;
if (i % 4 == 3)
{
planeGeometry0 = planeGeometryMarkerH;
// for high altitude zoom level
var i4 = (i / 4);
var planeGeometryV0 = planeGeometryV;
if (i4 % 4 == 3)
planeGeometryV0 = planeGeometryMarkerV;
{
var floor2 = new THREE.Mesh(planeGeometryV0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[i4 % floorColors.Length], specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
floor2.receiveShadow = true;
floor2.position.set(1024 * -i, 0, 2048 * i);
floor2.AttachTo(scene);
}
{
var floor2 = new THREE.Mesh(planeGeometryV0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[(i / 4) % floorColors.Length], specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
floor2.receiveShadow = true;
floor2.position.set(-1024 * -i, 0, -2048 * i);
floor2.AttachTo(scene);
}
}
{
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[i % floorColors.Length], specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
floor2.receiveShadow = true;
floor2.position.set(2048 * i, 0, 1024 * i);
floor2.AttachTo(scene);
}
// flipz
{
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[i % floorColors.Length], specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
floor2.receiveShadow = true;
floor2.position.set(2048 * -i, 0, 1024 * -i);
floor2.AttachTo(scene);
}
}
#endregion
// "shadow cameras" show the light source and direction
// spotlight #1 -- yellow, dark shadow
var spotlight = new THREE.SpotLight(0xffff00);
spotlight.position.set(-60, 150, -30);
//spotlight.shadowCameraVisible = true;
spotlight.shadowDarkness = 0.95;
spotlight.intensity = 2;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
scene.add(spotlight);
// spotlight #2 -- red, light shadow
var spotlight2 = new THREE.SpotLight(0xff0000);
//var spotlight2 = new THREE.SpotLight(0xffff00);
spotlight2.position.set(60, 150, -60);
scene.add(spotlight2);
//spotlight2.shadowCameraVisible = true;
spotlight2.shadowDarkness = 0.70;
spotlight2.intensity = 2;
spotlight2.castShadow = true;
// THREE.WebGLProgram: gl.getProgramInfoLog() Pixel shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16).
for (int i = 0; i < 8; i++)
{
// spotlight #3 blue
var spotlight3 = new THREE.SpotLight(0x0000ff);
//var spotlight3 = new THREE.SpotLight(0x00ffff);
spotlight3.position.set(150 * i, 80, -100);
//spotlight3.shadowCameraVisible = true;
spotlight3.shadowDarkness = 0.95;
spotlight3.intensity = 2;
spotlight3.castShadow = true;
scene.add(spotlight3);
// change the direction this spotlight is facing
var lightTarget = new THREE.Object3D();
lightTarget.position.set(150 * i, 10, -100);
scene.add(lightTarget);
spotlight3.target = lightTarget;
}
// cube: mesh to cast shadows
#region castShadow
var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0x888888 });
var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial);
//cube.position.set(0, 50, 0);
cube0.position.set(0, 100, 0);
// Note that the mesh is flagged to cast shadows
cube0.castShadow = true;
scene.add(cube0);
// floor: mesh to receive shadows
#endregion
#region create walls
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
//var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100 * i;
ii.position.z = -1 * i * 100;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
//scene.add(ii);
ii.AttachTo(sceneg);
if (i % 2 == 0)
{
// Z:\jsc.svn\examples\javascript\WebGL\WebGLHZBlendCharacter\WebGLHZBlendCharacter\Application.cs
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
//scene.add(blendMesh);
blendMesh.AttachTo(sceneg);
//Native.window.onframe +=
// delegate
// {
// blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
// ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
// };
}
)
);
#endregion
#endif
}
}
#endregion
//#region HZCannon
//// "Z:\jsc.svn\examples\javascript\WebGL\HeatZeekerRTSOrto\HeatZeekerRTSOrto\HeatZeekerRTSOrto.csproj"
//new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
// async cube =>
// {
// // https://github.com/mrdoob/three.js/issues/1285
// //cube.children.WithEach(c => c.castShadow = true);
// //cube.traverse(
// // new Action<THREE.Object3D>(
// // child =>
// // {
// // // does it work? do we need it?
// // //if (child is THREE.Mesh)
// // child.castShadow = true;
// // //child.receiveShadow = true;
// // }
// // )
// //);
// // um can edit and continue insert code going back in time?
// cube.scale.x = 10.0;
// cube.scale.y = 10.0;
// cube.scale.z = 10.0;
// //cube.castShadow = true;
// //dae.receiveShadow = true;
// //cube.position.x = -100;
// ////cube.position.y = (cube.scale.y * 50) / 2;
// //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// // if i want to rotate, how do I do it?
// //cube.rotation.z = random() + Math.PI;
// //cube.rotation.x = random() + Math.PI;
// //var sw2 = Stopwatch.StartNew();
// cube.AttachTo(sceneg);
// //scene.add(cube);
// //interactiveObjects.Add(cube);
// // offset is wrong
// //while (true)
// //{
// // await Native.window.async.onframe;
// // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
// //}
// }
//);
//#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
//scene.add(cube);
cube.AttachTo(sceneg);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
cube.AttachTo(sceneg);
//scene.add(cube);
}
);
#endregion
new Models.ColladaS6Edge().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = -(65 - 200);
var scale = 0.9;
// jsc, do we have ILObserver available yet?
dae.scale.x = scale;
dae.scale.y = scale;
dae.scale.z = scale;
//#region onmousewheel
//Native.body.onmousewheel +=
// e =>
// {
// e.preventDefault();
// //camera.position.z = 1.5;
// // min max. shall adjust speed also!
// // max 4.0
// // min 0.6
// dae.position.z -= 10.0 * e.WheelDirection;
// //camera.position.z = 400;
// //dae.position.z = dae.position.z.Max(-200).Min(200);
// //Native.document.title = new { z }.ToString();
// };
//#endregion
////dae.position.y = -80;
//dae.AttachTo(sceneg);
////scene.add(dae);
//oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
// let render man know..
if (vsync != null)
if (vsync.Task.IsCompleted)
return;
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
dae.position.x = Math.Sin(fcamerax * 0.001) * 190.0;
dae.position.y = Math.Cos(fcamerax * 0.001) * 90.0;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
applycameraoffset();
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
#region x
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
// could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
// let render man know..
if (vsync != null)
if (!vsync.Task.IsCompleted)
vsync.SetResult(null);
};
}
);
Console.WriteLine("do you see it?");
}
