/// <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)
{
// https://3dwarehouse.sketchup.com/model.html?id=3afce20492cb901a4fc117e4bba6a423
// http://blogs.msdn.com/b/dotnet/archive/2014/05/09/the-net-native-tool-chain.aspx
// http://stackoverflow.com/questions/23771022/plinq-c-net-4-5-1-vs-stream-jdk-java-8-performance
// http://blogs.msdn.com/b/dotnet/archive/2014/04/21/sharing-code-across-platforms.aspx
// Uncaught TypeError: Cannot read property 'nodes' of null
// sketchup creates empty nodes
// .//dae:scene/dae:instance_visual_scene
// .dae download missing?
//<scene>
// <instance_visual_scene url="#ID1" />
// https://3dwarehouse.sketchup.com/model.html?id=7bf6249a031b5095ddd41159baaa3ad5
// jsc, how to show dae?
// Uncaught TypeError: Cannot read property 'input' of null
// geometry: "ID690"
//<geometry id="ID979">
// <mesh />
// </geometry>
// <geometry id="ID980">
// <mesh />
// </geometry>
// X:\jsc.svn\examples\javascript\WebGL\WebGLNexus7\WebGLNexus7\Application.cs
// X:\jsc.svn\examples\javascript\WebGL\WebGLGalaxyS\WebGLGalaxyS\Application.cs
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201408/20140801
// jsc, when can we have compiled collada asssets?
// svg we have why not collada..
// https://3dwarehouse.sketchup.com/model.html?id=b3bdb20081c023accbd2ad75d6ff6a24
// https://3dwarehouse.sketchup.com/collection.html?id=982aafab70c9aba140c287facf4f3262
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
//renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
var canvas = (IHTMLCanvas)renderer.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
canvas.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
canvas.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
canvas.requestFullscreen();
}
else
{
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
e.CaptureMouse();
}
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
canvas.onmousemove +=
e =>
{
var pointerLock = canvas == 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
var z = camera.position.z;
#region onmousewheel
canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
z = z.Max(200).Min(500);
//Native.document.title = new { z }.ToString();
};
#endregion
Native.window.onframe +=
e =>
{
renderer.clear();
camera.aspect = canvas.aspect;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
new __AssetsLibrary__.ColladaISS().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;
// jsc, do we have ILObserver available yet?
dae.scale.x = 1.0;
dae.scale.y = 1.0;
dae.scale.z = 1.0;
//dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
}
);
// no! why?
Console.WriteLine("do you see it?");
// slow to load
// then too small!
}
// 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)
{
// http://oos.moxiecode.com/js_webgl/md2_converter/MD2_converter.js
// http://oos.moxiecode.com/js_webgl/md2_morphtarget_example/
var camz = 3000.0;
var SHADOW_MAP_WIDTH = 1024;
var SHADOW_MAP_HEIGHT = 512;
var scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x111111, 0.00098);
// fov, aspect, near, far )
var camera = new THREE.PerspectiveCamera(
60,
Native.window.aspect,
1,
10000
);
camera.position.z = camz;
camera.position.y = 100;
camera.lookAt(new THREE.Vector3(0, -94, 0));
scene.add(camera);
var THREE_FlatShading = 1;
// Ground
var planeGeometry = new THREE.PlaneGeometry(10000, 10000);
var planeMaterial_args = new
{
map = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets._4585_v4().src
),
// WebGL: INVALID_ENUM: texParameter: invalid parameter
shading = THREE_FlatShading,
ambient = 0x666666,
color = 0xffffff,
specular = 0x666666,
shininess = 1000000
};
var planeMaterial = new THREE.MeshPhongMaterial(planeMaterial_args);
planeMaterial.map.repeat.x = 30;
planeMaterial.map.repeat.y = 30;
planeMaterial.map.wrapS = THREE.RepeatWrapping;
planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
//plane.rotation.x = -Math.PI/2;
plane.rotation.y = -Math.PI * 0.75;
plane.position.y = -94;
plane.castShadow = false;
plane.receiveShadow = true;
scene.add(plane);
// Lights
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);
var light = new THREE.SpotLight(0xffffff, 1.0);
light.position.set(100, 350, 140);
light.target.position.set(0, -94, 0);
light.castShadow = true;
light.shadowCameraNear = 1;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
light.shadowMapBias = 0.000001;
light.shadowMapDarkness = 0.15;
light.shadowMapWidth = SHADOW_MAP_WIDTH;
light.shadowMapHeight = SHADOW_MAP_HEIGHT;
scene.add(light);
// Model
var material = new THREE.MeshPhongMaterial(
new
{
map = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets.blade_black().src
),
ambient = 0x999999,
color = 0xffffff,
specular = 0xffffff,
shininess = 25,
morphTargets = true
}
);
#region tris_md2
new THREE.JSONLoader().load(
new global::WebGLMD2MorphtargetExample.Data.tris_md2().Content.src,
new Action<object>(
async geometry =>
{
var mesh = new THREE.MorphAnimMesh(geometry, material);
mesh.rotation.y = -Math.PI / 2;
mesh.scale.set(4, 4, 4);
mesh.duration = 1000 * 20;
mesh.castShadow = true;
mesh.receiveShadow = false;
scene.add(mesh);
// renderer
var renderer = new THREE.WebGLRenderer(new { antialias = false });
//renderer.setClearColorHex(0x111111, 1);
//renderer.setClearColorHex(0x111111);
renderer.setSize();
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
renderer.domElement.style.backgroundColor = "black";
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
var clock = new Stopwatch();
clock.Start();
while (true)
{
double delta = clock.ElapsedMilliseconds;
clock.Restart();
//if (delta > 1000 || delta == 0)
//{
// delta = 1000 / 60.0;
//}
//Console.WriteLine(new { delta });
mesh.updateAnimation(delta);
camz += (450 - camz) / 20.0;
camera.position.z = camz;
renderer.render(scene, camera);
//await Native.window.requestAnimationFrameAsync;
await Native.window.async.onframe;
};
}
)
);
#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)
{
// why are the trucks black?
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
// what will happen if we resync THREE version from 70 to?
Native.document.title = new { THREE.REVISION }.ToString();
var oo = new List <THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
//var ambient = new THREE.AmbientLight(0x101030);
var ambient = new THREE.AmbientLight(0x808080);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd, 0.7);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
this.canvas = (IHTMLCanvas)renderer.domElement;
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Native.window.onframe +=
delegate
{
renderer.clear();
//camera.aspect = window.aspect;
//camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
//camera.aspect = canvas.aspect;
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.0001
);
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
new truck().Source.Task.ContinueWithResult(
dae =>
{
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = 65;
dae.scale.x = 10;
dae.scale.y = 10;
dae.scale.z = 10;
dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
}
);
//var ref0 = "assets/WebGLColladaExperiment/HZCannon_capture_009_04032013_192834.png";
//new HZCannon().Source.Task.ContinueWithResult(
// dae =>
// {
// //dae.scale.x = 30;
// //dae.scale.y = 30;
// //dae.scale.z = 30;
// dae.castShadow = true;
// dae.receiveShadow = true;
// dae.scale.x = 3;
// dae.scale.y = 3;
// dae.scale.z = 3;
// dae.position.y = -80;
// scene.add(dae);
// oo.Add(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)
{
// X:\jsc.svn\examples\actionscript\synergy\Flare3DMeetsStarlingExperiment\Flare3DMeetsStarlingExperiment\ApplicationSprite.cs
// X:\jsc.svn\examples\javascript\WebGL\WebGLGalaxyS\WebGLGalaxyS\Application.cs
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201408/20140801
// jsc, when can we have compiled collada asssets?
// svg we have why not collada..
// https://3dwarehouse.sketchup.com/model.html?id=b3bdb20081c023accbd2ad75d6ff6a24
// https://3dwarehouse.sketchup.com/collection.html?id=982aafab70c9aba140c287facf4f3262
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
//renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
var canvas = (IHTMLCanvas)renderer.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
#region onmousedown
canvas.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
canvas.requestFullscreen();
}
else
{
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
e.CaptureMouse();
}
};
#endregion
canvas.css.active.style.cursor = IStyle.CursorEnum.move;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
canvas.onmousemove +=
e =>
{
var pointerLock = canvas == 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
var z = camera.position.z;
#region onmousewheel
canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
z = z.Max(200).Min(500);
//Native.document.title = new { z }.ToString();
};
#endregion
Native.window.onframe +=
e =>
{
renderer.clear();
camera.aspect = canvas.aspect;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
new galaxyS().Source.Task.ContinueWithResult(
dae =>
{
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = 65;
dae.scale.x = 0.5;
dae.scale.y = 0.5;
dae.scale.z = 0.5;
//dae.position.y = -80;
scene.add(dae);
oo.Add(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)
{
// https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed
#region ChromeTCPServer
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
#region AtFormCreated
FormStyler.AtFormCreated =
ss =>
{
ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// this is working?
var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget());
};
#endregion
chrome.Notification.DefaultTitle = "Heat Zeeker";
chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text,
AtFormCreated: FormStyler.AtFormCreated
);
return;
}
#endregion
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// jsc, add THREE
// ... ok.
// X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs
// this is not isometric.
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.OrthographicCamera(
Native.window.Width / -2, Native.window.Width / 2,
Native.window.Height / 2, Native.window.Height / -2
,
// if we change these values what will change?
-1000, 1000
);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
var scene = new THREE.Scene();
// Grid
var size = 600;
var step = 50;
Func<double> random = new Random().NextDouble;
// how do I add a new ground box?
{
var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2);
var material = new THREE.MeshLambertMaterial(new
{
color = 0xB27D51
// , shading = THREE.FlatShading, overdraw = 0.5
});
{
var cube = new THREE.Mesh(geometry, material);
// why cant we get the shadows??
cube.receiveShadow = true;
cube.scale.y = Math.Floor(random() * 2 + 1);
cube.position.x = 0;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.y = -2;
cube.position.z = 0;
scene.add(cube);
}
}
{
var geometry = new THREE.Geometry();
for (var i = -size; i <= size; i += step)
{
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i));
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i));
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size));
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 });
var line = new THREE.Line(geometry, material, mode: THREE.LinePieces);
scene.add(line);
}
var interactiveObjects = new List<THREE.Object3D>();
#region Cubes
{
for (var i = 0; i < 8; i++)
{
new HZBunker().Source.Task.ContinueWithResult(
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 = 2.0;
cube.scale.y = 2.0;
cube.scale.z = 2.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
interactiveObjects.Add(cube);
}
);
new HZWaterTower().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
// http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows
// http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js
//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 = 2.0;
cube.scale.y = 2.0;
cube.scale.z = 2.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
interactiveObjects.Add(cube);
}
);
new HZCannon().Source.Task.ContinueWithResult(
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 = 2.0;
cube.scale.y = 2.0;
cube.scale.z = 2.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
//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;
cube.rotation.y = random() * Math.PI * 2;
scene.add(cube);
interactiveObjects.Add(cube);
}
);
}
}
#endregion
// we need expression evaluator with intellisense for live debugging sessions
#region Lights
var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
scene.add(ambientLight);
// can we get our shadows?
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = 400;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = 400;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
#endregion
//var renderer = new THREE.CanvasRenderer();
var renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
// background-color: #B27D51;
renderer.setClearColor(0xB27D51);
//renderer.setSize(
// Native.window.Width ,
// Native.window.Height * 10
// );
renderer.setSize();
renderer.domElement.AttachToDocument();
Native.window.onresize +=
delegate
{
camera.left = Native.window.Width / -2;
camera.right = Native.window.Width / 2;
camera.top = Native.window.Height / 2;
camera.bottom = Native.window.Height / -2;
camera.updateProjectionMatrix();
renderer.setSize();
};
//window.addEventListener( 'resize', onWindowResize, false );
//#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 ee
//// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs
//// can we restile the window as the pin window in IDE?
//var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual };
//var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee);
////ee.AutoSize = AutoSizeMode.
////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height);
//ee.ClientSize = new System.Drawing.Size(200, 24);
//ee.Show();
////ee_camera_y.
//ee_camera_y.TextChanged += delegate
//{
// camera.position.y = double.Parse(ee_camera_y.Text);
//};
//#endregion
var s = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js
// var effect = new THREE.OculusRiftEffect(
//renderer, new
//{
// worldScale = 100,
// //HMD
// }
//);
// effect.setSize(1920, 1080);
Native.window.onframe +=
e =>
{
// jsc, when can we have the edit and continue already?
//var timer = s.ElapsedMilliseconds * 0.1;
//var timer = s.ElapsedMilliseconds * 0.0001;
//camera.position.x = Math.Cos(timer) * 200;
//camera.position.z = Math.Sin(timer) * 200;
// camera.position.z = 200;
//camera.position.y = 100;
//camera.position.y = Math.Sin(timer * 0.1) * 200;
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
//effect.render(scene, camera);
};
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
////ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
// view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html
//var mouse2D = new THREE.Vector3(0, 10000, 0.5);
//renderer.domElement.onclick +=
// e =>
// {
// e.preventDefault();
// mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1;
// mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1;
// var vector = new THREE.Vector3(
// (e.CursorX / (double)Native.window.Width) * 2 - 1,
// -(e.CursorY / (double)Native.window.Height) * 2 + 1,
// 0.5);
// // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs
// var projector = new THREE.Projector();
// projector.unprojectVector(vector, camera);
// // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast
// // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray
// // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html
// // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera
// // use picking ray since it's an orthographic camera
// // doesnt fkin work ???
// //var raycaster = projector.pickingRay(vector, camera);
// var raycaster = projector.pickingRay(mouse2D.clone(), camera);
// //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
// var intersects = raycaster.intersectObjects(interactiveObjects.ToArray());
// // https://github.com/mrdoob/three.js/issues/599
// Native.document.title = new { intersects.Length }.ToString();
// };
}
/// <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)
{
// https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed
#region ChromeTCPServer
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
#region AtFormCreated
FormStyler.AtFormCreated =
ss =>
{
ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// this is working?
var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget());
};
#endregion
chrome.Notification.DefaultTitle = "Heat Zeeker";
chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text,
AtFormCreated: FormStyler.AtFormCreated
);
return;
}
#endregion
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// jsc, add THREE
// ... ok.
// X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs
// this is not isometric.
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.OrthographicCamera(
Native.window.Width / -2, Native.window.Width / 2,
Native.window.Height / 2, Native.window.Height / -2
,
// if we change these values what will change?
-1000, 1000
);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
var scene = new THREE.Scene();
// Grid
var size = 600;
var step = 50;
Func <double> random = new Random().NextDouble;
// how do I add a new ground box?
{
var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2);
var material = new THREE.MeshLambertMaterial(new
{
color = 0xB27D51
// , shading = THREE.FlatShading, overdraw = 0.5
});
{
var cube = new THREE.Mesh(geometry, material);
// why cant we get the shadows??
cube.receiveShadow = true;
cube.scale.y = Math.Floor(random() * 2 + 1);
cube.position.x = 0;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.y = -2;
cube.position.z = 0;
scene.add(cube);
}
}
{
var geometry = new THREE.Geometry();
for (var i = -size; i <= size; i += step)
{
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i));
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i));
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size));
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 });
var line = new THREE.Line(geometry, material, mode: THREE.LinePieces);
scene.add(line);
}
var interactiveObjects = new List <THREE.Object3D>();
#region Cubes
{
for (var i = 0; i < 8; i++)
{
new HZBunker().Source.Task.ContinueWithResult(
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 = 2.0;
cube.scale.y = 2.0;
cube.scale.z = 2.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
interactiveObjects.Add(cube);
}
);
new HZWaterTower().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
// http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows
// http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js
//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 = 2.0;
cube.scale.y = 2.0;
cube.scale.z = 2.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
interactiveObjects.Add(cube);
}
);
new HZCannon().Source.Task.ContinueWithResult(
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 = 2.0;
cube.scale.y = 2.0;
cube.scale.z = 2.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
//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;
cube.rotation.y = random() * Math.PI * 2;
scene.add(cube);
interactiveObjects.Add(cube);
}
);
}
}
#endregion
// we need expression evaluator with intellisense for live debugging sessions
#region Lights
var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
scene.add(ambientLight);
// can we get our shadows?
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = 400;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = 400;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
#endregion
//var renderer = new THREE.CanvasRenderer();
var renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
// background-color: #B27D51;
renderer.setClearColor(0xB27D51);
//renderer.setSize(
// Native.window.Width ,
// Native.window.Height * 10
// );
renderer.setSize();
renderer.domElement.AttachToDocument();
Native.window.onresize +=
delegate
{
camera.left = Native.window.Width / -2;
camera.right = Native.window.Width / 2;
camera.top = Native.window.Height / 2;
camera.bottom = Native.window.Height / -2;
camera.updateProjectionMatrix();
renderer.setSize();
};
//window.addEventListener( 'resize', onWindowResize, false );
//#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 ee
//// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs
//// can we restile the window as the pin window in IDE?
//var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual };
//var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee);
////ee.AutoSize = AutoSizeMode.
////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height);
//ee.ClientSize = new System.Drawing.Size(200, 24);
//ee.Show();
////ee_camera_y.
//ee_camera_y.TextChanged += delegate
//{
// camera.position.y = double.Parse(ee_camera_y.Text);
//};
//#endregion
var s = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js
// var effect = new THREE.OculusRiftEffect(
//renderer, new
//{
// worldScale = 100,
// //HMD
// }
//);
// effect.setSize(1920, 1080);
Native.window.onframe +=
e =>
{
// jsc, when can we have the edit and continue already?
//var timer = s.ElapsedMilliseconds * 0.1;
//var timer = s.ElapsedMilliseconds * 0.0001;
//camera.position.x = Math.Cos(timer) * 200;
//camera.position.z = Math.Sin(timer) * 200;
// camera.position.z = 200;
//camera.position.y = 100;
//camera.position.y = Math.Sin(timer * 0.1) * 200;
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
//effect.render(scene, camera);
};
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
////ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
// view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html
//var mouse2D = new THREE.Vector3(0, 10000, 0.5);
//renderer.domElement.onclick +=
// e =>
// {
// e.preventDefault();
// mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1;
// mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1;
// var vector = new THREE.Vector3(
// (e.CursorX / (double)Native.window.Width) * 2 - 1,
// -(e.CursorY / (double)Native.window.Height) * 2 + 1,
// 0.5);
// // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs
// var projector = new THREE.Projector();
// projector.unprojectVector(vector, camera);
// // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast
// // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray
// // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html
// // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera
// // use picking ray since it's an orthographic camera
// // doesnt fkin work ???
// //var raycaster = projector.pickingRay(vector, camera);
// var raycaster = projector.pickingRay(mouse2D.clone(), camera);
// //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
// var intersects = raycaster.intersectObjects(interactiveObjects.ToArray());
// // https://github.com/mrdoob/three.js/issues/599
// Native.document.title = new { intersects.Length }.ToString();
// };
}
/// <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)
{
// 1e40:01:01 RewriteToAssembly error: System.MissingMethodException: Method not found: 'Void ScriptCoreLib.JavaScript.DOM.IWindow.add_onframe(System.Action`1<Int32>)'.
#if chrome_works_again
#region AtFormCreated
FormStyler.AtFormCreated =
s =>
{
s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
};
#endregion
// chrome 31 wont load view-source
// chrome 33 shows black window. nice.
#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.DefaultTitle = "Droplet";
//chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text,
AtFormCreated: FormStyler.AtFormCreated
);
return;
}
#endregion
#endif
#region clouds
new WebGLClouds.HTML.Pages.Default().With(
layout =>
{
layout.body.AttachTo(page.clouds);
new WebGLClouds.Application(layout);
}
);
#endregion
page.header.style.backgroundColor = "";
page.header.css.style.transition = "background-color 200ms linear";
page.header.css.style.backgroundColor = "rgba(255, 255, 0, 0)";
//page.header.css.style.backgroundColor = "rgba(255, 255, 0, 0.2)";
page.header.css.hover.style.backgroundColor = "rgba(255, 255, 0, 1.0)";
Native.window.onframe +=
delegate
{
if (Native.document.body.scrollTop == 0)
{
page.header.css.style.backgroundColor = "rgba(255, 255, 0, 0)";
}
else
{
page.header.css.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
}
};
var oo = new List <THREE.Object3D>();
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
page.header.clientWidth / (double)page.header.clientHeight,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
//renderer.domElement.AttachToDocument();
renderer.domElement.AttachTo(page.header);
renderer.setSize(page.header.clientWidth, page.header.clientHeight);
//renderer.setSize(window.Width, window.Height);
//renderer.domElement.style.SetLocation(0, 0);
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
Native.window.onframe +=
delegate
{
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.001
);
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = page.header.clientWidth / (double)page.header.clientHeight;
camera.updateProjectionMatrix();
//renderer.setSize(window.Width, window.Height);
renderer.setSize(page.header.clientWidth, page.header.clientHeight);
};
var data = Book1.GetDataSet();
#region bind
Func <string, IHTMLElement, DataGridView> bind =
(DataMember, c) =>
{
var g = new DataGridView
{
BackgroundColor = Color.Transparent,
// does this work?
DefaultCellStyle = new DataGridViewCellStyle
{
SelectionBackColor = Color.Black,
SelectionForeColor = Color.Yellow,
//BackColor = Color.Transparent
//BackColor = Color.FromArgb(0x05, 0, 0, 0)
BackColor = Color.FromArgb(0x3f, 255, 255, 255)
},
ColumnHeadersDefaultCellStyle = new DataGridViewCellStyle
{
BackColor = Color.FromArgb(0x8f, 255, 255, 255)
},
SelectionMode = DataGridViewSelectionMode.FullRowSelect,
AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
// do we have a test for this?
AllowUserToAddRows = false,
//AllowUserToDeleteRows = false,
RowHeadersVisible = false,
// cannot hide column headers yet
// script: error JSC1000: No implementation found for this native method, please implement [System.Windows.Forms.DataGridView.set_ColumnHeadersVisible(System.Boolean)]
//ColumnHeadersVisible = false,
DataSource = data,
DataMember = DataMember,
};
// this should be the one that maximizes itself onto the parent which is supposed to be absolute in size
//g.GetHTMLTarget().With(
// div =>
// {
// //div.style.reset();
// // no scrollbars, thanks
// div.style.overflow = IStyle.OverflowEnum.hidden;
// (div.style as dynamic).zIndex = "";
// div.style.position = IStyle.PositionEnum.relative;
// div.style.left = "";
// div.style.top = "";
// div.style.right = "";
// }
//);
c.style.position = IStyle.PositionEnum.relative;
c.style.height = "20em";
c.Clear();
g.AttachControlTo(c);
return(g);
};
#endregion
bind("Assets", page.assets);
bind("Transactions", page.transactions).ReadOnly = true;
// script: error JSC1000: No implementation found for this native method, please implement [System.Data.DataTableCollection.get_Item(System.String)]
var data_Assets = data.Tables["Assets"];
var data_Transactions = data.Tables["Transactions"];
#region data_Assets_NewRow
Action <DataRow> data_Assets_NewRow =
SourceRow =>
{
var r = new Random();
new sack_of_gold2().Source.Task.ContinueWithResult(
o =>
{
o.position.y = -80;
scene.add(o);
oo.Add(o);
o.position.x = r.Next(-250, 250);
o.position.z = r.Next(-400, 200);
(o as dynamic).scale = new THREE.Vector3(0.5, 0.5, 0.5);
data_Assets.RowDeleting +=
(sender, e) =>
{
if (SourceRow != e.Row)
{
return;
}
scene.remove(o);
oo.Remove(o);
data_Transactions.Rows.Add(
"now", "item removed -" + SourceRow["Net worth"]
);
};
}
);
};
#endregion
data_Assets.Rows.AsEnumerable().WithEach(data_Assets_NewRow);
// "X:\jsc.svn\examples\javascript\DropFileIntoSQLite\DropFileIntoSQLite.sln"
// X:\jsc.svn\examples\javascript\DragDataTableIntoCSVFile\DragDataTableIntoCSVFile\Application.cs
#region ondragstart
page.header.ondragstart +=
e =>
{
data_Assets.Rows.AsEnumerable().FirstOrDefault().With(
SourceRow =>
{
// x:\jsc.svn\examples\javascript\dropfileintosqlite\dropfileintosqlite\application.cs
data_Assets.Rows.Remove(SourceRow);
//data_Assets.Rows.RemoveAt(0);
var clipboard = new DataTable();
clipboard.Columns.AddRange(
Enumerable.ToArray(
from x in data_Assets.Columns.AsEnumerable()
select new DataColumn {
ColumnName = x.ColumnName
}
)
);
clipboard.Rows.Add(
Enumerable.ToArray(
from x in data_Assets.Columns.AsEnumerable()
select SourceRow[x]
)
);
e.dataTransfer.effectAllowed = "copy";
var clipboard_string = StringConversionsForDataTable.ConvertToString(clipboard);
e.dataTransfer.setData(typeof(DataTable).Name, clipboard_string);
}
);
};
#endregion
// X:\jsc.svn\market\javascript\Abstractatech.JavaScript.FileStorage\Abstractatech.JavaScript.FileStorage\Application.cs
var dz = new DropZone();
var TimerHide = new ScriptCoreLib.JavaScript.Runtime.Timer(
delegate
{
dz.body.Orphanize();
}
);
#region ondragover
Action <DragEvent> ondragover =
evt =>
{
evt.stopPropagation();
evt.preventDefault();
if (evt.dataTransfer.types.Contains(typeof(DataTable).Name.ToLower()))
{
evt.dataTransfer.dropEffect = "copy"; // Explicitly show this is a copy.
dz.body.AttachTo(Native.document.documentElement);
dz.bglayer.style.transition = "background-color 500ms linear";
dz.bglayer.style.backgroundColor = "rgba(0,0,0, 0.7)";
TimerHide.Stop();
}
};
Native.Document.body.ondragover += ondragover;
dz.Container.ondragover += ondragover;
#endregion
dz.Container.ondragleave +=
evt =>
{
//Console.WriteLine("ondragleave");
//Console.WriteLine(" dz.Container.ondragleave");
TimerHide.StartTimeout(90);
evt.stopPropagation();
evt.preventDefault();
};
Native.window.onblur +=
delegate
{
data_Transactions.Rows.Add(
//"now", "item added +" + SourceRow["Net worth"]
"now", "blur"
);
};
Native.window.onfocus +=
delegate
{
data_Transactions.Rows.Add(
//"now", "item added +" + SourceRow["Net worth"]
"now", "focus"
);
};
data_Assets_NewRow +=
SourceRow =>
{
data_Transactions.Rows.Add(
//"now", "item added +" + SourceRow["Net worth"]
"now", "item added"
);
};
data_Assets.TableNewRow +=
(sender, e) =>
{
data_Assets_NewRow(e.Row);
};
#region ondrop
dz.Container.ondrop +=
evt =>
{
//Console.WriteLine("ondrop");
TimerHide.StartTimeout(90);
evt.stopPropagation();
evt.preventDefault();
if (evt.dataTransfer.items != null)
{
// X:\jsc.svn\examples\javascript\DragDataTableIntoCSVFile\DragDataTableIntoCSVFile\Application.cs
evt.dataTransfer.items.AsEnumerable().Where(
x =>
x.type.ToLower() ==
// let jsc type system sort it out?
// how much reflection does jsc give us nowadays?
typeof(DataTable).Name.ToLower()
).WithEach(
async xx =>
{
// http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dfnReturnLink-0
var DataTable_xml = await xx.getAsString();
var DataTable = StringConversionsForDataTable.ConvertFromString(DataTable_xml);
DataTable.Rows.AsEnumerable().WithEach(
SourceRow =>
{
data_Assets.Rows.Add(
Enumerable.ToArray(
from x in data_Assets.Columns.AsEnumerable()
select SourceRow[x]
)
);
}
);
}
);
}
};
#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)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
var oo = new List <THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
10000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
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;
};
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);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(window.Width, window.Height);
};
#endregion
// why isnt it being found?
new global::WebGLColladaExperiment.THREE_ColladaAsset(
// we get purple small thingy
"assets/WebGLHeatZeekerColladaExperiment/Promotion3D_daytime.dae"
// maybe sketchup doesnt know how to export colors?
//"assets/WebGLHeatZeekerColladaExperiment/sam_site.dae"
).Source.Task.ContinueWithResult(
dae =>
{
dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
oo.Add(dae);
dae.scale = new THREE.Vector3(2, 2, 2);
}
);
}
// 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\ChromeCubeCameraExperiment\ChromeCubeCameraExperiment\bin\Debug\staging\ChromeCubeCameraExperiment.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeCubeCameraExperiment\ChromeCubeCameraExperiment\bin\Debug\staging\ChromeCubeCameraExperiment.Application\web
// ColladaLoader: Empty or non-existing file (assets/ChromeCubeCameraExperiment/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: "ChromeCubeCameraExperiment");
// 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.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 pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument();
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);
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
const int size = 512; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
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(size, size);
//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
var uizoom = 0.25;
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: 2000);
cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(size, size);
canvasNX.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 2, 8 + (int)(uizoom * size + 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: 2000);
cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(size, size);
canvasPX.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 0, 8 + (int)(uizoom * size + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = $"scale({uizoom})";
#endregion
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: 2000);
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasNY = new CanvasRenderingContext2D(size, size);
canvasNY.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 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: 2000);
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasPY = new CanvasRenderingContext2D(size, size);
canvasPY.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = $"scale({uizoom})";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: 2000);
cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasNZ = new CanvasRenderingContext2D(size, size);
canvasNZ.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 3, 8 + (int)(uizoom * size + 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: 2000);
cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasPZ = new CanvasRenderingContext2D(size, size);
canvasPZ.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 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
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);
var sw = Stopwatch.StartNew();
// 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, size, size);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
#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, size, size);
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, size, size);
canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
};
}
);
#endregion
Console.WriteLine("do you see it?");
}
// 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?");
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine
// inspired by http://granular.cs.umu.se/cannon.js/examples/threejs_fps.html
/// <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)
{
//Uncaught Error: ERROR: Quaternion's .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code.
// WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported
// IE11 does not work yet
//DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
// DEPRECATED: Quaternion's .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead. Three.js:913
//Uncaught TypeError: Object [object Object] has no method 'subSelf'
// { REVISION: '57' };
var boxes = new List <CANNON.RigidBody>();
var boxMeshes = new List <THREE.Mesh>();
var balls = new List <CANNON.RigidBody>();
var ballMeshes = new List <THREE.Mesh>();
Func <long> Date_now = () => (long)new IFunction("return Date.now();").apply(null);
var time = Date_now();
#region initCannon
// // Setup our world
var world = new CANNON.World();
world.quatNormalizeSkip = 0;
world.quatNormalizeFast = false;
//world.solver.setSpookParams(300, 10);
world.solver.iterations = 5;
world.gravity.set(0, -20, 0);
world.broadphase = new CANNON.NaiveBroadphase();
// // Create a slippery material (friction coefficient = 0.0)
var physicsMaterial = new CANNON.Material("slipperyMaterial");
var physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial,
physicsMaterial,
0.0, // friction coefficient
0.3 // restitution
);
// // We must add the contact materials to the world
world.addContactMaterial(physicsContactMaterial);
var controls_sphereShape = default(CANNON.Sphere);
var controls_sphereBody = default(CANNON.RigidBody);
{ // Create a sphere
var mass = 5;
var radius = 1.3;
var sphereShape = new CANNON.Sphere(radius);
var sphereBody = new CANNON.RigidBody(mass, sphereShape, physicsMaterial);
controls_sphereShape = sphereShape;
controls_sphereBody = sphereBody;
sphereBody.position.set(0, 5, 0);
sphereBody.linearDamping = 0.05;
world.add(sphereBody);
// // Create a plane
var groundShape = new CANNON.Plane();
var groundBody = new CANNON.RigidBody(0, groundShape, physicsMaterial);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.add(groundBody);
}
#endregion
#region init
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 0.1, 1000);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 0, 500);
var ambient = new THREE.AmbientLight(0x111111);
scene.add(ambient);
var light = new THREE.SpotLight(0xffffff, 1.0);
light.position.set(10, 30, 20);
light.target.position.set(0, 0, 0);
// if(true){
light.castShadow = true;
light.shadowCameraNear = 20;
light.shadowCameraFar = 50;//camera.far;
light.shadowCameraFov = 40;
light.shadowMapBias = 0.1;
light.shadowMapDarkness = 0.7;
light.shadowMapWidth = 2 * 512;
light.shadowMapHeight = 2 * 512;
// //light.shadowCameraVisible = true;
// }
scene.add(light);
var controls = new PointerLockControls(camera, controls_sphereBody);
scene.add(controls.getObject());
// // floor
var geometry = new THREE.PlaneGeometry(300, 300, 50, 50);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var material = new THREE.MeshLambertMaterial(new { color = 0xdddddd });
//Native.Window.
// THREE.Design.THREE.ColorUtils.adjustHSV(material.color, 0, 0, 0.9);
// Replaced ColorUtils.adjustHSV() with Color's .offsetHSL().
//new IFunction("material", "THREE.ColorUtils.offsetHSL( material.color, 0, 0, 0.9 );").apply(null, material);
//
var mesh = new THREE.Mesh(geometry, material)
{
castShadow = true,
receiveShadow = true
};
scene.add(mesh);
var renderer = new THREE.WebGLRenderer(new object());
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
//renderer.setSize(Native.Window.Width, Native.Window.Height);
//renderer.setClearColor(scene.fog.color, 1);
renderer.domElement.style.backgroundColor = JSColor.Black;
renderer.domElement.AttachToDocument();
#region onresize
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
var r = new Random();
Func <f> Math_random = () => r.NextFloat();
#region Add boxes
{ //
for (var i = 0; i < 32; i++)
{
var boxsize = Math_random() * 0.5;
var halfExtents = new CANNON.Vec3(boxsize, boxsize, boxsize);
var boxShape = new CANNON.Box(halfExtents);
var boxGeometry = new THREE.CubeGeometry(halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2);
var x = (Math_random() - 0.5) * 20;
var y = 1 + (Math_random() - 0.5) * 1;
var z = (Math_random() - 0.5) * 20;
var boxBody = new CANNON.RigidBody(5, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
world.add(boxBody);
scene.add(boxMesh);
boxBody.position.set(x, y, z);
boxMesh.position.set(x, y, z);
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
//boxMesh.useQuaternion = true;
boxes.Add(boxBody);
boxMeshes.Add(boxMesh);
}
}
#endregion
#region Add linked boxes
{ //
var size = 0.5;
var he = new CANNON.Vec3(size, size, size * 0.1);
var boxShape = new CANNON.Box(he);
var mass = 0.0;
var space = 0.1 * size;
var N = 5;
var last = default(CANNON.RigidBody);
var boxGeometry = new THREE.CubeGeometry(he.x * 2, he.y * 2, he.z * 2);
for (var i = 0; i < N; i++)
{
var boxbody = new CANNON.RigidBody(mass, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
boxbody.position.set(5, (N - i) * (size * 2 + 2 * space) + size * 2 + space, 0);
boxbody.linearDamping = 0.01;
boxbody.angularDamping = 0.01;
//boxMesh.useQuaternion = true;
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
world.add(boxbody);
scene.add(boxMesh);
boxes.Add(boxbody);
boxMeshes.Add(boxMesh);
if (i != 0)
{
// Connect this body to the last one
var c1 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(-size, size + space, 0), last, new CANNON.Vec3(-size, -size - space, 0));
var c2 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(size, size + space, 0), last, new CANNON.Vec3(size, -size - space, 0));
world.addConstraint(c1);
world.addConstraint(c2);
}
else
{
mass = 0.3;
}
last = boxbody;
}
}
#endregion
#endregion
var dt = 1.0 / 60;
controls.enabled = true;
// vr and tilt shift?
Native.window.onframe += delegate
{
if (controls.enabled)
{
// how big of a world can we hold?
// async ?
world.step(dt);
// Update ball positions
for (var i = 0; i < balls.Count; i++)
{
balls[i].position.copy(ballMeshes[i].position);
balls[i].quaternion.copy(ballMeshes[i].quaternion);
}
// Update box positions
for (var i = 0; i < boxes.Count; i++)
{
boxes[i].position.copy(boxMeshes[i].position);
boxes[i].quaternion.copy(boxMeshes[i].quaternion);
}
}
controls.update(Date_now() - time);
renderer.render(scene, camera);
time = Date_now();
};
#region havePointerLock
renderer.domElement.onclick +=
delegate
{
renderer.domElement.requestPointerLock();
};
#endregion
#region onmousedown
renderer.domElement.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");
renderer.domElement.requestFullscreen();
renderer.domElement.requestPointerLock();
return;
}
var ballradius = 0.1 + Math_random() * 0.9;
var ballShape = new CANNON.Sphere(ballradius);
var ballGeometry = new THREE.SphereGeometry(ballShape.radius, 32, 32);
var shootDirection = new THREE.Vector3();
var shootVelo = 15;
var projector = new THREE.Projector();
Action <THREE.Vector3> getShootDir = (targetVec) =>
{
var vector = targetVec;
targetVec.set(0, 0, 1);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray((THREE.Vector3)(object) controls_sphereBody.position,
vector
//.subSelf(controls_sphereBody.position)
.normalize()
);
targetVec.x = ray.direction.x;
targetVec.y = ray.direction.y;
targetVec.z = ray.direction.z;
};
var x = controls_sphereBody.position.x;
var y = controls_sphereBody.position.y;
var z = controls_sphereBody.position.z;
// could we attach physics via binding list?
var ballBody = new CANNON.RigidBody(1, ballShape);
var ballMesh = new THREE.Mesh(ballGeometry, material);
world.add(ballBody);
scene.add(ballMesh);
ballMesh.castShadow = true;
ballMesh.receiveShadow = true;
balls.Add(ballBody);
ballMeshes.Add(ballMesh);
getShootDir(shootDirection);
ballBody.velocity.set(shootDirection.x * shootVelo,
shootDirection.y * shootVelo,
shootDirection.z * shootVelo);
// // Move the ball outside the player sphere
x += shootDirection.x * (controls_sphereShape.radius + ballShape.radius);
y += shootDirection.y * (controls_sphereShape.radius + ballShape.radius);
z += shootDirection.z * (controls_sphereShape.radius + ballShape.radius);
ballBody.position.set(x, y, z);
ballMesh.position.set(x, y, z);
//ballMesh.useQuaternion = true;
};
#endregion
//var ze = new ZeProperties();
//ze.Show();
//ze.Left = 0;
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
}
/// <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)
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = Native.window.Width;
var SCREEN_HEIGHT = Native.window.Height;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;
// perspective cameras
perspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
perspectiveCamera.position.set(0,200,550);
perspectiveCamera.lookAt(scene.position);
scene.add(perspectiveCamera);
// orthographic cameras
mapCamera = new THREE.OrthographicCamera(
Native.window.Width / -2, // Left
Native.window.Width / 2, // Right
Native.window.Height / 2, // Top
Native.window.Height / -2, // Bottom
-5000, // Near
10000 ); // Far
mapCamera.up = new THREE.Vector3(0,0,-1);
mapCamera.lookAt( new THREE.Vector3(0,-1,0) );
scene.add(mapCamera);
renderer = new THREE.WebGLRenderer(
new
{
antialias = true
}
);
// RENDERER
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.container = (IHTMLCanvas)renderer.domElement;
this.container.AttachToDocument();
this.container.style.SetLocation(0, 0);
// EVENTS
//THREEx.WindowResize(renderer, mapCamera);
//THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// STATS
//stats = new Stats();
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.bottom = '0px';
//stats.domElement.style.zIndex = 100;
//container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
// FLOOR
var img = new uvgrid01();
var floorTexture = new THREE.Texture().With(
async s =>
{
s.image = await img;
s.needsUpdate = true;
});
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( new { map = floorTexture, side = THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(2000, 2000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
////////////
// CUSTOM //
////////////
// materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ) }));
//materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ) }));
//materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ) }));
//materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ) }));
//materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ) }));
//materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ) }));
// create an array with six textures for cube
var materialArray = new THREE.MeshBasicMaterial[6];
materialArray[0] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With(
async s =>
{
s.image = await new xpos();
s.needsUpdate = true;
})
}));
materialArray[1] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With(
async s =>
{
s.image = await new xneg();
s.needsUpdate = true;
})
}));
materialArray[2] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With(
async s =>
{
s.image = await new ypos();
s.needsUpdate = true;
})
}));
materialArray[3] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With(
async s =>
{
s.image = await new yneg();
s.needsUpdate = true;
})
}));
materialArray[4] = (new THREE.MeshBasicMaterial( new {map = new THREE.Texture().With(
async s =>
{
s.image = await new zpos();
s.needsUpdate = true;
})
}));
materialArray[5] = (new THREE.MeshBasicMaterial( new {
map = new THREE.Texture().With(
async s =>
{
s.image = await new zneg();
s.needsUpdate = true;
})
}));
//var MovingCubeMat = new THREE.MeshFaceMaterial(new { material = materialArray });
var MovingCubeGeom = new THREE.CubeGeometry(50, 50, 50, 1, 1, 1);
var MovingCube = new THREE.Mesh(MovingCubeGeom, new THREE.MeshBasicMaterial(new
{
color = new THREE.Color(0xFFFFFF)
}));
MovingCube.position.set(0, 25.1, 0);
scene.add(MovingCube);
// a little bit of scenery...
var ambientlight = new THREE.AmbientLight(0x111111);
scene.add( ambientlight );
// torus knot
var colorMaterial = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0xff3333) });
var shape = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 2, 5, 4), colorMaterial);
shape.position.set(-200, 50, -200);
scene.add(shape);
// torus knot
var colorMaterial2 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0x33ff33) });
var shape2 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 2, 4), colorMaterial2);
shape2.position.set(200, 50, -200);
scene.add(shape2);
// torus knot
var colorMaterial3 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0xffff33) });
var shape3 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 4, 3, 4), colorMaterial3);
shape3.position.set(200, 50, 200);
scene.add(shape3);
// torus knot
var colorMaterial4 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0x3333ff) });
var shape4 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 4, 4), colorMaterial4);
shape4.position.set(-200, 50, 200);
scene.add(shape4);
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.setClearColor( 0x000000, 1 );
renderer.autoClear = false;
Native.window.onframe +=
e =>
{
perspectiveCamera.updateProjectionMatrix();
render();
};
var isPushed = false;
this.container.onkeydown +=
m =>
{
isPushed = true;
if (isPushed)
{
//var delta = clock.getDelta(); // seconds.
var moveDistance = 200 * 2; // 200 pixels per second
var rotateAngle = Math.PI / 2 * 2; // pi/2 radians (90 degrees) per second
// local transformations
// move forwards/backwards/left/right
if (m.KeyCode == 87)
MovingCube.translateZ(-moveDistance);
if (m.KeyCode == 83)
MovingCube.translateZ(moveDistance);
if (m.KeyCode == 81)
MovingCube.translateX(-moveDistance);
if (m.KeyCode == 69)
MovingCube.translateX(moveDistance);
//// rotate left/right/up/down
//var rotation_matrix = new THREE.Matrix4().identity();
//if (m.KeyCode == 65)
// MovingCube.rotateOnAxis(new THREE.Vector3(0, 1, 0), rotateAngle);
//if (m.KeyCode == 68)
// MovingCube.rotateOnAxis(new THREE.Vector3(0, 1, 0), -rotateAngle);
//if (m.KeyCode == 90)
//{
// MovingCube.position.set(0, 25.1, 0);
// MovingCube.rotation.set(0, 0, 0);
//}
}
};
this.container.onkeyup += e =>
{
isPushed = false;
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
renderer.setSize();
};
}
/* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/
*/
/// <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(IDefault page = null)
{
var SCREEN_WIDTH = Native.window.Width;
var SCREEN_HEIGHT = Native.window.Height;
//var ,stats;
//var mesh, zmesh, geometry;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = SCREEN_WIDTH / 2;
var windowHalfY = SCREEN_HEIGHT / 2;
var lastUpdate = new IDate().getTime();
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000);
camera.position.z = 50;
camera.updateMatrix();
var scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight(0x222222);
ambient.position.z = -300;
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(-1, 0, 1);
directionalLight.position.normalize();
scene.add(directionalLight);
var dLight = new THREE.DirectionalLight(0xffeedd);
dLight.position.set(1, 0, 1);
dLight.position.normalize();
scene.add(dLight);
// init the WebGL renderer and append it to the Dom
var renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.autoClear = false;
renderer.domElement.AttachTo(container);
#region createScene
Action<object, f, f, f, f> createScene = (geometry, x, y, z, b) =>
{
//var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
var zmesh = new THREE.Mesh(geometry);
zmesh.position.x = x;
zmesh.position.z = y;
zmesh.position.y = z;
zmesh.scale.x = 5f;
zmesh.scale.y = 5f;
zmesh.scale.z = 5f;
//zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
};
#endregion
// message: "Unexpected token /"
var loader = new THREE.JSONLoader();
Action<object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); };
loader.load(
url: new invade().Content.src,
callback: IFunction.OfDelegate(callbackMale)
);
// postprocessing
var composer = new THREE.EffectComposer(renderer);
var renderModel = new THREE.RenderPass(scene, camera);
composer.addPass(renderModel);
var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false );
effectFilm.renderToScreen = true;
composer.addPass(effectFilm);
#region IsDisposed
var IsDisposed = false;
Dispose = delegate
{
if (IsDisposed)
return;
IsDisposed = true;
renderer.domElement.Orphanize();
};
#endregion
#region getFrametime
Func<long> getFrametime = () =>
{
var now = new IDate().getTime();
var tdiff = (now - lastUpdate) / 1000;
lastUpdate = now;
return tdiff;
};
#endregion
#region render
Action render = delegate
{
var delta = getFrametime();
camera.position.x += (mouseX - camera.position.x) * .05f;
camera.position.y += (-mouseY - camera.position.y) * .05f;
camera.updateMatrix();
//renderer.render( scene, camera );
renderer.clear();
composer.render(delta);
};
#endregion
#region onmousemove
Native.document.onmousemove +=
e =>
{
mouseX = (e.CursorX - windowHalfX);
mouseY = (e.CursorY - windowHalfY);
};
#endregion
Native.window.onframe +=
delegate
{
if (IsDisposed)
return;
render();
};
#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
}
// 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\ChromeEquirectangularCameraExperiment\ChromeEquirectangularCameraExperiment\bin\Debug\staging\ChromeEquirectangularCameraExperiment.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularCameraExperiment\ChromeEquirectangularCameraExperiment\bin\Debug\staging\ChromeEquirectangularCameraExperiment.Application\web
// ColladaLoader: Empty or non-existing file (assets/ChromeEquirectangularCameraExperiment/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: "ChromeEquirectangularCameraExperiment");
// 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.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);
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
//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, ?
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(size, size);
//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
var uizoom = 0.1;
var far = 0xffff;
#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.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(size, size);
canvasNY.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 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.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(size, size);
canvasPY.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 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.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(size, size);
canvasNX.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 2, 8 + (int)(uizoom * size + 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.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(size, size);
canvasPX.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 0, 8 + (int)(uizoom * size + 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));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(size, size);
canvasNZ.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 3, 8 + (int)(uizoom * size + 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.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(size, size);
canvasPZ.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 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;
// 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 * size + 8) * 0, 8 + (int)(uizoom * size + 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 xor = new HTML.Images.FromAssets.tiles_regrid().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 * size + 8) * 0 + 480 + 16, 8 + (int)(uizoom * size + 8) * 3);
var mesh = new THREE.Mesh(new THREE.SphereGeometry(0xFFF, 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);
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 base64 = gl.canvas.toDataURL();
frame0.src = base64;
// 7MB!
};
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, size, size);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
#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, size, size);
//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, size, size);
//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?");
}
// subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeGalaxyS6Edge\ChromeGalaxyS6Edge\bin\Debug\staging\ChromeGalaxyS6Edge.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeGalaxyS6Edge\ChromeGalaxyS6Edge\bin\Debug\staging\ChromeGalaxyS6Edge.Application\web
/// <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";
};
#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 = "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
Native.body.Clear();
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
//renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
var canvas = (IHTMLCanvas)renderer.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
canvas.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
canvas.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
canvas.requestFullscreen();
}
else
{
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
e.CaptureMouse();
}
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
canvas.onmousemove +=
e =>
{
var pointerLock = canvas == 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
var z = camera.position.z;
#region onmousewheel
canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
z = z.Max(200).Min(500);
//Native.document.title = new { z }.ToString();
};
#endregion
Native.window.onframe +=
e =>
{
renderer.clear();
camera.aspect = canvas.aspect;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
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;
var scale = 0.7;
// jsc, do we have ILObserver available yet?
dae.scale.x = scale;
dae.scale.y = scale;
dae.scale.z = scale;
//dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
}
);
Console.WriteLine("do you see it?");
}
public override void Init()
{
base.Init();
controls = new THREE.TrackballControls(camera, Container);
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = new int[] { 65, 83, 68 };
scene = new THREE.Scene();
// THREE.FogExp2 fg2 = new THREE.FogExp2(new THREE.Color().setHex(0xcccccc), 0.002);
THREE.FogExp2 fg2 = new THREE.FogExp2(0xcccccc, 0.002);
scene.fog = fg2;
var geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
var material = new THREE.MeshPhongMaterial();
material.color = new THREE.Color().setHex(0xffffff); // 0xffffff;
material.shading = THREE.ShadingType.FlatShading;
for (var i = 0; i < 500; i++)
{
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = (Math.Random() - 0.5) * 1000;
mesh.position.y = (Math.Random() - 0.5) * 1000;
mesh.position.z = (Math.Random() - 0.5) * 1000;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add(mesh);
}
// lights
THREE.Light light = new THREE.DirectionalLight();
light.color = new THREE.Color().setHex(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
light = new THREE.DirectionalLight();
light.color = new THREE.Color().setHex(0x002288);
light.position.set(-1, -1, -1);
scene.add(light);
light = new THREE.AmbientLight(0x222222);
light.color = new THREE.Color().setHex(0x222222);
scene.add(light);
// renderer
renderer = new THREE.WebGLRenderer(false);
renderer.antialias = false;
renderer.setClearColor(scene.fog.color);
//TODO: renderer.setPixelRatio( Window.devicePixelRatio );
renderer.setSize(Width, Height);
Container.AppendChild(renderer.domElement);
//stats = new Stats();
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.top = '0px';
//stats.domElement.style.zIndex = 100;
//container.appendChild( stats.domElement );
//
//
}
/// <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:\opensource\github\three.js\examples\canvas_camera_orthographic.html"
// if i type THREE, would jsc be able to add THREE package on rebuild?
// Error 136 The type or namespace name 'THREE' could not be found (are you missing a using directive or an assembly reference?) X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs 35 26 WebGLOrthographicCamera
// X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs
var camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -500, 1000);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
var scene = new THREE.Scene();
// Grid
var size = 500;
var step = 50;
Func <double> random = new Random().NextDouble;
{
var geometry = new THREE.Geometry();
for (var i = -size; i <= size; i += step)
{
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i));
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i));
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size));
((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial(new { color = 0x000000, opacity = 0.2 });
var line = new THREE.Line(geometry, material);
line.type = THREE.LinePieces;
scene.add(line);
}
#region Cubes
{
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshLambertMaterial(new { color = 0xffffff, shading = THREE.FlatShading, overdraw = 0.5 });
for (var i = 0; i < 100; i++)
{
var cube = new THREE.Mesh(geometry, material);
cube.scale.y = Math.Floor(random() * 2 + 1);
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
}
}
#endregion
#region Lights
var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
scene.add(ambientLight);
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = random() - 0.5;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = random() - 0.5;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
#endregion
//var renderer = new THREE.CanvasRenderer();
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xf0f0f0);
//renderer.setSize(Native.window.Width, Native.window.Height);
renderer.setSize();
renderer.domElement.AttachToDocument();
//window.addEventListener( 'resize', onWindowResize, false );
var s = Stopwatch.StartNew();
Native.window.onframe +=
e =>
{
// jsc, when can we have the edit and continue already?
//var timer = s.ElapsedMilliseconds * 0.1;
var timer = s.ElapsedMilliseconds * 0.0001;
camera.position.x = Math.Cos(timer) * 200;
camera.position.z = Math.Sin(timer) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
}
/// <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)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
10000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
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;
};
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);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(window.Width, window.Height);
};
#endregion
// why isnt it being found?
new global::WebGLColladaExperiment.THREE_ColladaAsset(
// we get purple small thingy
"assets/WebGLHeatZeekerColladaExperiment/Promotion3D_daytime.dae"
// maybe sketchup doesnt know how to export colors?
//"assets/WebGLHeatZeekerColladaExperiment/sam_site.dae"
).Source.Task.ContinueWithResult(
dae =>
{
dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
oo.Add(dae);
dae.scale = new THREE.Vector3(2, 2, 2);
}
);
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine
// inspired by http://granular.cs.umu.se/cannon.js/examples/threejs_fps.html
/// <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)
{
//Uncaught Error: ERROR: Quaternion's .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code.
// WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported
// IE11 does not work yet
//DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
// DEPRECATED: Quaternion's .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead. Three.js:913
//Uncaught TypeError: Object [object Object] has no method 'subSelf'
// { REVISION: '57' };
var boxes = new List<CANNON.RigidBody>();
var boxMeshes = new List<THREE.Mesh>();
var balls = new List<CANNON.RigidBody>();
var ballMeshes = new List<THREE.Mesh>();
Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null);
var time = Date_now();
#region initCannon
// // Setup our world
var world = new CANNON.World();
world.quatNormalizeSkip = 0;
world.quatNormalizeFast = false;
//world.solver.setSpookParams(300, 10);
world.solver.iterations = 5;
world.gravity.set(0, -20, 0);
world.broadphase = new CANNON.NaiveBroadphase();
// // Create a slippery material (friction coefficient = 0.0)
var physicsMaterial = new CANNON.Material("slipperyMaterial");
var physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial,
physicsMaterial,
0.0, // friction coefficient
0.3 // restitution
);
// // We must add the contact materials to the world
world.addContactMaterial(physicsContactMaterial);
var controls_sphereShape = default(CANNON.Sphere);
var controls_sphereBody = default(CANNON.RigidBody);
{ // Create a sphere
var mass = 5;
var radius = 1.3;
var sphereShape = new CANNON.Sphere(radius);
var sphereBody = new CANNON.RigidBody(mass, sphereShape, physicsMaterial);
controls_sphereShape = sphereShape;
controls_sphereBody = sphereBody;
sphereBody.position.set(0, 5, 0);
sphereBody.linearDamping = 0.05;
world.add(sphereBody);
// // Create a plane
var groundShape = new CANNON.Plane();
var groundBody = new CANNON.RigidBody(0, groundShape, physicsMaterial);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.add(groundBody);
}
#endregion
#region init
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 0.1, 1000);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 0, 500);
var ambient = new THREE.AmbientLight(0x111111);
scene.add(ambient);
var light = new THREE.SpotLight(0xffffff, 1.0);
light.position.set(10, 30, 20);
light.target.position.set(0, 0, 0);
// if(true){
light.castShadow = true;
light.shadowCameraNear = 20;
light.shadowCameraFar = 50;//camera.far;
light.shadowCameraFov = 40;
light.shadowMapBias = 0.1;
light.shadowMapDarkness = 0.7;
light.shadowMapWidth = 2 * 512;
light.shadowMapHeight = 2 * 512;
// //light.shadowCameraVisible = true;
// }
scene.add(light);
var controls = new PointerLockControls(camera, controls_sphereBody);
scene.add(controls.getObject());
// // floor
var geometry = new THREE.PlaneGeometry(300, 300, 50, 50);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var material = new THREE.MeshLambertMaterial(new { color = 0xdddddd });
//Native.Window.
// THREE.Design.THREE.ColorUtils.adjustHSV(material.color, 0, 0, 0.9);
// Replaced ColorUtils.adjustHSV() with Color's .offsetHSL().
//new IFunction("material", "THREE.ColorUtils.offsetHSL( material.color, 0, 0, 0.9 );").apply(null, material);
//
var mesh = new THREE.Mesh(geometry, material)
{
castShadow = true,
receiveShadow = true
};
scene.add(mesh);
var renderer = new THREE.WebGLRenderer(new object());
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
//renderer.setSize(Native.Window.Width, Native.Window.Height);
//renderer.setClearColor(scene.fog.color, 1);
renderer.domElement.style.backgroundColor = JSColor.Black;
renderer.domElement.AttachToDocument();
#region onresize
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
var r = new Random();
Func<f> Math_random = () => r.NextFloat();
#region Add boxes
{ //
for (var i = 0; i < 32; i++)
{
var boxsize = Math_random() * 0.5;
var halfExtents = new CANNON.Vec3(boxsize, boxsize, boxsize);
var boxShape = new CANNON.Box(halfExtents);
var boxGeometry = new THREE.CubeGeometry(halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2);
var x = (Math_random() - 0.5) * 20;
var y = 1 + (Math_random() - 0.5) * 1;
var z = (Math_random() - 0.5) * 20;
var boxBody = new CANNON.RigidBody(5, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
world.add(boxBody);
scene.add(boxMesh);
boxBody.position.set(x, y, z);
boxMesh.position.set(x, y, z);
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
//boxMesh.useQuaternion = true;
boxes.Add(boxBody);
boxMeshes.Add(boxMesh);
}
}
#endregion
#region Add linked boxes
{ //
var size = 0.5;
var he = new CANNON.Vec3(size, size, size * 0.1);
var boxShape = new CANNON.Box(he);
var mass = 0.0;
var space = 0.1 * size;
var N = 5;
var last = default(CANNON.RigidBody);
var boxGeometry = new THREE.CubeGeometry(he.x * 2, he.y * 2, he.z * 2);
for (var i = 0; i < N; i++)
{
var boxbody = new CANNON.RigidBody(mass, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
boxbody.position.set(5, (N - i) * (size * 2 + 2 * space) + size * 2 + space, 0);
boxbody.linearDamping = 0.01;
boxbody.angularDamping = 0.01;
//boxMesh.useQuaternion = true;
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
world.add(boxbody);
scene.add(boxMesh);
boxes.Add(boxbody);
boxMeshes.Add(boxMesh);
if (i != 0)
{
// Connect this body to the last one
var c1 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(-size, size + space, 0), last, new CANNON.Vec3(-size, -size - space, 0));
var c2 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(size, size + space, 0), last, new CANNON.Vec3(size, -size - space, 0));
world.addConstraint(c1);
world.addConstraint(c2);
}
else
{
mass = 0.3;
}
last = boxbody;
}
}
#endregion
#endregion
var dt = 1.0 / 60;
controls.enabled = true;
// vr and tilt shift?
Native.window.onframe += delegate
{
if (controls.enabled)
{
// how big of a world can we hold?
// async ?
world.step(dt);
// Update ball positions
for (var i = 0; i < balls.Count; i++)
{
balls[i].position.copy(ballMeshes[i].position);
balls[i].quaternion.copy(ballMeshes[i].quaternion);
}
// Update box positions
for (var i = 0; i < boxes.Count; i++)
{
boxes[i].position.copy(boxMeshes[i].position);
boxes[i].quaternion.copy(boxMeshes[i].quaternion);
}
}
controls.update(Date_now() - time);
renderer.render(scene, camera);
time = Date_now();
};
#region havePointerLock
renderer.domElement.onclick +=
delegate
{
renderer.domElement.requestPointerLock();
};
#endregion
#region onmousedown
renderer.domElement.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");
renderer.domElement.requestFullscreen();
renderer.domElement.requestPointerLock();
return;
}
var ballradius = 0.1 + Math_random() * 0.9;
var ballShape = new CANNON.Sphere(ballradius);
var ballGeometry = new THREE.SphereGeometry(ballShape.radius, 32, 32);
var shootDirection = new THREE.Vector3();
var shootVelo = 15;
var projector = new THREE.Projector();
Action<THREE.Vector3> getShootDir = (targetVec) =>
{
var vector = targetVec;
targetVec.set(0, 0, 1);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray( (THREE.Vector3)(object)controls_sphereBody.position,
vector
//.subSelf(controls_sphereBody.position)
.normalize()
);
targetVec.x = ray.direction.x;
targetVec.y = ray.direction.y;
targetVec.z = ray.direction.z;
};
var x = controls_sphereBody.position.x;
var y = controls_sphereBody.position.y;
var z = controls_sphereBody.position.z;
// could we attach physics via binding list?
var ballBody = new CANNON.RigidBody(1, ballShape);
var ballMesh = new THREE.Mesh(ballGeometry, material);
world.add(ballBody);
scene.add(ballMesh);
ballMesh.castShadow = true;
ballMesh.receiveShadow = true;
balls.Add(ballBody);
ballMeshes.Add(ballMesh);
getShootDir(shootDirection);
ballBody.velocity.set(shootDirection.x * shootVelo,
shootDirection.y * shootVelo,
shootDirection.z * shootVelo);
// // Move the ball outside the player sphere
x += shootDirection.x * (controls_sphereShape.radius + ballShape.radius);
y += shootDirection.y * (controls_sphereShape.radius + ballShape.radius);
z += shootDirection.z * (controls_sphereShape.radius + ballShape.radius);
ballBody.position.set(x, y, z);
ballMesh.position.set(x, y, z);
//ballMesh.useQuaternion = true;
};
#endregion
//var ze = new ZeProperties();
//ze.Show();
//ze.Left = 0;
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
}
public override void Init()
{
base.Init();
controls = new THREE.TrackballControls(camera, Container);
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = new int[] { 65, 83, 68 };
scene = new THREE.Scene();
// THREE.FogExp2 fg2 = new THREE.FogExp2(new THREE.Color().setHex(0xcccccc), 0.002);
THREE.FogExp2 fg2 = new THREE.FogExp2(0xcccccc, 0.002);
scene.fog = fg2;
var geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
var material = new THREE.MeshPhongMaterial();
material.color = new THREE.Color().setHex(0xffffff); // 0xffffff;
material.shading = THREE.ShadingType.FlatShading;
for (var i = 0; i < 500; i++)
{
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = (Math.Random() - 0.5) * 1000;
mesh.position.y = (Math.Random() - 0.5) * 1000;
mesh.position.z = (Math.Random() - 0.5) * 1000;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add(mesh);
}
// lights
THREE.Light light = new THREE.DirectionalLight();
light.color = new THREE.Color().setHex(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
light = new THREE.DirectionalLight();
light.color = new THREE.Color().setHex(0x002288);
light.position.set(-1, -1, -1);
scene.add(light);
light = new THREE.AmbientLight(0x222222);
light.color = new THREE.Color().setHex(0x222222);
scene.add(light);
// renderer
renderer = new THREE.WebGLRenderer(false);
renderer.antialias = false;
renderer.setClearColor(scene.fog.color);
//TODO: renderer.setPixelRatio( Window.devicePixelRatio );
renderer.setSize(Width, Height);
Container.AppendChild(renderer.domElement);
//stats = new Stats();
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.top = '0px';
//stats.domElement.style.zIndex = 100;
//container.appendChild( stats.domElement );
//
//
}
/* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/
*/
/// <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(IDefault page = null)
{
var SCREEN_WIDTH = Native.window.Width;
var SCREEN_HEIGHT = Native.window.Height;
//var ,stats;
//var mesh, zmesh, geometry;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = SCREEN_WIDTH / 2;
var windowHalfY = SCREEN_HEIGHT / 2;
var lastUpdate = new IDate().getTime();
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000);
camera.position.z = 50;
camera.updateMatrix();
var scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight(0x222222);
ambient.position.z = -300;
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(-1, 0, 1);
directionalLight.position.normalize();
scene.add(directionalLight);
var dLight = new THREE.DirectionalLight(0xffeedd);
dLight.position.set(1, 0, 1);
dLight.position.normalize();
scene.add(dLight);
// init the WebGL renderer and append it to the Dom
var renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.autoClear = false;
renderer.domElement.AttachTo(container);
#region createScene
Action <object, f, f, f, f> createScene = (geometry, x, y, z, b) =>
{
//var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
var zmesh = new THREE.Mesh(geometry);
zmesh.position.x = x;
zmesh.position.z = y;
zmesh.position.y = z;
zmesh.scale.x = 5f;
zmesh.scale.y = 5f;
zmesh.scale.z = 5f;
//zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
};
#endregion
// message: "Unexpected token /"
var loader = new THREE.JSONLoader();
Action <object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); };
loader.load(
url: new invade().Content.src,
callback: IFunction.OfDelegate(callbackMale)
);
// postprocessing
var composer = new THREE.EffectComposer(renderer);
var renderModel = new THREE.RenderPass(scene, camera);
composer.addPass(renderModel);
var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false );
effectFilm.renderToScreen = true;
composer.addPass(effectFilm);
#region IsDisposed
var IsDisposed = false;
Dispose = delegate
{
if (IsDisposed)
{
return;
}
IsDisposed = true;
renderer.domElement.Orphanize();
};
#endregion
#region getFrametime
Func <long> getFrametime = () =>
{
var now = new IDate().getTime();
var tdiff = (now - lastUpdate) / 1000;
lastUpdate = now;
return(tdiff);
};
#endregion
#region render
Action render = delegate
{
var delta = getFrametime();
camera.position.x += (mouseX - camera.position.x) * .05f;
camera.position.y += (-mouseY - camera.position.y) * .05f;
camera.updateMatrix();
//renderer.render( scene, camera );
renderer.clear();
composer.render(delta);
};
#endregion
#region onmousemove
Native.document.onmousemove +=
e =>
{
mouseX = (e.CursorX - windowHalfX);
mouseY = (e.CursorY - windowHalfY);
};
#endregion
Native.window.onframe +=
delegate
{
if (IsDisposed)
{
return;
}
render();
};
#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)
{
var oo = new List <THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
Native.window.onframe +=
delegate
{
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.001
);
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(window.Width, window.Height);
};
#endregion
var ref0 = new TexturesImages();
//var texture = new THREE.Texture(
// //new HTML.Images.FromAssets.ash_uvgrid01()
// //new HTML.Images.FromAssets.texture_palm()
// new TLC200_Side_89pc()
// );
//texture.needsUpdate = true;
// X:\jsc.svn\examples\javascript\WebGL\WebGLMTLExperiment\WebGLMTLExperiment\Application.cs
var loader = new THREE.OBJMTLLoader();
loader.load(
"assets/WebGLOBJToyota/LX570_2008.obj",
"assets/WebGLOBJToyota/LX570_2008.mtl",
new Action <THREE.Object3D>(
o =>
{
Console.WriteLine("onload " + new { o });
// need to use
// Toyota Land Cruiser 200 Series aka Lexus LX 570_2008.mtl
// http://pages.cs.wisc.edu/~lizy/mrdoob-three.js-ef5f05d/examples/webgl_loader_obj_mtl.html
o.scale = new THREE.Vector3(40, 40, 40);
o.position.y = -80;
scene.add(o);
oo.Add(o);
}
),
new Action <object>(
o =>
{
Console.WriteLine("progress " + new { o });
}
),
new Action <object>(
o =>
{
Console.WriteLine("error " + new { o });
}
)
);
}
/// <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)
{
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
Native.window.onframe +=
delegate
{
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.001
);
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(window.Width, window.Height);
};
#endregion
var ref0 = new TexturesImages();
//var texture = new THREE.Texture(
// //new HTML.Images.FromAssets.ash_uvgrid01()
// //new HTML.Images.FromAssets.texture_palm()
// new TLC200_Side_89pc()
// );
//texture.needsUpdate = true;
// X:\jsc.svn\examples\javascript\WebGL\WebGLMTLExperiment\WebGLMTLExperiment\Application.cs
var loader = new THREE.OBJMTLLoader();
loader.load(
"assets/WebGLOBJToyota/LX570_2008.obj",
"assets/WebGLOBJToyota/LX570_2008.mtl",
new Action<THREE.Object3D>(
o =>
{
Console.WriteLine("onload " + new { o });
// need to use
// Toyota Land Cruiser 200 Series aka Lexus LX 570_2008.mtl
// http://pages.cs.wisc.edu/~lizy/mrdoob-three.js-ef5f05d/examples/webgl_loader_obj_mtl.html
o.scale = new THREE.Vector3(40, 40, 40);
o.position.y = -80;
scene.add(o);
oo.Add(o);
}
),
new Action<object>(
o =>
{
Console.WriteLine("progress " + new { o });
}
),
new Action<object>(
o =>
{
Console.WriteLine("error " + new { o });
}
)
);
}
/// <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)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
var oo = new List <THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
1000
//2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
this.canvas = (IHTMLCanvas)renderer.domElement;
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
Native.window.onframe +=
delegate
{
renderer.clear();
//camera.aspect = window.aspect;
//camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
//camera.aspect = canvas.aspect;
camera.updateProjectionMatrix();
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.0001
);
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
new Cisco().Source.Task.ContinueWithResult(
dae =>
{
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
//dae.castShadow = true;
//dae.receiveShadow = true;
dae.scale.x = 5;
dae.scale.y = 5;
dae.scale.z = 5;
dae.position.y = -80;
scene.add(dae);
oo.Add(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)
{
// why are the trucks black?
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
// what will happen if we resync THREE version from 70 to?
Native.document.title = new { THREE.REVISION }.ToString();
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
//var ambient = new THREE.AmbientLight(0x101030);
var ambient = new THREE.AmbientLight(0x808080);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd, 0.7);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
this.canvas = (IHTMLCanvas)renderer.domElement;
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Native.window.onframe +=
delegate
{
renderer.clear();
//camera.aspect = window.aspect;
//camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
//camera.aspect = canvas.aspect;
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.0001
);
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
new truck().Source.Task.ContinueWithResult(
dae =>
{
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = 65;
dae.scale.x = 10;
dae.scale.y = 10;
dae.scale.z = 10;
dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
}
);
//var ref0 = "assets/WebGLColladaExperiment/HZCannon_capture_009_04032013_192834.png";
//new HZCannon().Source.Task.ContinueWithResult(
// dae =>
// {
// //dae.scale.x = 30;
// //dae.scale.y = 30;
// //dae.scale.z = 30;
// dae.castShadow = true;
// dae.receiveShadow = true;
// dae.scale.x = 3;
// dae.scale.y = 3;
// dae.scale.z = 3;
// dae.position.y = -80;
// scene.add(dae);
// oo.Add(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)
{
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)
{
// "X:\opensource\github\three.js\examples\canvas_camera_orthographic.html"
// if i type THREE, would jsc be able to add THREE package on rebuild?
// Error 136 The type or namespace name 'THREE' could not be found (are you missing a using directive or an assembly reference?) X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs 35 26 WebGLOrthographicCamera
// X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs
var camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -500, 1000);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
var scene = new THREE.Scene();
// Grid
var size = 500;
var step = 50;
Func<double> random = new Random().NextDouble;
{
var geometry = new THREE.Geometry();
for (var i = -size; i <= size; i += step)
{
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i));
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i));
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size));
((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial(new { color = 0x000000, opacity = 0.2 });
var line = new THREE.Line(geometry, material);
line.type = THREE.LinePieces;
scene.add(line);
}
#region Cubes
{
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshLambertMaterial(new { color = 0xffffff, shading = THREE.FlatShading, overdraw = 0.5 });
for (var i = 0; i < 100; i++)
{
var cube = new THREE.Mesh(geometry, material);
cube.scale.y = Math.Floor(random() * 2 + 1);
cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
}
}
#endregion
#region Lights
var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
scene.add(ambientLight);
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = random() - 0.5;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
{
var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));
directionalLight.position.x = random() - 0.5;
directionalLight.position.y = random() - 0.5;
directionalLight.position.z = random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
}
#endregion
//var renderer = new THREE.CanvasRenderer();
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xf0f0f0);
//renderer.setSize(Native.window.Width, Native.window.Height);
renderer.setSize();
renderer.domElement.AttachToDocument();
//window.addEventListener( 'resize', onWindowResize, false );
var s = Stopwatch.StartNew();
Native.window.onframe +=
e =>
{
// jsc, when can we have the edit and continue already?
//var timer = s.ElapsedMilliseconds * 0.1;
var timer = s.ElapsedMilliseconds * 0.0001;
camera.position.x = Math.Cos(timer) * 200;
camera.position.z = Math.Sin(timer) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
}
/// <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)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
window.aspect,
1,
1000
//2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// WebGLRenderer preserveDrawingBuffer
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
renderer.setClearColor(0xfffff, 1);
renderer.setSize(window.Width, window.Height);
renderer.domElement.AttachToDocument();
renderer.domElement.style.SetLocation(0, 0);
this.canvas = (IHTMLCanvas)renderer.domElement;
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
Native.window.onframe +=
delegate
{
renderer.clear();
//camera.aspect = window.aspect;
//camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
//camera.aspect = canvas.aspect;
camera.updateProjectionMatrix();
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.0001
);
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
if (canvas.parentNode == Native.document.body)
{
renderer.setSize(window.Width, window.Height);
}
};
#endregion
new Cisco().Source.Task.ContinueWithResult(
dae =>
{
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
//dae.castShadow = true;
//dae.receiveShadow = true;
dae.scale.x = 5;
dae.scale.y = 5;
dae.scale.z = 5;
dae.position.y = -80;
scene.add(dae);
oo.Add(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)
{
// 1e40:01:01 RewriteToAssembly error: System.MissingMethodException: Method not found: 'Void ScriptCoreLib.JavaScript.DOM.IWindow.add_onframe(System.Action`1<Int32>)'.
#if chrome_works_again
#region AtFormCreated
FormStyler.AtFormCreated =
s =>
{
s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
};
#endregion
// chrome 31 wont load view-source
// chrome 33 shows black window. nice.
#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.DefaultTitle = "Droplet";
//chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text,
AtFormCreated: FormStyler.AtFormCreated
);
return;
}
#endregion
#endif
#region clouds
new WebGLClouds.HTML.Pages.Default().With(
layout =>
{
layout.body.AttachTo(page.clouds);
new WebGLClouds.Application(layout);
}
);
#endregion
page.header.style.backgroundColor = "";
page.header.css.style.transition = "background-color 200ms linear";
page.header.css.style.backgroundColor = "rgba(255, 255, 0, 0)";
//page.header.css.style.backgroundColor = "rgba(255, 255, 0, 0.2)";
page.header.css.hover.style.backgroundColor = "rgba(255, 255, 0, 1.0)";
Native.window.onframe +=
delegate
{
if (Native.document.body.scrollTop == 0)
page.header.css.style.backgroundColor = "rgba(255, 255, 0, 0)";
else
page.header.css.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
};
var oo = new List<THREE.Object3D>();
var window = Native.window;
var camera = new THREE.PerspectiveCamera(
45,
page.header.clientWidth / (double)page.header.clientHeight,
1,
2000
);
camera.position.z = 400;
// scene
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
var renderer = new THREE.WebGLRenderer();
//renderer.domElement.AttachToDocument();
renderer.domElement.AttachTo(page.header);
renderer.setSize(page.header.clientWidth, page.header.clientHeight);
//renderer.setSize(window.Width, window.Height);
//renderer.domElement.style.SetLocation(0, 0);
var mouseX = 0;
var mouseY = 0;
var st = new Stopwatch();
st.Start();
Native.window.onframe +=
delegate
{
oo.WithEach(
x =>
x.rotation.y = st.ElapsedMilliseconds * 0.001
);
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = page.header.clientWidth / (double)page.header.clientHeight;
camera.updateProjectionMatrix();
//renderer.setSize(window.Width, window.Height);
renderer.setSize(page.header.clientWidth, page.header.clientHeight);
};
var data = Book1.GetDataSet();
#region bind
Func<string, IHTMLElement, DataGridView> bind =
(DataMember, c) =>
{
var g = new DataGridView
{
BackgroundColor = Color.Transparent,
// does this work?
DefaultCellStyle = new DataGridViewCellStyle
{
SelectionBackColor = Color.Black,
SelectionForeColor = Color.Yellow,
//BackColor = Color.Transparent
//BackColor = Color.FromArgb(0x05, 0, 0, 0)
BackColor = Color.FromArgb(0x3f, 255, 255, 255)
},
ColumnHeadersDefaultCellStyle = new DataGridViewCellStyle
{
BackColor = Color.FromArgb(0x8f, 255, 255, 255)
},
SelectionMode = DataGridViewSelectionMode.FullRowSelect,
AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill,
// do we have a test for this?
AllowUserToAddRows = false,
//AllowUserToDeleteRows = false,
RowHeadersVisible = false,
// cannot hide column headers yet
// script: error JSC1000: No implementation found for this native method, please implement [System.Windows.Forms.DataGridView.set_ColumnHeadersVisible(System.Boolean)]
//ColumnHeadersVisible = false,
DataSource = data,
DataMember = DataMember,
};
// this should be the one that maximizes itself onto the parent which is supposed to be absolute in size
//g.GetHTMLTarget().With(
// div =>
// {
// //div.style.reset();
// // no scrollbars, thanks
// div.style.overflow = IStyle.OverflowEnum.hidden;
// (div.style as dynamic).zIndex = "";
// div.style.position = IStyle.PositionEnum.relative;
// div.style.left = "";
// div.style.top = "";
// div.style.right = "";
// }
//);
c.style.position = IStyle.PositionEnum.relative;
c.style.height = "20em";
c.Clear();
g.AttachControlTo(c);
return g;
};
#endregion
bind("Assets", page.assets);
bind("Transactions", page.transactions).ReadOnly = true;
// script: error JSC1000: No implementation found for this native method, please implement [System.Data.DataTableCollection.get_Item(System.String)]
var data_Assets = data.Tables["Assets"];
var data_Transactions = data.Tables["Transactions"];
#region data_Assets_NewRow
Action<DataRow> data_Assets_NewRow =
SourceRow =>
{
var r = new Random();
new sack_of_gold2().Source.Task.ContinueWithResult(
o =>
{
o.position.y = -80;
scene.add(o);
oo.Add(o);
o.position.x = r.Next(-250, 250);
o.position.z = r.Next(-400, 200);
(o as dynamic).scale = new THREE.Vector3(0.5, 0.5, 0.5);
data_Assets.RowDeleting +=
(sender, e) =>
{
if (SourceRow != e.Row)
return;
scene.remove(o);
oo.Remove(o);
data_Transactions.Rows.Add(
"now", "item removed -" + SourceRow["Net worth"]
);
};
}
);
};
#endregion
data_Assets.Rows.AsEnumerable().WithEach(data_Assets_NewRow);
// "X:\jsc.svn\examples\javascript\DropFileIntoSQLite\DropFileIntoSQLite.sln"
// X:\jsc.svn\examples\javascript\DragDataTableIntoCSVFile\DragDataTableIntoCSVFile\Application.cs
#region ondragstart
page.header.ondragstart +=
e =>
{
data_Assets.Rows.AsEnumerable().FirstOrDefault().With(
SourceRow =>
{
// x:\jsc.svn\examples\javascript\dropfileintosqlite\dropfileintosqlite\application.cs
data_Assets.Rows.Remove(SourceRow);
//data_Assets.Rows.RemoveAt(0);
var clipboard = new DataTable();
clipboard.Columns.AddRange(
Enumerable.ToArray(
from x in data_Assets.Columns.AsEnumerable()
select new DataColumn { ColumnName = x.ColumnName }
)
);
clipboard.Rows.Add(
Enumerable.ToArray(
from x in data_Assets.Columns.AsEnumerable()
select SourceRow[x]
)
);
e.dataTransfer.effectAllowed = "copy";
var clipboard_string = StringConversionsForDataTable.ConvertToString(clipboard);
e.dataTransfer.setData(typeof(DataTable).Name, clipboard_string);
}
);
};
#endregion
// X:\jsc.svn\market\javascript\Abstractatech.JavaScript.FileStorage\Abstractatech.JavaScript.FileStorage\Application.cs
var dz = new DropZone();
var TimerHide = new ScriptCoreLib.JavaScript.Runtime.Timer(
delegate
{
dz.body.Orphanize();
}
);
#region ondragover
Action<DragEvent> ondragover =
evt =>
{
evt.stopPropagation();
evt.preventDefault();
if (evt.dataTransfer.types.Contains(typeof(DataTable).Name.ToLower()))
{
evt.dataTransfer.dropEffect = "copy"; // Explicitly show this is a copy.
dz.body.AttachTo(Native.document.documentElement);
dz.bglayer.style.transition = "background-color 500ms linear";
dz.bglayer.style.backgroundColor = "rgba(0,0,0, 0.7)";
TimerHide.Stop();
}
};
Native.Document.body.ondragover += ondragover;
dz.Container.ondragover += ondragover;
#endregion
dz.Container.ondragleave +=
evt =>
{
//Console.WriteLine("ondragleave");
//Console.WriteLine(" dz.Container.ondragleave");
TimerHide.StartTimeout(90);
evt.stopPropagation();
evt.preventDefault();
};
Native.window.onblur +=
delegate
{
data_Transactions.Rows.Add(
//"now", "item added +" + SourceRow["Net worth"]
"now", "blur"
);
};
Native.window.onfocus +=
delegate
{
data_Transactions.Rows.Add(
//"now", "item added +" + SourceRow["Net worth"]
"now", "focus"
);
};
data_Assets_NewRow +=
SourceRow =>
{
data_Transactions.Rows.Add(
//"now", "item added +" + SourceRow["Net worth"]
"now", "item added"
);
};
data_Assets.TableNewRow +=
(sender, e) =>
{
data_Assets_NewRow(e.Row);
};
#region ondrop
dz.Container.ondrop +=
evt =>
{
//Console.WriteLine("ondrop");
TimerHide.StartTimeout(90);
evt.stopPropagation();
evt.preventDefault();
if (evt.dataTransfer.items != null)
{
// X:\jsc.svn\examples\javascript\DragDataTableIntoCSVFile\DragDataTableIntoCSVFile\Application.cs
evt.dataTransfer.items.AsEnumerable().Where(
x =>
x.type.ToLower() ==
// let jsc type system sort it out?
// how much reflection does jsc give us nowadays?
typeof(DataTable).Name.ToLower()
).WithEach(
async xx =>
{
// http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dfnReturnLink-0
var DataTable_xml = await xx.getAsString();
var DataTable = StringConversionsForDataTable.ConvertFromString(DataTable_xml);
DataTable.Rows.AsEnumerable().WithEach(
SourceRow =>
{
data_Assets.Rows.Add(
Enumerable.ToArray(
from x in data_Assets.Columns.AsEnumerable()
select SourceRow[x]
)
);
}
);
}
);
}
};
#endregion
}
