// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://alteredqualia.com/three/examples/webgl_cars.html
// http://alteredqualia.com/xg/examples/animation_physics_terrain.html
// https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea
// Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P
// https://github.com/dotnet/roslyn/issues/98
//Icon image is missing.
//At least one new-style screenshot or video is required.
//Small tile image is missing.
//Please select a Primary Category for your item.
//Language is not selected.
// 640x400
// 128x128
// 440x280
public Application(IApp page)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128
Console.WriteLine("enter WebGLHZBlendCharacter");
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
Console.WriteLine("invoke TheServerWithAppWindow.Invoke");
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
{ TexturesImages ref0; }
// http://www.realitymeltdown.com/WebGL3/character-controller.html
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127
//Native.css
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
//Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46
// used by, for?
var clock = new THREE.Clock();
//var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 };
var scene = new THREE.Scene();
var skyScene = new THREE.Scene();
scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.domElement.AttachToDocument();
// this will mess up
// three.OrbitControls.js
// onMouseMove
//new IStyle(renderer.domElement)
//{
// position = IStyle.PositionEnum.absolute,
// left = "0px",
// top = "0px",
// right = "0px",
// bottom = "0px",
//};
//new { }.With(
// async delegate
// {
// await Native.window.async.onresize;
// // if the reload were fast, then we could actually do that:D
// Native.document.location.reload();
// }
//);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
while (true)
{
await Native.window.async.onframe;
cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
}
}
);
#endregion
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
scene.add(blendMesh);
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
blendMesh.showSkeleton(!xtrue);
var radius = blendMesh.geometry.boundingSphere.radius;
Native.document.title = new { radius }.ToString();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
camera.position.set(0.0, radius * 3, radius * 3.5);
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var controls = new THREE.OrbitControls(camera);
//controls.noPan = true;
//var loader = new THREE.JSONLoader();
//loader.load(new Models.ground().Content.src,
// new Action<THREE.Geometry, THREE.Material[]>(
// (xgeometry, materials) =>
// {
// var ground = new THREE.Mesh(xgeometry, materials[0]);
// ground.scale.set(20, 20, 20);
// ground.receiveShadow = true;
// ground.castShadow = true;
// scene.add(ground);
// }
// )
// );
#region createSky
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
dynamic shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
// We're inside the box, so make sure to render the backsides
// It will typically be rendered first in the scene and without depth so anything else will be drawn in front
var material = new THREE.ShaderMaterial(new
{
fragmentShader = shader.fragmentShader,
vertexShader = shader.vertexShader,
uniforms = shader.uniforms,
depthWrite = false,
side = THREE.BackSide
});
// THREE.CubeGeometry has been renamed to THREE.BoxGeometry
// The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values.
var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material);
//skyMesh.renderDepth = -10;
skyScene.add(skyMesh);
#endregion
////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height,
//// new
//// {
//// minFilter = THREE.LinearFilter,
//// magFilter = THREE.LinearFilter,
//// format = THREE.RGBFormat,
//// stencilBufer = false
//// }
////);
////var composer = new THREE.EffectComposer(renderer, renderTarget);
////composer.addPass(new THREE.RenderPass(skyScene, skyCamera));
////composer.addPass(new THREE.RenderPass(scene, camera));
////#region vblur
////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6;
////// Show Details Severity Code Description Project File Line
//////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
////(hblur.uniforms as dynamic).r.value = 0.5;
////(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
////composer.addPass(hblur);
////composer.addPass(vblur);
////#endregion
//composer.addPass(new THREE.RenderPass(scene, camera));
//
#region onframe
Native.window.onframe +=
delegate
{
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
blendMesh.updateSkeletonHelper();
}
controls.center.copy(blendMesh.position);
controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position = controls.center.clone().add(camOffset);
skyCamera.rotation.copy(camera.rotation);
//composer.render(0.1);
//renderer.clear();
renderer.render(skyScene, skyCamera);
renderer.render(scene, camera);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
)
);
}
public override void Init()
{
mouse = new THREE.Vector2();
raycaster = new THREE.Raycaster();
offset = new THREE.Vector3();
allObjects = new THREE.Mesh[] { };
CreateCamera();
CreateScene();
CreateBoxes();
plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2000.0, 2000.0, 8.0, 8.0),
new THREE.MeshBasicMaterial()
{
color = 0x000000, opacity = 0.25, transparent = true
}
);
plane.visible = false;
scene.add(plane);
CreateRenderer();
renderer.domElement.OnMouseMove = this.onDocumentMouseMove;
renderer.domElement.OnMouseDown = this.onDocumentMouseDown;
renderer.domElement.OnMouseUp = this.onDocumentMouseUp;
CreateTrackball();
}
void onDocumentMouseDown(Event arg)
{
if (!IsActive)
{
return;
}
MouseEvent e = arg.As <MouseEvent>();
e.PreventDefault();
THREE.Vector3 vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
THREE.Intersection[] intersects = raycaster.intersectObjects(allObjects);
if (intersects.Length > 0)
{
THREE.Intersection interSec = intersects[0];
THREE.Mesh m = interSec.Object as THREE.Mesh;
if (m != null)
{
controls.enabled = false;
selected = m;
intersects = raycaster.intersectObject(plane);
offset.copy(interSec.point).sub(plane.position);
Container.Style.Cursor = Cursor.Move;
}
}
}
public geometry_demo(string name, string category)
: base(name, category)
{
geometryIndex = 0;
currentMesh = null;
functions = new List <GeometryFunction>();
}
private THREE.Mesh MakeMesh(THREE.BoxGeometry geometry)
{
THREE.Material mat = null;
mat = new THREE.MeshLambertMaterial();
mat.color = new THREE.Color();
mat.color.setHex(Math.Random() * 0xffffff);
THREE.Mesh mesh = new THREE.Mesh(geometry, mat);
mesh.position.x = Math.Random() * 1000 - 500;
mesh.position.y = Math.Random() * 600 - 300;
mesh.position.z = Math.Random() * 800 - 400;
mesh.rotation.x = Math.Random() * 2 * Math.PI;
mesh.rotation.y = Math.Random() * 2 * Math.PI;
mesh.rotation.z = Math.Random() * 2 * Math.PI;
mesh.scale.x = Math.Random() * 2 + 1;
mesh.scale.y = Math.Random() * 2 + 1;
mesh.scale.z = Math.Random() * 2 + 1;
mesh.castShadow = true;
mesh.receiveShadow = true;
return(mesh);
}
private void ShowGeometry()
{
if (currentMesh != null)
{
scene.remove(currentMesh);
}
if (geometryIndex < 0)
{
geometryIndex = 0;
}
GeometryFunction f = functions[geometryIndex];
THREE.Geometry geometry = f.function();
THREE.Material mat = new THREE.MeshLambertMaterial();
mat.color = new THREE.Color().setHex(Math.Random() * 0xffffff);
currentMesh = new THREE.Mesh(geometry, mat);
scene.add(currentMesh);
dropDownButton.Text(f.name);
Render();
}
public geometry_demo(string name, string category)
: base(name, category)
{
geometryIndex = 0;
currentMesh = null;
functions = new List<GeometryFunction>();
}
public override void Init()
{
mouse = new THREE.Vector2();
raycaster = new THREE.Raycaster();
offset = new THREE.Vector3();
allObjects = new THREE.Mesh[] { };
CreateCamera();
CreateScene();
CreateBoxes();
plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2000.0, 2000.0, 8.0, 8.0),
new THREE.MeshBasicMaterial() { color = 0x000000, opacity = 0.25, transparent = true }
);
plane.visible = false;
scene.add(plane);
CreateRenderer();
renderer.domElement.OnMouseMove = this.onDocumentMouseMove;
renderer.domElement.OnMouseDown = this.onDocumentMouseDown;
renderer.domElement.OnMouseUp = this.onDocumentMouseUp;
CreateTrackball();
}
public override void Init()
{
DivElement div = new DivElement( )
{
InnerHTML = @"
W = translate |
E = rotate |
+ = increase size |
- = decrise seize <br />
Press Q to toggle world/local space"
};
Container.AppendChild(div);
renderer = new THREE.WebGLRenderer();
renderer.setSize(Width, Height);
renderer.sortObjects = false;
Container.AppendChild(renderer.domElement);
//
camera = new THREE.PerspectiveCamera(70, Width /Height, 1, 3000);
camera.position.set(1000, 500, 1000);
camera.lookAt(new THREE.Vector3(0, 200, 0));
scene = new THREE.Scene();
scene.add(new THREE.GridHelper(500, 100));
var light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(1, 1, 1);
scene.add(light);
THREE.Texture texture = THREE.ImageUtils.loadTexture("textures/crate.gif", THREE.MappingMode.UVMapping, base.Render); //render
texture.mapping = THREE.MappingMode.UVMapping;
texture.anisotropy = renderer.getMaxAnisotropy();
var geometry = new THREE.BoxGeometry(200, 200, 200);
THREE.Material material = new THREE.MeshLambertMaterial();
material.map = texture;
controls = new THREE.TransformControls(camera, renderer.domElement);
controls.addEventListener("change", base.Render);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
controls.attach(mesh);
scene.add(controls);
CreateTrackball();
Window.AddEventListener("keydown", this.SwitchCase, false);
}
public void MakeMesh()
{
THREE.SphereGeometry ballGeo = new THREE.SphereGeometry(Radius - 10, 20, 20);
THREE.MeshPhongMaterial ballMaterial = new THREE.MeshPhongMaterial();
ballMaterial.color = new THREE.Color().setHex(0xaaaaaa);
Mesh = new THREE.Mesh(ballGeo, ballMaterial);
Mesh.castShadow = true;
Mesh.receiveShadow = true;
Mesh.visible = Apply;
}
public void MakeMesh()
{
THREE.SphereGeometry ballGeo = new THREE.SphereGeometry(Radius - 10, 20, 20);
THREE.MeshPhongMaterial ballMaterial = new THREE.MeshPhongMaterial();
ballMaterial.color = new THREE.Color().setHex(0xaaaaaa);
Mesh = new THREE.Mesh(ballGeo, ballMaterial);
Mesh.castShadow = true;
Mesh.receiveShadow = true;
Mesh.visible = Apply;
}
private void CreateBoxes()
{
var geometry = new THREE.BoxGeometry(40, 40, 40);
for (var i = 0; i < 200; i++)
{
THREE.Mesh mesh = MakeMesh(geometry);
scene.add(mesh);
allObjects.Push(mesh);
}
}
public override void Init()
{
var width = Width;
var height = Height;
var info = Document.CreateElement("div");
info.InnerHTML = "Drag to change the view";
Container.AppendChild(info);
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
controls = new THREE.TrackballControls(camera);
scene = new THREE.Scene();
THREE.PointLight light = new THREE.PointLight(0xffffff);
light.position.set(500, 500, 500);
scene.add(light);
THREE.MeshLambertMaterial mat = new THREE.MeshLambertMaterial();
mat.shading = THREE.ShadingType.FlatShading;
sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 20, 10), mat);
scene.add(sphere);
THREE.MeshBasicMaterial mat2 = new THREE.MeshBasicMaterial();
mat2.color = 0xe0e0e0;
THREE.Mesh plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(400, 400), mat2);
plane.position.y = -200;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(width, height);
effect = new THREE.AsciiEffect(renderer, " +-Hgxyz");
effect.setSize(width, height);
Container.AppendChild(effect.domElement);
}
private void MakeClothMesh(THREE.Texture t)
{
THREE.Texture clothTexture = t;
clothTexture.wrapS = THREE.WrapType.MirroredRepeatWrapping;
clothTexture.wrapT = THREE.WrapType.RepeatWrapping;
clothTexture.repeat.y = -1;
clothTexture.anisotropy = 16;
THREE.MeshPhongMaterial clothMaterial = new THREE.MeshPhongMaterial();
clothMaterial.specular = new THREE.Color().setHex(0x030303);
//clothMaterial.color = new THREE.Color(1, 0.4, 0);
clothMaterial.map = clothTexture;
clothMaterial.side = THREE.SideType.DoubleSide;
clothMaterial.alphaTest = 0.5;
clothMaterial.wireframe = false;
clothMaterial.wireframeLinewidth = 2;
// cloth mesh
THREE.Mesh clothMesh = new THREE.Mesh(cloth.Geometry, clothMaterial);
clothMesh.position.set(0, 0, 0);
clothMesh.castShadow = true;
THREE.ShaderMaterial shaderMat = null;;
THREE.ShaderMaterialOptions o = new THREE.ShaderMaterialOptions()
{
texture = new THREE.Uniform()
{
type = "t", value = clothTexture
}
};
shaderMat = new THREE.ShaderMaterial();
shaderMat.side = THREE.SideType.DoubleSide;
string vertexShader = Shaders.vertex;
string fragmentShader = Shaders.fragment;
shaderMat.vertexShader = vertexShader;
shaderMat.fragmentShader = fragmentShader;
clothMesh.customDepthMaterial = shaderMat;
scene.add(clothMesh);
}
public void MakeMesh()
{
THREE.Geometry g = new THREE.BoxGeometry(Width - 25, Height - 25, Depth - 25);
THREE.MeshPhongMaterial mat = new THREE.MeshPhongMaterial();
mat.color = new THREE.Color().setHex(0xaaaaaa);
mat.transparent = false;
mat.opacity = 0.5;
Mesh = new THREE.Mesh(g, mat);
Mesh.castShadow = true;
Mesh.receiveShadow = true;
Mesh.visible = Apply;
Mesh.position.copy(Center);
}
private void MakePortal()
{
// poles
var poleGeo = new THREE.BoxGeometry(5, 375, 5);
var poleMat = new THREE.MeshPhongMaterial(); // { color: 0xffffff, specular: 0x111111, shininess: 100 } );
poleMat.color = new THREE.Color().setHex(0xffffff);
poleMat.specular = new THREE.Color().setHex(0x111111);
poleMat.shininess = 100;
THREE.Mesh mesh = new THREE.Mesh(poleGeo, poleMat);
mesh.position.x = -125;
mesh.position.y = -62;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
mesh = new THREE.Mesh(poleGeo, poleMat);
mesh.position.x = 125;
mesh.position.y = -62;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
mesh = new THREE.Mesh(new THREE.BoxGeometry(255, 5, 5), poleMat);
mesh.position.y = -250 + 750 / 2;
mesh.position.x = 0;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
var gg = new THREE.BoxGeometry(10, 10, 10);
mesh = new THREE.Mesh(gg, poleMat);
mesh.position.y = -250;
mesh.position.x = 125;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
mesh = new THREE.Mesh(gg, poleMat);
mesh.position.y = -250;
mesh.position.x = -125;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
}
void onDocumentMouseMove(Event arg)
{
if (!IsActive)
{
return;
}
MouseEvent e = arg.As <MouseEvent>();
e.PreventDefault();
SetMousePos(e);
raycaster.setFromCamera(mouse, camera);
THREE.Intersection[] intersects;
if (selected != null)
{
intersects = raycaster.intersectObject(plane);
selected.position.copy(intersects[0].point.sub(offset));
return;
}
intersects = raycaster.intersectObjects(allObjects);
if (intersects.Length > 0)
{
THREE.Intersection i = intersects[0];
THREE.Mesh m = i.Object as THREE.Mesh;
if (m != null && m != intersected)
{
intersected = m;
plane.position.copy(intersected.position);
plane.lookAt(camera.position);
}
Container.Style.Cursor = Cursor.Pointer;
}
else
{
intersected = null;
Container.Style.Cursor = Cursor.Auto;
}
}
public override void Init()
{
var width = Width;
var height = Height;
var info = Document.CreateElement("div");
info.InnerHTML = "Drag to change the view";
Container.AppendChild(info);
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
controls = new THREE.TrackballControls(camera);
scene = new THREE.Scene();
THREE.PointLight light = new THREE.PointLight(0xffffff);
light.position.set(500, 500, 500);
scene.add(light);
THREE.MeshLambertMaterial mat = new THREE.MeshLambertMaterial();
mat.shading = THREE.ShadingType.FlatShading;
sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 20, 10), mat);
scene.add(sphere);
THREE.MeshBasicMaterial mat2 = new THREE.MeshBasicMaterial();
mat2.color = 0xe0e0e0;
THREE.Mesh plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(400, 400), mat2);
plane.position.y = -200;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(width, height);
effect = new THREE.AsciiEffect(renderer, " +-Hgxyz");
effect.setSize(width, height);
Container.AppendChild(effect.domElement);
}
private void MakeClothMesh(THREE.Texture t)
{
THREE.Texture clothTexture = t;
clothTexture.wrapS = THREE.WrapType.MirroredRepeatWrapping;
clothTexture.wrapT = THREE.WrapType.RepeatWrapping;
clothTexture.repeat.y = -1;
clothTexture.anisotropy = 16;
THREE.MeshPhongMaterial clothMaterial = new THREE.MeshPhongMaterial();
clothMaterial.specular = new THREE.Color().setHex(0x030303);
//clothMaterial.color = new THREE.Color(1, 0.4, 0);
clothMaterial.map = clothTexture;
clothMaterial.side = THREE.SideType.DoubleSide;
clothMaterial.alphaTest = 0.5;
clothMaterial.wireframe = false;
clothMaterial.wireframeLinewidth= 2;
// cloth mesh
THREE.Mesh clothMesh = new THREE.Mesh(cloth.Geometry, clothMaterial);
clothMesh.position.set(0, 0, 0);
clothMesh.castShadow = true;
THREE.ShaderMaterial shaderMat = null; ;
THREE.ShaderMaterialOptions o = new THREE.ShaderMaterialOptions()
{
texture = new THREE.Uniform() { type = "t", value = clothTexture }
};
shaderMat = new THREE.ShaderMaterial();
shaderMat.side = THREE.SideType.DoubleSide;
string vertexShader = Shaders.vertex;
string fragmentShader = Shaders.fragment;
shaderMat.vertexShader = vertexShader;
shaderMat.fragmentShader = fragmentShader;
clothMesh.customDepthMaterial = shaderMat;
scene.add(clothMesh);
}
private void MakeGroundPlane(THREE.Texture t)
{
THREE.Texture groundTexture = t;
groundTexture.wrapS = THREE.WrapType.RepeatWrapping;
groundTexture.wrapT = THREE.WrapType.RepeatWrapping;
groundTexture.repeat.set(25, 25);
groundTexture.anisotropy = 16;
var groundMaterial = new THREE.MeshPhongMaterial();
groundMaterial.color = new THREE.Color().setHex(0xffffff);
groundMaterial.specular = new THREE.Color().setHex(0x111111);
groundMaterial.map = groundTexture;;
THREE.Mesh planeMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial);
planeMesh.position.y = -250;
planeMesh.rotation.x = -Math.PI / 2;
planeMesh.receiveShadow = true;
scene.add(planeMesh);
}
void onDocumentMouseUp(Event arg)
{
if (!IsActive)
{
return;
}
MouseEvent e = arg.As <MouseEvent>();
e.PreventDefault();
controls.enabled = true;
if (intersected != null)
{
plane.position.copy(intersected.position);
selected = null;
}
Container.Style.Cursor = Cursor.Auto;
}
public void addLocation(double lat, double lon, double radius, double heigth, THREE.Object3D parent, double segments)
{
var phi = (lat) * Math.PI / 180;
var theta = (lon - 180) * Math.PI / 180;
var x = -(radius + heigth) * Math.Cos(phi) * Math.Cos(theta);
var y = (radius + heigth) * Math.Sin(phi);
var z = (radius + heigth) * Math.Cos(phi) * Math.Sin(theta);
var latLongOnSphere = new THREE.Vector3(x, y, z);
var p = new THREE.Mesh(
new THREE.SphereGeometry(
0.005,
(int)segments, (int)segments),
new THREE.MeshBasicMaterial(
new
{
color = "red"
})
);
p.position = latLongOnSphere;
parent.add(p);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
//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: "x360stereomidnightsun");
// 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
// crash
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
int cubefacesizeMAX = 1024; // 6 faces, ?
int cubefacesize = cubefacesizeMAX; // 6 faces, ?
//int cubefacesize = 1024; // 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, ?
// fast gif?
cubefacesize = 1024; // 6 faces, ?
// 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;
Native.css.style.backgroundColor = "darkcyan";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
IHTMLCanvas shader1canvas = null;
//return;
// Earth params
//var radius = 0.5;
//var radius = 1024;
//var radius = 2048;
//var radius = 512;
//var radius = 256;
//var radius = 400;
// can we have not fly beyond moon too much?
//var radius = 500;
var radius = 480;
//var segments = 32;
var segments = 128 * 2;
//var rotation = 6;
//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/x360stereomidnightsun/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg )
var far = 0xffffff;
new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument();
//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);
//scene.add(new THREE.AmbientLight(0x333333));
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xaaaaaa));
//scene.add(new THREE.AmbientLight(0xcccccc));
//scene.add(new THREE.AmbientLight(0xeeeeee));
scene.add(new THREE.AmbientLight(0xffffff));
//var light = new THREE.DirectionalLight(0xffffff, 1);
//// sun should be beyond moon
////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance);
////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//// where shall the light source be to see half planet?
//light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//scene.add(light);
//var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument();
//var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument();
//var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument();
//new IHTMLHorizontalRule { }.AttachToDocument();
// 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);
//renderer0.setClearColor(0x0, 1);
renderer0.setClearColor(0x0, 0);
//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);
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var maxfps = 60;
//var maxlengthseconds = 60;
var maxlengthseconds = 120;
var maxframes = maxlengthseconds * maxfps;
var frameIDanimation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "frameIDanimation", @checked = false }.AttachToDocument();
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 0, title = "frameIDslider" }.AttachToDocument();
//var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 1800, valueAsNumber = 1800 / 2, title = "frameIDslider" }.AttachToDocument();
new IHTMLHorizontalRule { }.AttachToDocument();
var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "camerax" }.AttachToDocument();
camerax.css.after.contentText = "x: ";
new IHTMLBreak { }.AttachToDocument();
//camerax.style.borderLeft = "1em solid red";
// 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 = -32, max = 32, valueAsNumber = 0, title = "cameray" }.AttachToDocument();
cameray.css.after.contentText = "y: ";
new IHTMLBreak { }.AttachToDocument();
// we wont be going to orbit
//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 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
//var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -2048 / 2, max = 0 + 2048 / 2, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
cameraz.css.after.contentText = "z: ";
// for render server
var fcamerax = 0.0;
var fcameray = 0.0;
var fcameraz = 0.0;
new IHTMLHorizontalRule { }.AttachToDocument();
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo
// not used for this example tho...
var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -180, max = 180, valueAsNumber = 0, title = "itemRotation" }.AttachToDocument();
var spriteOffset = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 11, valueAsNumber = 0, title = "spriteOffset" }.AttachToDocument();
//var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -90, max = 90, valueAsNumber = 33, title = "itemRotation" }.AttachToDocument();
//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;
// we wont be going to orbit
//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?
1.0 * (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,
1.0 * (cy + fcameray),
//1200c
1.0 * (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";
// roslyn!
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
// lets have the item twice the cube item size. and offset -0.5 to recenter.
// this wont work as we are cloning the buffer for now!
//var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize * 2);
var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPXitem.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasPXitem.canvas.title = "item";
canvasPXitem.canvas.AttachToDocument();
canvasPXitem.canvas.style.transformOrigin = "0 0";
canvasPXitem.canvas.style.transform = "scale(" + uizoom + ")";
canvasPXitem.canvas.style.border = "1px solid yellow";
//canvasPXitem.fillText("hello", 1, 1, cubefacesize);
//canvasPXitem.drawImage(
// //new IHTMLPre { "hello" }
// new IHTMLDiv { "hello world. can we draw html into 360 VR yet?" }, 0, 0, cubefacesize, cubefacesize
//);
// http://www.w3schools.com/tags/canvas_fillstyle.asp
canvasPXitem.fillStyle = "red";
// too big?
//canvasPXitem.fillRect(
// x: cubefacesize / 3,
// y: cubefacesize / 4,
// w: cubefacesize / 3,
// h: cubefacesize / 2
//);
// canvasPXitem.fillRect(
// x: (cubefacesize - cubefacesize / 6) / 2,
// y: (cubefacesize - cubefacesize / 3) / 2,
// w: cubefacesize / 6,
// h: cubefacesize / 3
//);
#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;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
// 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
// bots cannot get a bigger mp4 from yt, and vrideo renders 2k on gearvr.
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.galaxy_starfield().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().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 frame2 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument();
frame2.style.height = "270px";
frame2.style.width = "480px";
frame2.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 * 2 + 16 * 2, 8 + (int)(uizoom * cubefacesize + 8) * 3);
#region DirectoryEntry
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.style.cursor = IStyle.CursorEnum.pointer;
frame0.title = "save frame";
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>);
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
// asus will hang
// https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a
// can we get one frame into vr?
// cube: mesh to cast shadows
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// 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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 })
// );
// floor2.position.set(0, 0, -cubefacesize / 2);
// floor2.AttachTo(scene);
//}
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// 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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff })
// );
// floor2.position.set(-cubefacesize / 2, 0, 0);
// floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
// floor2.AttachTo(scene);
//}
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var texPXitem = new THREE.Texture(
//shader1canvas
canvasPXitem.canvas
) { needsUpdate = true };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = texPXitem,
transparent = true,
alphaTest = 0.5
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//floor2.position.set(0, 0, -cubefacesize * 0.55);
floor2.AttachTo(scene);
applycameraoffset += delegate
{
texPXitem.needsUpdate = true;
//floor2.position.set(-cubefacesize * 0.5, 0, 0);
//floor2.position.set(-cubefacesize * 0.33, 0, 0);
// floor2.position.set(-cubefacesize * 0.25, 0, 0);
//floor2.position.set(-cubefacesize * 0.225, 0, 0);
floor2.position.set(-cubefacesize * 0.23, 0, 0);
// too close!
//floor2.position.set(-cubefacesize * 0.20, 0, 0);
floor2.rotation.set(0, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2 + radians(itemRotation.valueAsNumber));
};
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs
// X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs
// hidden for alpha AppWindows
//#if FBACKGROUND
new IHTMLBreak { }.AttachToDocument();
var iskybox2 = new HTML.Images.FromAssets._2massAllskyGAMMA();
var iskybox1 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs();
var hideskybox1 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox1", @checked = true }.AttachToDocument();
var hideskybox2 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox2", @checked = false }.AttachToDocument();
#region drawStereoFrame
Func<CanvasRenderingContext2D, Task> drawStereoFrame = async canvasTB =>
{
//var xIPD = 4.0;
var xIPD = 6.0;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203/x360stereomidnightsun
// fake skybox?
canvasTB.fillStyle = "darkcyan";
canvasTB.fillRect(0, 0, c.width, c.height);
//canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2);
//canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2);
// 12 frames in total. lets add em all
// can we add a secondary stereo frame ? at 45deg?
var offsetrotation = 360 / 12;
hideskybox1.@checked = true;
hideskybox2.@checked = false;
// mono bg!
floor2.visible = false;
fcamerax = 0;
await Native.window.async.onframe;
await Native.window.async.onframe;
canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2);
canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2);
// keep only bg. hide stereo sprite
floor2.visible = true;
//await Native.window.async.onframe;
// we need our stereo item frame thanks. no bg.
hideskybox1.@checked = true;
hideskybox2.@checked = true;
await Native.window.async.onframe;
//fcamerax = -xIPD;
//await Native.window.async.onframe;
//var stereoT = new IHTMLImage { src = gl.canvas.toDataURL() };
//fcamerax = +xIPD;
//await Native.window.async.onframe;
//var stereoB = new IHTMLImage { src = gl.canvas.toDataURL() };
////await Native.window.async.onframe;
//await stereoB.async.oncomplete;
// we now have a stereo sprite.
// can we rotate it on top of the background?
// 8K fulldome is a resolution of 8192×8192
// 8K UHD is a resolution of 7680 × 4320 (33.2 megapixels)
// 8192×4320 t
// Digital video formats with resolutions of 4K (3840×2160) and 8K (7680×4320)
// WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost ?
for (int stereoframei = 0; stereoframei < 12; stereoframei++)
{
spriteOffset.valueAsNumber = stereoframei;
Console.WriteLine(new { stereoframei });
double ioffsetdeg = offsetrotation * stereoframei;
ioffsetdeg += (degrees(frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2));
// follow the moon?
//stars.rotateOnAxis(new THREE.Vector3(0, -1, 0),
// frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2
//);
var ipxoffset = (int)Math.Floor(c.width * ioffsetdeg / 360);
ipxoffset = ipxoffset % c.width;
fcamerax = -xIPD;
await Native.window.async.onframe;
var stereoT = gl.canvas;
canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, ipxoffset, 0, c.width, c.height / 2);
canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, -c.width + ipxoffset, 0, c.width, c.height / 2);
fcamerax = +xIPD;
await Native.window.async.onframe;
var stereoB = gl.canvas;
canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, ipxoffset, c.height / 2, c.width, c.height / 2);
canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, -c.width + ipxoffset, c.height / 2, c.width, c.height / 2);
}
//var canvasTB8K = new CanvasRenderingContext2D(c.width * 2, c.height * 2);
//canvasTB8K.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height);
//canvasTB8K.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height);
// https://www.reddit.com/r/GearVR/comments/2vrfyu/id_suggest_makers_of_360_videos_make_them_the/
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203
// can we actually watch stereo _TB images on gearVR?
};
#endregion
#region stero
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
new IHTMLButton { "make me a stero TB image " }.AttachToDocument().With(
async e =>
{
// http://www.vrideo.com/watch/ALdE7mm
// https://www.youtube.com/watch?v=S3iTPxMIlCI
var onclick = e.async.onclick;
while (await onclick)
{
// keep it 4K, as hw, yt is not ready for 60fps 8K!
var canvasTB = new CanvasRenderingContext2D(c.width, c.height);
drawStereoFrame(canvasTB);
// gearVR will get a black screen
//
//frame2.src = canvasTB8K.canvas.toDataURL();
frame2.src = canvasTB.canvas.toDataURL();
onclick = e.async.onclick;
//while (!onclick.IsCompleted)
//{
// await Task.Delay(1000 / 30);
// frame0.src = f0.src;
// await Task.Delay(1000 / 30);
// frame0.src = f1.src;
//}
}
}
);
#endregion
#region render 60hz 30sec
new IHTMLButton {
//"render 60hz 30sec"
//$"render {maxfps}hz {maxlengthseconds}sec"
"render " + new {maxfps} + "hz " + new {maxlengthseconds} + "sec"
}.AttachToDocument().onclick += async e =>
{
e.Element.disabled = true;
//var canvasTB = new CanvasRenderingContext2D(c.width * 2, c.height * 2);
var canvasTB = new CanvasRenderingContext2D(c.width, c.height);
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 = 0;
//frameIDanimation.@checked = true;
frameIDslider.valueAsNumber = -1;
// allow the animation values to sink in
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
goto beforeframe;
// parallax offset?
await_nextframe:
var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".jpg";
status = "rendering... " + new { filename };
await drawStereoFrame(canvasTB);
//var xIPD = 4.0;
//// left eye
//fcamerax = -xIPD;
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
//var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//// right eye
//fcamerax = +xIPD;
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
//var f1 = new IHTMLImage { src = gl.canvas.toDataURL() };
//await f1.async.oncomplete;
//canvasTB.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height);
//canvasTB.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height);
// frame0 has been rendered
var swcapture = Stopwatch.StartNew();
status = "WriteAllBytes... " + new { filename };
//await Native.window.async.onframe;
// https://code.google.com/p/chromium/issues/detail?id=404301
if (dir == null)
{
frame2.src = canvasTB.canvas.toDataURL();
await Task.Delay(500);
}
else
await dir.WriteAllBytes(filename, canvasTB);
//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;
// design mode v render mode
if (cubefacesize < cubefacesizeMAX)
frameIDslider.valueAsNumber += 60;
else
frameIDslider.valueAsNumber++;
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 = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
// 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);
// some shaders need to know where the camera is looking from. can we tell them?
//fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//// up
//fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
// cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)));
// up
//fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcamerax += (1.0 / 60.0);
//fcamerax += (1.0 / 60.0) * 120;
// 60hz 30sec
if (frameIDslider.valueAsNumber < maxframes)
{
// 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 = frameIDslider.valueAsNumber, total.ElapsedMilliseconds };
vsync = default(TaskCompletionSource<object>);
// http://stackoverflow.com/questions/22899333/delete-javascript-blobs
e.Element.disabled = false;
};
#endregion
new { }.With(
async delegate
{
var tex1 = new the_midnight_sun_by_isilmetriel { };
await tex1.async.oncomplete;
// first one is 124, while others is 123?
var tex1w = 123;
//var tex1w = 120;
var tex1h = 626;
//canvasPXitem.drawImage(
// tex1, 2, 2, tex1w, tex1h, 0, 0, tex1w, tex1h
// );
// how long until jsc can upstream small updates to code?
//// canvasPXitem.drawImage(
//// (IHTMLCanvas)renderer0.domElement,
//// sx: (cubefacesize - cubefacesize / 6) / 2,
//// sy: (cubefacesize - cubefacesize / 3) / 2,
//// sw: cubefacesize / 6,
//// sh: cubefacesize / 3,
//// dx: (cubefacesize - cubefacesize / 6) / 2,
//// dy: (cubefacesize - cubefacesize / 3) / 2,
//// dw: cubefacesize / 6,
//// dh: cubefacesize / 3
////);
await iskybox2.async.oncomplete;
var bytes1 = await iskybox1.async.bytes;
//for (int ii = 0; ii < bytes.Length; ii += 4)
//{
// bytes[ii + 3] = (byte)(bytes[ii + 0]);
// bytes[ii + 0] = 0xff;
// bytes[ii + 1] = 0xff;
// bytes[ii + 2] = 0xff;
//}
var cc = new CanvasRenderingContext2D(iskybox1.width, iskybox1.height);
cc.bytes = bytes1;
//s.image = cc;
//s.needsUpdate = true;
var skybox1_material = new THREE.MeshBasicMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
map = new THREE.Texture { image = cc, needsUpdate = true },
side = THREE.BackSide,
transparent = true
});
var skybox1 = new THREE.Mesh(
//new THREE.SphereGeometry(far * 0.92, 64, 64),
//new THREE.SphereGeometry(far * 0.80, 64, 64),
// still zfighting
//new THREE.SphereGeometry(far * 0.50, 64, 64),
// the other option is to have a single bg and blend on tht. this is just a rotation visualization.
new THREE.SphereGeometry(far * 0.30, 64, 64),
skybox1_material
);
// http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity
//(stars_material as dynamic).opacity = 0.5;
hideskybox1.onchange += delegate
{
skybox1.visible = !hideskybox1.@checked;
};
skybox1.visible = !hideskybox1.@checked;
scene.add(skybox1);
applycameraoffset += delegate
{
if (frameIDanimation.@checked)
{
itemRotation.valueAsNumber = (frameIDslider.valueAsNumber / 2) % 360 - 180;
hideskybox1.@checked = (frameIDslider.valueAsNumber / 2 + 180) % 720 < 360;
}
};
// target bg
var skybox2 = new THREE.Mesh(
new THREE.SphereGeometry(far * 0.95, 64, 64),
new THREE.MeshBasicMaterial(
new
{
map = new THREE.Texture { image = iskybox2, needsUpdate = true },
side = THREE.BackSide,
transparent = true
})
);
skybox2.AttachTo(scene).With(
stars =>
{
applycameraoffset += delegate
{
skybox2.visible = !hideskybox2.@checked;
skybox1.rotation.set(0, 0, 0);
// spin
skybox1.rotateOnAxis(new THREE.Vector3(0, -1, 0),
frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2
);
// reset
stars.rotation.set(0, 0, 0);
// slow rotate in place
stars.rotateOnAxis(new THREE.Vector3(1, 0, 0),
frameIDslider.valueAsNumber / 3600.0 * Math.PI * 2
);
// follow the moon?
stars.rotateOnAxis(new THREE.Vector3(0, -1, 0),
frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2
);
};
}
);
// can we get our stereo sprite this way?
// do we get clean tiles with transparency?
// on x83 on frame0 we were able to hide skybox. how?
//hideskybox2.onchange += delegate
//{
// skybox2.visible = !hideskybox2.@checked;
//};
//skybox2.visible = !hideskybox2.@checked;
Console.WriteLine("skybox added");
//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;
//globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0;
//clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0;
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
applycameraoffset();
renderer0.clear();
// spriteOffset
canvasPXitem.drawImage(
tex1,
//2px black border!
//((tex1w + 4) * spriteOffset.valueAsNumber) + 2,
((tex1w + 2) * spriteOffset.valueAsNumber) + 3,
2, tex1w, tex1h,
// dest
(cubefacesize - tex1w) / 2,
(cubefacesize - tex1h) / 2,
tex1w, tex1h
);
//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?
// hide everything else
// inversion effect?
//// if (hideskybox1.@checked)
//// skybox1.visible = true;
//// else
//// skybox1.visible = false;
//// floor2.visible = false;
//// renderer0.render(scene, cameraPX);
//// //canvasPXitem.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203
// can we draw from that special image?
//canvasPXitem.drawImage(
// tex1, 2, 2, 124, 630 - 4, 0, 0, 124, 626
//);
//// canvasPXitem.drawImage(
//// (IHTMLCanvas)renderer0.domElement,
//// sx: (cubefacesize - cubefacesize / 6) / 2,
//// sy: (cubefacesize - cubefacesize / 3) / 2,
//// sw: cubefacesize / 6,
//// sh: cubefacesize / 3,
//// dx: (cubefacesize - cubefacesize / 6) / 2,
//// dy: (cubefacesize - cubefacesize / 3) / 2,
//// dw: cubefacesize / 6,
//// dh: cubefacesize / 3
////);
//// skybox1.visible = !hideskybox1.@checked;
//// floor2.visible = true;
#region x
canvasPX.clearRect(0, 0, cubefacesize, cubefacesize);
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
canvasNX.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
canvasPZ.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
canvasNZ.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
canvasPY.clearRect(0, 0, cubefacesize, cubefacesize);
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();
canvasNY.clearRect(0, 0, cubefacesize, cubefacesize);
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);
}
);
//if (cameraz.valueAsNumber == 0)
gl.clearColor(0, 0, 0, 0);
//else
//gl4K.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 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?");
}
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://threejs.org/examples/#webgl_materials_cubemap_dynamic
// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
// http://threejs.org/examples/#webgl_postprocessing_dof
// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var clock = new THREE.Clock();
var radius = 100;
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000);
camera.position.z = 200;
var skyScene = new THREE.Scene();
var scene = new THREE.Scene();
//scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.sortObjects = false;
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
//var material_depth = new THREE.MeshDepthMaterial();
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var sw = Stopwatch.StartNew();
for (var i = 1; i < 5; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 4 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 300;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
var _i = i;
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 4 * 500 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 300;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
}
#endregion
// maskpass
// THREE.EffectComposer relies on THREE.CopyShader
var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
// THREE.BokehPass relies on THREE.BokehShader
var bokehPass = new THREE.BokehPass(scene, camera, new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0,
width = Native.window.Width,
height = Native.window.Height
});
bokehPass.renderToScreen = true;
composer.addPass(bokehPass);
renderer.autoClear = false;
var controls = new THREE.OrbitControls(camera);
Native.document.onclick +=
delegate
{
// THREE.AnimationHandler.add() has been deprecated.
// how to make it work with bokah?
//THREE.AnimationHandler.update(1);
};
#region onframe
Native.window.onframe +=
delegate
{
controls.update();
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
//THREE.AnimationHandler.update(stepSize);
}
camera.position = controls.center.clone();
skyCamera.rotation.copy(camera.rotation);
composer.render(0.1);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// if we are running in a SYSTEM account
// the chrome no-sandbox only allows software renderer
// where we get 1 frame per sec.
// on older systems we may not get GL_OES_standard_derivatives
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
// ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
// or that system is just old as hell
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
//http://thematicmapping.org/playground/webgl/earth/
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222
// Earth params
var radius = 0.5;
//var segments = 32;
var segments = 128;
var rotation = 6;
var scene = new THREE.Scene();
locations = new ArrayList();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);
camera.position.z = 1.5;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
parent = new THREE.Object3D();
scene.add(parent);
#region sphere
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial(
new
{
map = new THREE.Texture().With(
async s =>
{
//0:75ms event: _2_no_clouds_4k_low view-source:36543
//Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
//Application Cache Progress event (2 of 2) 192.168.1.72/:1
//Application Cache Cached event 192.168.1.72/:1
//1:1018ms event: _2_no_clouds_4k_low done view-source:36543
//1:1019ms event: _2_no_clouds_4k view-source:36543
//event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
//1:16445ms event: _2_no_clouds_4k done
// ~ tilde to open css editor?
Console.WriteLine("event: _2_no_clouds_4k_low");
s.image = await new _2_no_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k_low done");
await 20000;
Console.WriteLine("event: _2_no_clouds_4k");
s.image = await new _2_no_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k done");
}
),
bumpMap = THREE.ImageUtils.loadTexture(
new elev_bump_4k().src
//new elev_bump_4k_low().src
),
// applies onyl to shaders to create the shadow
bumpScale = 0.001,
specularMap = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: water_4k_low");
s.image = await new water_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: water_4k_low done");
await 20000;
Console.WriteLine("event: water_4k");
s.image = await new water_4k();
s.needsUpdate = true;
Console.WriteLine("event: water_4k done");
}
),
//specular = new THREE.Color("grey")
specular = new THREE.Color(0xa0a0a0)
})
);
#endregion
// http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane
//sphere.rotation.y = rotation;
parent.rotation.y = rotation;
//sphere.position.x = 10;
//sphere.position.y = 10;
//sphere.position.z = 10;
//sphere.position.normalize();
//sphere.position.multiplyScalar(200);
parent.add(sphere);
//scene.add(sphere);
#region clouds
var clouds = new THREE.Mesh(
new THREE.SphereGeometry(
//radius + 0.003,
radius + 0.006,
segments, segments),
new THREE.MeshPhongMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(
// //new fair_clouds_4k().src
// new fair_clouds_4k_low().src
// ),
map = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: fair_clouds_4k_low");
s.image = await new fair_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k_low done");
await 20000;
Console.WriteLine("event: fair_clouds_4k");
s.image = await new fair_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k done");
}
),
transparent = true
})
);
//clouds.rotation.y = rotation;
parent.add(clouds);
//scene.add(clouds);
#endregion
var citiesData = new XElement("cities");
{
var cityH = new XElement("city");
cityH.Add(new XElement("name", "Tallinn"));
cityH.Add(new XElement("longitude", "24.7281"));
cityH.Add(new XElement("latitude", "59.4339"));
citiesData.Add(cityH);
}
{
var cityH = new XElement("city");
cityH.Add(new XElement("name", "London"));
cityH.Add(new XElement("longitude", "-0.116667"));
cityH.Add(new XElement("latitude", "51.5"));
citiesData.Add(cityH);
}
var shadowL = new ShadowLayout().AttachTo(Native.shadow);
page.dataHolder = citiesData;
#region Location on sphere
Action AddCities = async delegate
{
//var table = await this.GetAllCities();
//Console.WriteLine(table.Rows.Count.ToString());
//for (var r = 0; r < table.Rows.Count; r++)
//{
// var latitude = (double)table.Rows[r]["Latitude"];
// var longtitude = (double)table.Rows[r]["Longtitude"];
// addLocation(latitude, longtitude, radius, 0.001, parent, 6);
// Console.WriteLine(latitude.ToString());
// await 100;
//}
var elemList = citiesData.Elements();
Console.WriteLine(elemList.Count().ToString());
foreach (var i in elemList)
{
//Console.WriteLine(i.ToString());
//foreach (var t in i.Elements())
//{
// Console.WriteLine(t.ToString());
//}
//var l = i.Element("name");
//if (l == null)
//{
// Console.WriteLine("F**k");
//}
//else
//{
// Console.WriteLine(l.Value);
//}
//Console.WriteLine(i.Element("longitude"));
//Console.WriteLine(i.Element("latitude"));
var lat = i.Element("latitude");
if (lat != null)
{
Console.WriteLine("Latitude not null");
var latitude = Convert.ToDouble(lat.Value);
Console.WriteLine(latitude.ToString());
var longit = i.Element("longitude");
if (longit != null)
{
Console.WriteLine("Longitude not null");
var longtitude = Convert.ToDouble(longit.Value);
addLocation(latitude, longtitude, radius, 0.001, parent, 6);
Console.WriteLine(longtitude.ToString());
}
}
}
};
citiesData.Changed += (send, arg) =>
{
//if(arg.ObjectChange == XObjectChange.Value)
//{
//Console.WriteLine(citiesData);
//Console.WriteLine("Sender name "+((XAttribute)send).Name);
//Console.WriteLine("Sender val " + ((XAttribute)send).Value);
removeLocations();
AddCities();
//}
};
AddCities();
#endregion
var stars = new THREE.Mesh(
new THREE.SphereGeometry(90, 64, 64),
new THREE.MeshBasicMaterial(
new
{
map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
side = THREE.BackSide
})
);
scene.add(stars);
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachTo(shadowL.webGlCanvas);
this.canvas.style.SetLocation(0, 0);
// jsc, what pointers do we have in store?
this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;
var
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// //sphere.rotation.x,
// //sphere.rotation.y
//},
//clouds = new
//{
// //clouds.rotation.x,
// //clouds.rotation.y,
//},
CursorX = 0,
CursorY = 0
};
#region onmousedown
this.canvas.onmousedown +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
this.canvas.requestFullscreen();
this.canvas.requestPointerLock();
}
else
{
// movementX no longer works
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// sphere.rotation.x,
// sphere.rotation.y
//},
//clouds = new
//{
// clouds.rotation.x,
// clouds.rotation.y,
//},
e.CursorX,
e.CursorY
};
if (pointerLock)
{
// skip
}
else
{
e.CaptureMouse();
}
}
};
#endregion
var z = camera.position.z;
var sfx = new TestWebGLEarthShadowDomXML.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
{
autobuffer = true,
// this aint working
//loop = true
};
sfx.play();
//sfx.AttachToHead();
// http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/
this.canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 0.1 * e.WheelDirection;
z = z.Max(0.6).Min(4.5);
//Native.document.title = new { camera.position.z }.ToString();
};
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
this.canvas.onmousemove +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
if (pointerLock)
{
parent.rotation.x += 0.01 * e.movementY;
parent.rotation.y += 0.01 * e.movementX;
//sphere.rotation.x += 0.01 * e.movementY;
//sphere.rotation.y += 0.01 * e.movementX;
//clouds.rotation.x += 0.01 * e.movementY;
//clouds.rotation.y += 0.01 * e.movementX;
}
else
{
parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY);
parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX);
//sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
//sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);
//clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
//clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
}
// Native.document.title = new { e.movementX, e.movementY }.ToString();
}
};
#endregion
// could we
Native.window.onframe +=
e =>
{
if (this.canvas.parentNode == null)
{
return;
}
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
parent.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
{
renderer.setSize();
}
};
//new IStyle(this.canvas.css.before)
//{
// content = "'do a middle click to maximize the earth dashboard'",
// left = "1em",
// bottom = "1em",
// color = "white",
// position = IStyle.PositionEnum.absolute
//};
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
// http://threejs.org/examples/#webgl_postprocessing_dof
// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.sortObjects = false;
//var material_depth = new THREE.MeshDepthMaterial();
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
//var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading };
// red vs yellow
var parameters = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading };
var cubeMaterial = new THREE.MeshBasicMaterial(parameters);
var geo = new THREE.SphereGeometry(1, 20, 10);
var xgrid = 14;
var ygrid = 9;
var zgrid = 14;
var nobjects = xgrid * ygrid * zgrid;
var c = 0;
//var s = 0.25;
var s = 60;
for (var i = 0; i < xgrid; i++)
{
for (var j = 0; j < ygrid; j++)
{
for (var k = 0; k < zgrid; k++)
{
var mesh = new THREE.Mesh(geo, cubeMaterial);
var x = 200 * (i - xgrid / 2);
var y = 200 * (j - ygrid / 2);
var z = 200 * (k - zgrid / 2);
mesh.position.set(x, y, z);
mesh.scale.set(s, s, s);
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add(mesh);
//objects.push(mesh);
c++;
}
}
}
//scene.matrixAutoUpdate = false;
var renderPass = new THREE.RenderPass(scene, camera);
// THREE.BokehPass relies on THREE.BokehShader
var bokehPass = new THREE.BokehPass(scene, camera, new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0,
width = Native.window.Width,
height = Native.window.Height
});
bokehPass.renderToScreen = true;
// maskpass
// THREE.EffectComposer relies on THREE.CopyShader
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(bokehPass);
renderer.autoClear = false;
var effectController = new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0
};
//var matChanger = function() {
// postprocessing.bokeh.uniforms["focus"].value = effectController.focus;
// postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture;
// postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur;
// };
var controls = new THREE.OrbitControls(camera);
#region onframe
Native.window.onframe +=
delegate
{
controls.update();
camera.position = controls.center.clone();
composer.render(0.1);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
private void ShowGeometry()
{
if (currentMesh != null)
scene.remove(currentMesh);
if (geometryIndex < 0) geometryIndex = 0;
GeometryFunction f = functions[geometryIndex];
THREE.Geometry geometry = f.function();
THREE.Material mat = new THREE.MeshLambertMaterial();
mat.color =new THREE.Color().setHex( Math.Random() * 0xffffff);
currentMesh = new THREE.Mesh(geometry, mat);
scene.add(currentMesh);
dropDownButton.Text(f.name);
Render();
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chromeequirectangularcameraexperiment
// "x:\util\android-sdk-windows\platform-tools\adb.exe" install -r "r:\jsc.svn\examples\javascript\WebGL\WebGLVRHZTeaser\WebGLVRHZTeaser\bin\Debug\staging\WebGLVRHZTeaser.ApplicationWebService\staging.apk\staging\apk\bin\WebGLVRHZTeaser.Activities-release.apk"
//I/Web Console(25108): 0ms NewInstanceConstructor restore fields.. at http://10.144.157.179:23222/view-source:50800
//I/Web Console(25108): THREE.WebGLRenderer at http://10.144.157.179:23222/view-source:90370
//E/Web Console(25108): Error creating WebGL context. at http://10.144.157.179:23222/view-source:90581
//E/Web Console(25108): Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null at http://10.144.157.179:23222/view-source:90585
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
#if false
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
chrome.Notification.DefaultTitle = "HZ";
chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
#endif
// https://code.google.com/p/chromium/issues/detail?id=483890
Native.document.body.style.margin = "0px";
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.style.backgroundColor = "black";
Native.document.body.Clear();
// what dto do if webgl not supported?
double SCREEN_WIDTH = Native.window.Width;
double SCREEN_HEIGHT = Native.window.Height;
#region scene
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var sceneRenderTarget = new THREE.Scene();
var cameraOrtho = new THREE.OrthographicCamera(
(int)SCREEN_WIDTH / -2,
(int)SCREEN_WIDTH / 2,
(int)SCREEN_HEIGHT / 2,
(int)SCREEN_HEIGHT / -2,
-100000,
100000
);
cameraOrtho.position.z = 100;
sceneRenderTarget.add(cameraOrtho);
var camera = new THREE.PerspectiveCamera(
//40,
20,
//10,
Native.window.aspect, 2,
// how far out do we want to zoom?
200000
//9000
);
camera.position.set(-1200, 800, 1200);
var target = new THREE.Vector3(0, 0, 0);
scene.add(camera);
//scene.add(new THREE.AmbientLight(0x212121));
//var spotLight = new THREE.SpotLight(0xffffff, 1.15);
//spotLight.position.set(500, 2000, 0);
//spotLight.castShadow = true;
//scene.add(spotLight);
//var pointLight = new THREE.PointLight(0xff4400, 1.5);
//pointLight.position.set(0, 0, 0);
//scene.add(pointLight);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0x101030));
#endregion
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var renderer = new THREE.WebGLRenderer(
new
{
// http://stackoverflow.com/questions/20495302/transparent-background-with-three-js
alpha = true,
preserveDrawingBuffer = true,
antialias = true
}
);
renderer.setSize(1920, 1080);
//renderer.setSize(2560, 1440);
renderer.domElement.AttachToDocument();
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
var renderTarget = new THREE.WebGLRenderTarget(
Native.window.Width, Native.window.Height,
new
{
minFilter = THREE.LinearFilter,
magFilter = THREE.LinearFilter,
format = THREE.RGBAFormat,
stencilBufer = false
}
);
//var composer = new THREE.EffectComposer(renderer, renderTarget);
//var renderModel = new THREE.RenderPass(scene, camera);
//composer.addPass(renderModel);
//#region vblur
//var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
//var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6.0;
//var bluriness = 4.0;
//// Show Details Severity Code Description Project File Line
////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
//(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
//(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
//(hblur.uniforms as dynamic).r.value = 0.5;
//(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
//composer.addPass(hblur);
//composer.addPass(vblur);
//#endregion
// Uncaught TypeError: renderer.setSize is not a function
// Uncaught TypeError: renderer.getClearColor is not a function
var effect = new THREE.OculusRiftEffect(
renderer,
// how to get the vblur into oculus effect?
//renderModel,
//composer,
//renderTarget,
new
{
worldScale = 100,
//HMD
}
);
effect.setSize(1920, 1080);
//effect.setSize(2560, 1440);
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
//dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = Stopwatch.StartNew();
//Native.window.onframe += delegate
//{
// //dae.children[0].children[0].children.Last().al
// //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
// //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// could we get some film grain?
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(10, 10, 10);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 100;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
if (i % 2 == 0)
{
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
//blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
//blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
#endregion
#endif
}
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
scene.add(cube);
}
);
#endregion
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
//var controls = new THREE.OrbitControls(camera);
var camera_rotation_z = 0.0;
Native.window.onframe +=
delegate
{
////var delta = clock.getDelta();
//controls.update();
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
}
//camera.position = controls.center.clone();
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//var lat2 = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
//Native.document.title = new { lon0 }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = camera.position.x + (500 * Math.Sin(phi) * Math.Cos(theta));
target.y = camera.position.y + (500 * Math.Cos(phi));
target.z = camera.position.z + (500 * Math.Sin(phi) * Math.Sin(theta));
//controls.update();
//camera.position = controls.center.clone();
// camera beta tilt?
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
//composer.render(0.1);
//renderer.render(scene, camera);
effect.render(scene, camera);
};
new { }.With(
async delegate
{
retry:
//var s = (double)Native.window.Width / 1920.0;
//var s = (double)Native.window.Height / Native.screen.height;
//var s = (double)Native.window.Height / 1440;
var s = (double)Native.window.Height / 1080;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
// gamma -0 .. -90
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
Alternative calculation (replacing lines 99-107 above):
var compassHeading = Math.atan2(rA, rB);
if(rA < 0) {
compassHeading += 2 * Math.PI;
}
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection; ;
};
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://threejs.org/examples/#webgl_postprocessing_godrays
// view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var sunPosition = new THREE.Vector3(0, 1000, -1000);
var screenSpacePosition = new THREE.Vector3();
var mouseX = 0;
var mouseY = 0;
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
//var postprocessing = { enabled : true };
var orbitRadius = 200;
var bgColor = 0x000511;
var sunColor = 0xffee00;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
//
var materialDepth = new THREE.MeshDepthMaterial(new { });
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var loader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
loader.load(
new Models.tree().Content.src,
new Action <THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
// sphere
var geo = new THREE.SphereGeometry(1, 20, 10);
var sphereMesh = new THREE.Mesh(geo, materialScene);
var sc = 20;
sphereMesh.scale.set(sc, sc, sc);
scene.add(sphereMesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setClearColor(bgColor);
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.autoClear = false;
renderer.sortObjects = false;
var postprocessing_scene = new THREE.Scene();
var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000);
postprocessing_camera.position.z = 100;
postprocessing_scene.add(postprocessing_camera);
var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat };
var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
// investigate further for now.
// pars.format = THREE.LuminanceFormat;
// I would have this quarter size and use it as one of the ping-pong render
// targets but the aliasing causes some temporal flickering
var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Aggressive downsize god-ray ping-pong render targets to minimize cost
var w = Native.window.Width / 4;
var h = Native.window.Height / 4;
var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars);
var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars);
// god-ray shaders
// X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl
// these are special <script src="js/ShaderGodRays.js"></script>
var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic;
var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms);
var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayGenUniforms,
vertexShader = godraysGenShader.vertexShader,
fragmentShader = godraysGenShader.fragmentShader
});
var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic;
var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms);
var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayCombineUniforms,
vertexShader = godraysCombineShader.vertexShader,
fragmentShader = godraysCombineShader.fragmentShader
});
var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic;
var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms);
var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godraysFakeSunUniforms,
vertexShader = godraysFakeSunShader.vertexShader,
fragmentShader = godraysFakeSunShader.fragmentShader
});
postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor);
postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor);
postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75;
var postprocessing_quad = new THREE.Mesh(
new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height),
postprocessing_materialGodraysGenerate
);
postprocessing_quad.position.z = -9900;
postprocessing_scene.add(postprocessing_quad);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
//var planeMaterial = new THREE.MeshLambertMaterial(
// new
// {
// //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src),
// color = 0xA26D41
// //color = 0xff0000
// }
//);
//planeMaterial.map.repeat.x = 300;
//planeMaterial.map.repeat.y = 300;
//planeMaterial.map.wrapS = THREE.RepeatWrapping;
//planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.position.y = -.5f * 100;
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
//scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region Comanche
new Comanche().Source.Task.ContinueWithResult(
Comanche =>
{
Comanche.position.y = 200;
//dae.position.z = 280;
Comanche.AttachTo(scene);
//scene.add(dae);
//oo.Add(Comanche);
// wont do it
//dae.castShadow = true;
// http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
//var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
//helper.update();
//// If you want a visible bounding box
//scene.add(helper);
Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
Comanche.scale.set(0.5, 0.5, 0.5);
//helper.scale.set(0.5, 0.5, 0.5);
var s2w = Stopwatch.StartNew();
Native.window.onframe += delegate
{
//dae.children[0].children[0].children.Last().al
//dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
//dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
//rotation.y = sw.ElapsedMilliseconds * 0.01;
Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001;
//dae.children[0].children[0].children.Last().app
};
}
);
#endregion
var sw = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// Show Details Severity Code Description Project File Line
//Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238
Native.window.onframe +=
delegate
{
//var time = IDate.now() / 4000;
var time = sw.ElapsedMilliseconds / 4000.0;
sphereMesh.position.x = orbitRadius * Math.Cos(time);
sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100;
//controls.center.copy(blendMesh.position);
//controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position.x += (mouseX - camera.position.x) * 0.036;
//camera.position.y += (-(mouseY) - camera.position.y) * 0.036;
//camera.lookAt(scene.position);
// Find the screenspace position of the sun
screenSpacePosition.copy(sunPosition).project(camera);
screenSpacePosition.x = (screenSpacePosition.x + 1) / 2;
screenSpacePosition.y = (screenSpacePosition.y + 1) / 2;
// Give it to the god-ray and sun shaders
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
// -- Draw sky and sun --
// Clear colors and depths, will clear to sky color
renderer.clearTarget(postprocessing_rtTextureColors, true, true, false);
// Sun render. Runs a shader that gives a brightness based on the screen
// space distance to the sun. Not very efficient, so i make a scissor
// rectangle around the suns position to avoid rendering surrounding pixels.
var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader
var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected
screenSpacePosition.x *= Native.window.Width;
screenSpacePosition.y *= Native.window.Height;
renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH);
renderer.enableScissorTest(true);
postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors);
renderer.enableScissorTest(false);
// -- Draw scene objects --
// Colors
scene.overrideMaterial = null;
renderer.render(scene, camera, postprocessing_rtTextureColors);
// Depth
scene.overrideMaterial = materialDepth;
renderer.render(scene, camera, postprocessing_rtTextureDepth, true);
// -- Render god-rays --
// Maximum length of god-rays (in texture space [0,1]X[0,1])
var filterLen = 1.0;
// Samples taken by filter
var TAPS_PER_PASS = 6.0;
// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
// would start with a small filter support and grow to large. however
// the large-to-small order produces less objectionable aliasing artifacts that
// appear as a glimmer along the length of the beams
// pass 1 - render into first ping-pong target
var pass = 1.0;
var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// pass 2 - render into second ping-pong target
pass = 2.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1);
// pass 3 - 1st RT
pass = 3.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// final pass - composite god-rays onto colors
postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors;
postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine;
renderer.render(postprocessing_scene, postprocessing_camera);
postprocessing_scene.overrideMaterial = null;
};
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
// http://alteredqualia.com/three/examples/webgl_cars.html
// http://alteredqualia.com/xg/examples/animation_physics_terrain.html
// https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea
// Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P
// https://github.com/dotnet/roslyn/issues/98
//Icon image is missing.
//At least one new-style screenshot or video is required.
//Small tile image is missing.
//Please select a Primary Category for your item.
//Language is not selected.
// 640x400
// 128x128
// 440x280
public Application(IApp page)
{
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128
Console.WriteLine("enter WebGLHZBlendCharacter");
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
Console.WriteLine("invoke TheServerWithAppWindow.Invoke");
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
{ TexturesImages ref0; }
// http://www.realitymeltdown.com/WebGL3/character-controller.html
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127
//Native.css
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
//Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46
// used by, for?
var clock = new THREE.Clock();
//var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 };
var scene = new THREE.Scene();
var skyScene = new THREE.Scene();
scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0xffffff));
var lightOffset = new THREE.Vector3(0, 1000, 1000.0);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
//xlight.shadowCameraVisible = true;
scene.add(light);
var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.domElement.AttachToDocument();
// this will mess up
// three.OrbitControls.js
// onMouseMove
//new IStyle(renderer.domElement)
//{
// position = IStyle.PositionEnum.absolute,
// left = "0px",
// top = "0px",
// right = "0px",
// bottom = "0px",
//};
//new { }.With(
// async delegate
// {
// await Native.window.async.onresize;
// // if the reload were fast, then we could actually do that:D
// Native.document.location.reload();
// }
//);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
while (true)
{
await Native.window.async.onframe;
cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
}
}
);
#endregion
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
scene.add(blendMesh);
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
blendMesh.showSkeleton(!xtrue);
var radius = blendMesh.geometry.boundingSphere.radius;
Native.document.title = new { radius }.ToString();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
camera.position.set(0.0, radius * 3, radius * 3.5);
var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
skyCamera.position.set(0.0, radius * 3, radius * 3.5);
var controls = new THREE.OrbitControls(camera);
//controls.noPan = true;
//var loader = new THREE.JSONLoader();
//loader.load(new Models.ground().Content.src,
// new Action<THREE.Geometry, THREE.Material[]>(
// (xgeometry, materials) =>
// {
// var ground = new THREE.Mesh(xgeometry, materials[0]);
// ground.scale.set(20, 20, 20);
// ground.receiveShadow = true;
// ground.castShadow = true;
// scene.add(ground);
// }
// )
// );
#region createSky
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
dynamic shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
// We're inside the box, so make sure to render the backsides
// It will typically be rendered first in the scene and without depth so anything else will be drawn in front
var material = new THREE.ShaderMaterial(new
{
fragmentShader = shader.fragmentShader,
vertexShader = shader.vertexShader,
uniforms = shader.uniforms,
depthWrite = false,
side = THREE.BackSide
});
// THREE.CubeGeometry has been renamed to THREE.BoxGeometry
// The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values.
var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material);
//skyMesh.renderDepth = -10;
skyScene.add(skyMesh);
#endregion
////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height,
//// new
//// {
//// minFilter = THREE.LinearFilter,
//// magFilter = THREE.LinearFilter,
//// format = THREE.RGBFormat,
//// stencilBufer = false
//// }
////);
////var composer = new THREE.EffectComposer(renderer, renderTarget);
////composer.addPass(new THREE.RenderPass(skyScene, skyCamera));
////composer.addPass(new THREE.RenderPass(scene, camera));
////#region vblur
////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6;
////// Show Details Severity Code Description Project File Line
//////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
////(hblur.uniforms as dynamic).r.value = 0.5;
////(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
////composer.addPass(hblur);
////composer.addPass(vblur);
////#endregion
//composer.addPass(new THREE.RenderPass(scene, camera));
//
#region onframe
Native.window.onframe +=
delegate
{
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
blendMesh.updateSkeletonHelper();
}
controls.center.copy(blendMesh.position);
controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position = controls.center.clone().add(camOffset);
skyCamera.rotation.copy(camera.rotation);
//composer.render(0.1);
//renderer.clear();
renderer.render(skyScene, skyCamera);
renderer.render(scene, camera);
};
#endregion
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
}
)
);
}
public override void Init()
{
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000);
// create a render and set the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(Width, Height);
renderer.shadowMapEnabled = true;
// add the output of the renderer to the html element
Container.AppendChild(renderer.domElement);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial();
planeMaterial.color = new THREE.Color(0.9, 0.9, 0.9);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);
// create a cube
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial(); // { color = 0xff0000 };
cubeMaterial.color = new THREE.Color(1, 0, 0);
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// position the cube
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
// add the cube to the scene
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial(); // { color = 0x7777ff };
sphereMaterial.color = new THREE.Color(0, 0, 1);
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// position the sphere
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
// add the sphere to the scene
scene.add(sphere);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(); //0xffffff);
spotLight.color = new THREE.Color(1, 1, 1);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 10.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 };
}
/// <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);
};
}
/* 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
}
private THREE.Mesh MakeMesh(THREE.BoxGeometry geometry)
{
THREE.Material mat = null;
mat = new THREE.MeshLambertMaterial();
mat.color = new THREE.Color();
mat.color.setHex( Math.Random() * 0xffffff);
THREE.Mesh mesh = new THREE.Mesh(geometry, mat);
mesh.position.x = Math.Random() * 1000 - 500;
mesh.position.y = Math.Random() * 600 - 300;
mesh.position.z = Math.Random() * 800 - 400;
mesh.rotation.x = Math.Random() * 2 * Math.PI;
mesh.rotation.y = Math.Random() * 2 * Math.PI;
mesh.rotation.z = Math.Random() * 2 * Math.PI;
mesh.scale.x = Math.Random() * 2 + 1;
mesh.scale.y = Math.Random() * 2 + 1;
mesh.scale.z = Math.Random() * 2 + 1;
mesh.castShadow = true;
mesh.receiveShadow = true;
return mesh;
}
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)
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo
// https://www.reddit.com/r/GearVR/comments/35g8w7/real_world_stereoscopic_360_panoramas/
// https://www.reddit.com/r/oculus/comments/35gcn2/real_world_stereoscopic_panoramas_with_gear_vr/
// http://stackoverflow.com/questions/9032050/canvas-mask-an-image-and-preserve-its-alpha-channel
// https://3dwarehouse.sketchup.com/model.html?id=48bcce07b0baf689d9e6f00e848ea18
// https://www.youtube.com/watch?v=OurzBO1cDto
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
new IHTMLPre {
"loading stereo... 2MB!"
}.AttachToDocument();
// if this is a chrome app
// would GearVR 360 app be able to request current stereo cubemap?
// Uncaught TypeError: Cannot read property '0' of undefined
var keys = new int[0xffff];
//c = a[0].keys[jAEABqtXvT6n4h6m6ZavdA(b)];
//d = c[0];
//c[0] = (((d + 1)));
Native.document.body.onkeyup +=
e =>
{
var z = keys[e.KeyCode];
if (z > 0)
{
z++;
}
else
{
z = 1;
}
// what does it do?
keys[e.KeyCode] = z;
// 4333ms {{ KeyCode = 83, S = 83, z = NaN }}
Console.WriteLine(new { e.KeyCode, System.Windows.Forms.Keys.S, z });
};
// skybox cubemap
var iii = new IHTMLImage[] {
new px(), new nx(),
new py(), new ny(),
new pz(), new nz()
};
//var f12 = await new airplane().async.oncomplete;
//var f12 = new airplane();
Task.WhenAll(from x in iii select x.async.oncomplete).ContinueWithResult(
ii =>
// how can we do an alpha clear on the jpg?
//new airplane().async.oncomplete.ContinueWithResult(
//new airplane_leftwindows().async.oncomplete.ContinueWithResult(
new airplane_mask().async.oncomplete.ContinueWithResult(
f12_mask =>
new airplane().async.oncomplete.ContinueWithResult(
f12 =>
{
//Func<int, string, IHTMLImage> xf = (i, globalCompositeOperation) =>
//{
// // we do have a skybox example somewhere...
// var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height);
// f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
// // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
// f1.globalCompositeOperation = globalCompositeOperation;
// f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
// return f1;
//};
//new[] {
// "source-over",
// "source-in",
// "source-out",
// "source-atop",
// "destination-over",
// "destination-in",
// "destination-out",
// "destination-atop",
// "lighter",
// "copy",
// "xor",
// "multiply",
// "screen",
// "overlay",
// "darken",
// "lighten",
// "color-dodge",
// "color-burn",
// "hard-light",
// "soft-light",
// "difference",
// "exclusion",
// "hue",
// "saturation",
// "color",
// "luminosity"
//}.WithEach(globalCompositeOperation =>
// {
// xf(4, globalCompositeOperation).AttachToDocument().title = globalCompositeOperation;
// }
//);
Func <int, IHTMLImage> f = i =>
{
// we do have a skybox example somewhere...
var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height);
f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
f1.globalCompositeOperation = "multiply";
f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
return(f1);
};
var skyScene0 = new THREE.Scene();
var skyScene1 = new THREE.Scene();
var skyScene2 = new THREE.Scene {
};
#region createSky
// gearvr has photos360 app
//var textureCube = THREE.ImageUtils.loadTextureCube(urls);
var vertexShader =
@"
varying vec3 vWorldPosition;
"
//+ THREE.ShaderChunk["logdepthbuf_pars_vertex"]
+
@"
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
//+ THREE.ShaderChunk["logdepthbuf_vertex"]
+ @"
}
"
;
// https://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/texturing.php
var fragmentShader =
@"
uniform samplerCube tCube;
uniform float tFlip;
varying vec3 vWorldPosition;
"
//+ THREE.ShaderChunk["logdepthbuf_pars_fragment"]
+ @"
void main()
{
vec4 c = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );
"
// : gl.getShaderInfoLog() ERROR: 0:52: 'assign' : cannot convert from 'const int' to 'highp float'
//+ THREE.ShaderChunk["logdepthbuf_fragment"]
+ @"
// _mask.png has the bits
if (c.r == 0.0) if (c.g == 0.0) if (c.b == 0.0) discard;
gl_FragColor = c;
}
"
// vec4 textureCube(samplerCube s, vec3 coord [, float bias])
//
;
var skyMeshmaterial0 = new THREE.ShaderMaterial(new
{
fragmentShader = fragmentShader,
vertexShader = vertexShader,
uniforms = new
{
tCube = new
{
type = "t",
value = new THREE.CubeTexture(ii
)
{
flipY = false,
// !!
needsUpdate = true
}
},
tFlip = new { type = "f", value = -1 }
},
depthWrite = false,
side = THREE.BackSide
});
var mesh0 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial0).AttachTo(skyScene0);
// stereo vs mono skybox
var skyMeshmaterial1 = new THREE.ShaderMaterial(new
{
fragmentShader = fragmentShader,
vertexShader = vertexShader,
uniforms = new
{
tCube = new
{
type = "t",
value = new THREE.CubeTexture(
f(0), f(1),
f(2), f(3),
f(4), f(5)
)
{
flipY = false,
// !!
needsUpdate = true
}
},
tFlip = new { type = "f", value = -1 }
},
depthWrite = false,
side = THREE.BackSide,
});
var mesh1 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial1).AttachTo(skyScene1);
var skyMeshmaterial2 = new THREE.ShaderMaterial(new
{
fragmentShader = fragmentShader,
vertexShader = vertexShader,
uniforms = new
{
tCube = new
{
type = "t",
value = new THREE.CubeTexture(
f(0 + 6), f(1 + 6),
f(2 + 6), f(3 + 6),
f(4 + 6), f(5 + 6)
)
{
flipY = false,
// !!
needsUpdate = true
}
},
tFlip = new { type = "f", value = -1 }
},
depthWrite = false,
side = THREE.BackSide
});
var mesh2 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial2).AttachTo(skyScene2);
#endregion
Native.body.Clear();
var skyCamera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 20000);
//var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
// not using css?
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo
var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false })
{
autoClear = false,
shadowMapEnabled = true,
shadowMapType = THREE.PCFSoftShadowMap
};
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
#region onresize
new { }.With(
async delegate
{
do
{
skyCamera.aspect = Native.window.aspect;
skyCamera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
} while (await Native.window.async.onresize);
}
);
#endregion
Native.document.body.onmousewheel +=
e =>
{
skyCamera.fov -= e.WheelDirection * 5.0;
skyCamera.updateProjectionMatrix();
};
var target0 = new THREE.Vector3();
var lon = 90.0;
var lat = 0.0;
var phi = 0.0;
var theta = 0.0;
var drag = false;
var sw = Stopwatch.StartNew();
Native.window.onframe +=
delegate
{
var sinfps = 1 + (int)(((Math.Sin(sw.ElapsedMilliseconds * 0.0001) + 1.0) / 2.0) * 59);
Native.document.title = "" + new { sinfps };
//var eye = (sw.ElapsedMilliseconds / (200)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 15)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 30)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 45)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 60)) % 2;
var eye = (sw.ElapsedMilliseconds / (1000 / sinfps)) % 2;
// if we are a multiprocess renderer, get the volatile eye id
// doesnt work?
//skyMesh0.visible = eye == 0;
//mesh0.rotation = new THREE.Vector3(0, 0, sw.ElapsedMilliseconds);
if (Native.document.pointerLockElement == Native.document.body)
{
lon += 0.00;
}
else
{
lon += 0.01;
}
lat = Math.Max(-85, Math.Min(85, lat));
// this is wrong, but gets the idea across.
phi = THREE.Math.degToRad(90 - lat) + Math.Sin(sw.ElapsedMilliseconds * 0.001) * 0.1 - 0.3;
theta = THREE.Math.degToRad(lon);
target0.x = Math.Sin(phi) * Math.Cos(theta);
target0.y = Math.Cos(phi);
target0.z = Math.Sin(phi) * Math.Sin(theta);
skyCamera.lookAt(target0);
renderer.clear();
renderer.render(skyScene0, skyCamera);
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target0.x = Math.Sin(phi) * Math.Cos(theta);
target0.y = Math.Cos(phi);
target0.z = Math.Sin(phi) * Math.Sin(theta);
skyCamera.lookAt(target0);
if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 0)
{
if (eye == 0)
{
renderer.render(skyScene1, skyCamera);
}
else
{
renderer.render(skyScene2, skyCamera);
}
}
else if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 1)
{
renderer.render(skyScene1, skyCamera);
}
};
#region ontouchmove
var touchX = 0;
var touchY = 0;
Native.document.body.ontouchstart +=
e =>
{
e.preventDefault();
var touch = e.touches[0];
touchX = touch.screenX;
touchY = touch.screenY;
};
Native.document.body.ontouchmove +=
e =>
{
e.preventDefault();
var touch = e.touches[0];
lon -= (touch.screenX - touchX) * 0.1;
lat += (touch.screenY - touchY) * 0.1;
touchX = touch.screenX;
touchY = touch.screenY;
};
#endregion
#region camera rotation
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon += e.movementX * 0.1;
lat -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
}
)
)
);
}
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hznosky.png" "/sdcard/oculus/360photos/"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web
// ColladaLoader: Empty or non-existing file (assets/Chrome360HZ/S6Edge.dae)
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#region += Launched chrome.app.window
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
//chrome.runtime.UpdateAvailable += delegate
//{
// new chrome.Notification(title: "UpdateAvailable");
//};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "Chrome360HZ");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 2048; // 6 faces, ?
const int cubefacesize = 512; // 6 faces, ?
var uizoom = 0.05;
var far = 0xfffff;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument();
pause.onchange += delegate
{
if (pause.@checked)
sw.Stop();
else
sw.Start();
};
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
// should we fix jsc to do a more correct IDL?
//var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
//directionalLight.position.set(0, 0, 1);
//scene.add(directionalLight);
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
renderer0.setClearColor(0xfffff, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
canvasNY.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
Native.body.onmousedown +=
async e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
return;
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
//e.CaptureMouse();
var release = e.Element.CaptureMouse();
await e.Element.async.onmouseup;
release();
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
Native.body.onmousemove +=
e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
{
Native.body.style.cursor = IStyle.CursorEnum.@default;
return;
}
e.preventDefault();
e.stopPropagation();
Native.body.style.cursor = IStyle.CursorEnum.move;
var pointerLock = canvas0 == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
oo.WithEach(
x =>
{
x.rotation.y += 0.006 * (e.CursorX - old.CursorX);
x.rotation.x += 0.006 * (e.CursorY - old.CursorY);
}
);
old = new
{
e.CursorX,
e.CursorY
};
}
};
#endregion
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
c.width = 3840;
c.height = 2160;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = "scale(" + suizoom + ")";
c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
var frame0 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var mesh = new THREE.Mesh(new THREE.SphereGeometry(far / 2, 50, 50),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
//new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src
//new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src
frame0.src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
#region fixup rotation
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
#endregion
scene.add(mesh);
//new IHTMLButton { }
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
if (dir == null)
return;
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
dir.WriteAllBytes("0000.png", f0);
// 3.7MB
// 3840x2160
};
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
//dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = Stopwatch.StartNew();
//Native.window.onframe += delegate
//{
// //dae.children[0].children[0].children.Last().al
// //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
// //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\WebGLGodRay.csproj"
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// could we get some film grain?
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(10, 10, 10);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
//var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 100;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
if (i % 2 == 0)
{
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
//blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
//blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
#endregion
#endif
}
}
#endregion
#region HZCannon
// "Z:\jsc.svn\examples\javascript\WebGL\HeatZeekerRTSOrto\HeatZeekerRTSOrto\HeatZeekerRTSOrto.csproj"
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
scene.add(cube);
}
);
#endregion
new Models.ColladaS6Edge().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = -(65 - 200);
var scale = 0.9;
// jsc, do we have ILObserver available yet?
dae.scale.x = scale;
dae.scale.y = scale;
dae.scale.z = scale;
#region onmousewheel
Native.body.onmousewheel +=
e =>
{
e.preventDefault();
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
dae.position.z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
//dae.position.z = dae.position.z.Max(-200).Min(200);
//Native.document.title = new { z }.ToString();
};
#endregion
//dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
dae.position.x = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 190.0;
dae.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 90.0;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
#region x
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
};
}
);
#endregion
Console.WriteLine("do you see it?");
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// what are we looking at?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 1000);
camera.position.z = 300;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var cube = new THREE.CubeGeometry(0.5, 0.5, 0.5);
var material = new THREE.MeshBasicMaterial(new
{
color = new THREE.Color(0xADD8E6),
});
var obj = new THREE.Object3D();
for (var x = 0; x < 100; x++)
{
for (var y = 0; y < 100; y++)
{
for (var zz = 0; zz < 15; zz++)
{
var mesh1 = new THREE.Mesh(cube, material);
mesh1.position.x = x;
mesh1.position.y = y;
mesh1.position.z = zz;
obj.add(mesh1);
}
}
}
//var mesh1 = new THREE.Mesh(cube, material);
//mesh1.position.x = 1;
//mesh1.position.y = 1;
//mesh1.position.z = 1;
//obj.add(mesh1);
scene.add(obj);
var z = camera.position.z;
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
Native.window.onframe +=
e =>
{
//if (this.canvas.parentNode == null)
// return;
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
obj.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
{
renderer.setSize();
}
};
}
/// <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://stackoverflow.com/questions/29048161/how-to-export-a-three-js-scene-into-a-360-texture-for-photosphere
Native.body.style.background = "black";
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
// https://github.com/turban/photosphere/blob/gh-pages/stolanuten.html
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(Native.window.Width, Native.window.Height);
// the thing you attach to dom
renderer.domElement.AttachToDocument();
// Z:\jsc.svn\examples\javascript\audio\synergy\MovingMusicByBorismus\Application.cs
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(100, 20, 20),
new THREE.MeshBasicMaterial(
new
{
//20150608_165300.jpg
//map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.stolanuten().src)
map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets._20150608_165300().src)
}
)
);
sphere.scale.x = -1;
sphere.AttachTo(scene);
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000);
camera.position.x = 0.1;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Native.window.onframe +=
delegate
{
controls.update();
camera.position = controls.center.clone();
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
// http://www.visualstudio.com/en-us/news/vs2015-vs
}
/// <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/work/knowledge-base/15-dualvr/20150812/cssstereo
// https://www.reddit.com/r/GearVR/comments/35g8w7/real_world_stereoscopic_360_panoramas/
// https://www.reddit.com/r/oculus/comments/35gcn2/real_world_stereoscopic_panoramas_with_gear_vr/
// http://stackoverflow.com/questions/9032050/canvas-mask-an-image-and-preserve-its-alpha-channel
// https://3dwarehouse.sketchup.com/model.html?id=48bcce07b0baf689d9e6f00e848ea18
// https://www.youtube.com/watch?v=OurzBO1cDto
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
new IHTMLPre { "loading stereo... 2MB!" }.AttachToDocument();
// if this is a chrome app
// would GearVR 360 app be able to request current stereo cubemap?
// Uncaught TypeError: Cannot read property '0' of undefined
var keys = new int[0xffff];
//c = a[0].keys[jAEABqtXvT6n4h6m6ZavdA(b)];
//d = c[0];
//c[0] = (((d + 1)));
Native.document.body.onkeyup +=
e =>
{
var z = keys[e.KeyCode];
if (z > 0)
z++;
else
z = 1;
// what does it do?
keys[e.KeyCode] = z;
// 4333ms {{ KeyCode = 83, S = 83, z = NaN }}
Console.WriteLine(new { e.KeyCode, System.Windows.Forms.Keys.S, z });
};
// skybox cubemap
var iii = new IHTMLImage[] {
new px(), new nx(),
new py(), new ny(),
new pz(), new nz()
};
//var f12 = await new airplane().async.oncomplete;
//var f12 = new airplane();
Task.WhenAll(from x in iii select x.async.oncomplete).ContinueWithResult(
ii =>
// how can we do an alpha clear on the jpg?
//new airplane().async.oncomplete.ContinueWithResult(
//new airplane_leftwindows().async.oncomplete.ContinueWithResult(
new airplane_mask().async.oncomplete.ContinueWithResult(
f12_mask =>
new airplane().async.oncomplete.ContinueWithResult(
f12 =>
{
//Func<int, string, IHTMLImage> xf = (i, globalCompositeOperation) =>
//{
// // we do have a skybox example somewhere...
// var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height);
// f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
// // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
// f1.globalCompositeOperation = globalCompositeOperation;
// f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
// return f1;
//};
//new[] {
// "source-over",
// "source-in",
// "source-out",
// "source-atop",
// "destination-over",
// "destination-in",
// "destination-out",
// "destination-atop",
// "lighter",
// "copy",
// "xor",
// "multiply",
// "screen",
// "overlay",
// "darken",
// "lighten",
// "color-dodge",
// "color-burn",
// "hard-light",
// "soft-light",
// "difference",
// "exclusion",
// "hue",
// "saturation",
// "color",
// "luminosity"
//}.WithEach(globalCompositeOperation =>
// {
// xf(4, globalCompositeOperation).AttachToDocument().title = globalCompositeOperation;
// }
//);
Func<int, IHTMLImage> f = i =>
{
// we do have a skybox example somewhere...
var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height);
f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
f1.globalCompositeOperation = "multiply";
f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height);
return f1;
};
var skyScene0 = new THREE.Scene();
var skyScene1 = new THREE.Scene();
var skyScene2 = new THREE.Scene { };
#region createSky
// gearvr has photos360 app
//var textureCube = THREE.ImageUtils.loadTextureCube(urls);
var vertexShader =
@"
varying vec3 vWorldPosition;
"
//+ THREE.ShaderChunk["logdepthbuf_pars_vertex"]
+
@"
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
//+ THREE.ShaderChunk["logdepthbuf_vertex"]
+ @"
}
"
;
// https://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/texturing.php
var fragmentShader =
@"
uniform samplerCube tCube;
uniform float tFlip;
varying vec3 vWorldPosition;
"
//+ THREE.ShaderChunk["logdepthbuf_pars_fragment"]
+ @"
void main()
{
vec4 c = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );
"
// : gl.getShaderInfoLog() ERROR: 0:52: 'assign' : cannot convert from 'const int' to 'highp float'
//+ THREE.ShaderChunk["logdepthbuf_fragment"]
+ @"
// _mask.png has the bits
if (c.r == 0.0) if (c.g == 0.0) if (c.b == 0.0) discard;
gl_FragColor = c;
}
"
// vec4 textureCube(samplerCube s, vec3 coord [, float bias])
//
;
var skyMeshmaterial0 = new THREE.ShaderMaterial(new
{
fragmentShader = fragmentShader,
vertexShader = vertexShader,
uniforms = new
{
tCube = new
{
type = "t",
value = new THREE.CubeTexture(ii
)
{
flipY = false,
// !!
needsUpdate = true
}
},
tFlip = new { type = "f", value = -1 }
},
depthWrite = false,
side = THREE.BackSide
});
var mesh0 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial0).AttachTo(skyScene0);
// stereo vs mono skybox
var skyMeshmaterial1 = new THREE.ShaderMaterial(new
{
fragmentShader = fragmentShader,
vertexShader = vertexShader,
uniforms = new
{
tCube = new
{
type = "t",
value = new THREE.CubeTexture(
f(0), f(1),
f(2), f(3),
f(4), f(5)
)
{
flipY = false,
// !!
needsUpdate = true
}
},
tFlip = new { type = "f", value = -1 }
},
depthWrite = false,
side = THREE.BackSide,
});
var mesh1 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial1).AttachTo(skyScene1);
var skyMeshmaterial2 = new THREE.ShaderMaterial(new
{
fragmentShader = fragmentShader,
vertexShader = vertexShader,
uniforms = new
{
tCube = new
{
type = "t",
value = new THREE.CubeTexture(
f(0 + 6), f(1 + 6),
f(2 + 6), f(3 + 6),
f(4 + 6), f(5 + 6)
)
{
flipY = false,
// !!
needsUpdate = true
}
},
tFlip = new { type = "f", value = -1 }
},
depthWrite = false,
side = THREE.BackSide
});
var mesh2 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial2).AttachTo(skyScene2);
#endregion
Native.body.Clear();
var skyCamera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 20000);
//var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
// not using css?
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo
var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false })
{
autoClear = false,
shadowMapEnabled = true,
shadowMapType = THREE.PCFSoftShadowMap
};
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
#region onresize
new { }.With(
async delegate
{
do
{
skyCamera.aspect = Native.window.aspect;
skyCamera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
} while (await Native.window.async.onresize);
}
);
#endregion
Native.document.body.onmousewheel +=
e =>
{
skyCamera.fov -= e.WheelDirection * 5.0;
skyCamera.updateProjectionMatrix();
};
var target0 = new THREE.Vector3();
var lon = 90.0;
var lat = 0.0;
var phi = 0.0;
var theta = 0.0;
var drag = false;
var sw = Stopwatch.StartNew();
Native.window.onframe +=
delegate
{
var sinfps = 1 + (int)(((Math.Sin(sw.ElapsedMilliseconds * 0.0001) + 1.0) / 2.0) * 59);
Native.document.title = "" + new { sinfps };
//var eye = (sw.ElapsedMilliseconds / (200)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 15)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 30)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 45)) % 2;
//var eye = (sw.ElapsedMilliseconds / (1000 / 60)) % 2;
var eye = (sw.ElapsedMilliseconds / (1000 / sinfps)) % 2;
// if we are a multiprocess renderer, get the volatile eye id
// doesnt work?
//skyMesh0.visible = eye == 0;
//mesh0.rotation = new THREE.Vector3(0, 0, sw.ElapsedMilliseconds);
if (Native.document.pointerLockElement == Native.document.body)
lon += 0.00;
else
{
lon += 0.01;
}
lat = Math.Max(-85, Math.Min(85, lat));
// this is wrong, but gets the idea across.
phi = THREE.Math.degToRad(90 - lat) + Math.Sin(sw.ElapsedMilliseconds * 0.001) * 0.1 - 0.3;
theta = THREE.Math.degToRad(lon);
target0.x = Math.Sin(phi) * Math.Cos(theta);
target0.y = Math.Cos(phi);
target0.z = Math.Sin(phi) * Math.Sin(theta);
skyCamera.lookAt(target0);
renderer.clear();
renderer.render(skyScene0, skyCamera);
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target0.x = Math.Sin(phi) * Math.Cos(theta);
target0.y = Math.Cos(phi);
target0.z = Math.Sin(phi) * Math.Sin(theta);
skyCamera.lookAt(target0);
if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 0)
{
if (eye == 0)
renderer.render(skyScene1, skyCamera);
else
renderer.render(skyScene2, skyCamera);
}
else if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 1)
{
renderer.render(skyScene1, skyCamera);
}
};
#region ontouchmove
var touchX = 0;
var touchY = 0;
Native.document.body.ontouchstart +=
e =>
{
e.preventDefault();
var touch = e.touches[0];
touchX = touch.screenX;
touchY = touch.screenY;
};
Native.document.body.ontouchmove +=
e =>
{
e.preventDefault();
var touch = e.touches[0];
lon -= (touch.screenX - touchX) * 0.1;
lat += (touch.screenY - touchY) * 0.1;
touchX = touch.screenX;
touchY = touch.screenY;
};
#endregion
#region camera rotation
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon += e.movementX * 0.1;
lat -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
}
)
)
);
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151227/movingmusic
/// <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)
{
// THREE.WebGLRenderer 72dev
// nuget!
// vs nuget search is brken!
Console.WriteLine(new { THREE.REVISION } + " back screen until everithing loads!");
// http://smus.com/ultrasonic-networking/
// http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html
// http://chromium.googlecode.com/svn/trunk/samples/audio/box2d-js/box2d-audio.html
// http://chromium.googlecode.com/svn/trunk/samples/audio/simple.html
// http://chromium.googlecode.com/svn/trunk/samples/audio/oscillator-fm2.html
// http://borismus.github.io/spectrogram/
// http://borismus.github.io/moving-music/
// http://smus.com/spatial-audio-web-vr/
// can we have 360 audio yet?
// THREE.WebGLObjects: Converting... THREE.PointCloud THREE.BufferGeometry
new { }.With(
async delegate
{
//HTML.Audio.FromAssets.
// does jsc assetslibrary do jpeg? or do we need jpg/
Native.document.body.Clear();
Native.document.body.style.margin = "0px";
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
//Error 1 Cannot convert anonymous method to type 'dynamic' because it is not a delegate type Z:\jsc.svn\examples\javascript\audio\synergy\MovingMusicByBorismus\Application.cs 93 68 MovingMusicByBorismus
// Choreographer.prototype.getAudioFile = function(set, basename) {
// var extension = Util.isMp3Supported() ? 'mp3' : 'ogg';
// return 'snd/' + set + '/' + basename + '.' + extension;
//};
// Largely from http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/
#if VideoRenderer
window.VideoRenderer.prototype.addSkybox = IFunction.OfDelegate(
new Func<object>(
() =>
{
// black screen??
//var far = 0x9999;
var far = 0x999;
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(far, 20, 20),
new THREE.MeshBasicMaterial(
new
{
//20150608_165300.jpg
//map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.stolanuten().src)
map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets._20150608_165300().src)
}
)
);
sphere.scale.x = -1;
// wont help us.
//sphere.material.opacity = 0.5;
Console.WriteLine("addSkybox... " + new { window.video.scene });
sphere.AttachTo((THREE.Scene)window.video.scene);
return null;
}
)
);
#endif
#if Choreographer
//window.Choreographer.prototype.initVocal = (Action)
//window.Choreographer.prototype.initVocal = IFunction.OfDelegate(
//window.Choreographer.prototype.initVocal = IFunction.Of(
window.Choreographer.prototype.getAudioFile = IFunction.OfDelegate(
new Func<object, string, string>(
(object set, string basename) =>
{
Console.WriteLine("window.Choreographer.prototype.getAudioFile " + new { basename });
//var russian = new MovingTrack({
// src: this.getAudioFile(set, 'Russian'),
// color: 0x19414B,
// });
// this.manager.addTrack(cats);
// view-source:54442 29925ms window.Choreographer.prototype.getAudioFile { basename = Cats }
//2015-11-16 12:25:32.573 view-source:54442 29927ms window.Choreographer.prototype.getAudioFile { basename = Nimoy }
//2015-11-16 12:25:32.575 view-source:54442 29929ms window.Choreographer.prototype.getAudioFile { basename = Roth }
//2015-11-16 12:25:32.576 view-source:54442 29930ms window.Choreographer.prototype.getAudioFile { basename = Russian }
//if (basename == "Cats") return new HTML.Audio.FromAssets.Sweet_Dreams_My_Love_by_Alexander_J_Turner { }.src;
if (basename == "Cats") return null;
//if (basename == "Cats") return new HTML.Audio.FromAssets.loop_GallinagoDelicata { }.src;
//if (basename == "Nimoy") return new HTML.Audio.FromAssets.sand_run { }.src;
////if (basename == "Roth") return new HTML.Audio.FromAssets.snd_jeepengine_start { }.src;
//if (basename == "Roth") return new HTML.Audio.FromAssets.heartbeat3 { }.src;
if (basename == "Nimoy") return null;
if (basename == "Roth") return null;
// the green blob.
//return new HTML.Audio.FromAssets.Russian { }.src;
return new HTML.Audio.FromAssets.crickets { }.src;
// yellow is str track man
}
)
);
#endif
// X:\opensource\github\moving-music\js\audio-renderer.js
// defined at
#region X:\opensource\github\moving-music\js\main.js
//window.main();
// start();
// var set = Util.getParameterByName('set');
//var mode = Util.getParameterByName('mode');
// Create the world.
var choreographer = new Choreographer();
//manager = choreographer.manager;
////choreographer.on('modechanged', onModeChanged);
//// Create a video renderer.
//video = new VideoRenderer({selector: 'body', overview: false});
//video.setManager(manager);
//video.addLight();
//video.addSkybox();
// Create the audio renderer.
var audio = new AudioRenderer();
//audio.setManager(manager);
//audio.on('ready', onAudioLoaded);
// After a little while, if we're not loaded yet, start updating progress.
#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)
{
// 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(IDefault page = null)
{
// used by
// X:\jsc.svn\examples\javascript\WebGL\WebGLGoldDropletTransactions\WebGLGoldDropletTransactions\Application.cs
if (DisableBackground)
{
// nop
}
else
{
//page.body.style.backgroundColor = "#4584b4";
container.style.backgroundColor = "#4584b4";
}
// Bg gradient
//var canvas = new IHTMLCanvas();
//canvas.width = 32;
//canvas.height = Native.Window.Height;
//var context = (CanvasRenderingContext2D)canvas.getContext("2d");
//var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
//gradient.addColorStop(0f, "#1e4877");
//gradient.addColorStop(0.5f, "#4584b4");
//context.fillStyle = gradient;
//context.fillRect(0, 0, canvas.width, canvas.height);
// Clouds
//var , , renderer, sky, mesh, , material,
//, h, color, colors = [], sprite, size, x, y, z;
var mouseX = 0f;
var start_time = new IDate().getTime();
Console.WriteLine(new { Native.window.Width, Native.window.Height });
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
Console.WriteLine(new { DefaultMouseY });
var mouseY = (float)((Native.window.Height * DefaultMouseY - windowHalfY) * 0.15);
//Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
if (page == null)
{
container.AttachToDocument();
}
else
{
container.AttachTo(page.body);
}
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
//container.style.background = "url(" + canvas.toDataURL("image/png") + ")";
#region Dispose
var IsDisposed = false;
Dispose = delegate
{
if (IsDisposed)
{
return;
}
IsDisposed = true;
container.Orphanize();
};
#endregion
var camera = new THREE.PerspectiveCamera(30, Native.window.aspect, 1, 3000);
camera.position.z = 6000;
var scene = new THREE.Scene();
var geometry = new THREE.Geometry();
//var texture = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.cloud10().src);
var texture = THREE.ImageUtils.loadTexture(CloudTexture);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
// FogColor
//var fog = new THREE.Fog(0x4584b4, -100, 3000);
var fog = new THREE.Fog(FogColor, -100, 3000);
// what about sprites?
var material = new THREE.ShaderMaterial(
new
{
uniforms = new
{
map = new { type = "t", value = texture },
fogColor = new { type = "c", value = fog.color },
fogNear = new { type = "f", value = fog.near },
fogFar = new { type = "f", value = fog.far },
},
vertexShader = new GeometryVertexShader().ToString(),
fragmentShader = new GeometryFragmentShader().ToString(),
depthWrite = false,
depthTest = false,
transparent = true
}
);
var r = new Random();
Func <float> Math_random = () => (float)r.NextDouble();
var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
for (var i = 0; i < 8000; i++)
{
plane.position.x = Math_random() * 1000 - 500;
plane.position.y = -Math_random() * Math_random() * 200 - 15;
plane.position.z = i;
plane.rotation.z = (f)(Math_random() * Math.PI);
plane.scale.x = Math_random() * Math_random() * 1.5f + 0.5f;
plane.scale.y = plane.scale.x;
THREE.GeometryUtils.merge(geometry, plane);
}
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -8000;
scene.add(mesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
container.appendChild(renderer.domElement);
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#region onresize
Native.window.onresize +=
delegate
{
container.style.SetSize(Native.window.Width, Native.window.Height);
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
#endregion
#region animate
Native.window.onframe += delegate
{
if (IsDisposed)
{
return;
}
var position = ((new IDate().getTime() - start_time) * 0.03) % 8000;
camera.position.x += (float)((mouseX - camera.position.x) * 0.01);
camera.position.y += (float)((-mouseY - camera.position.y) * 0.01);
camera.position.z = (f)(-position + 8000);
renderer.render(scene, camera);
};
#endregion
Native.document.onmousemove +=
e =>
{
mouseX = (float)((e.CursorX - windowHalfX) * 0.25);
mouseY = (float)((e.CursorY - windowHalfY) * 0.15);
};
//var ze = new ZeProperties();
//ze.Show();
//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)
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150824
// http://stackoverflow.com/questions/14103986/canvas-and-spritematerial
// X:\jsc.svn\examples\javascript\WebGL\WebGLSVGAnonymous\WebGLSVGAnonymous\Application.cs
// X:\jsc.svn\examples\javascript\WebGL\WebGLVRCreativeLeadership\WebGLVRCreativeLeadership\Application.cs
// X:\jsc.svn\examples\javascript\WebGL\WebGLSVGSprite\WebGLSVGSprite\Application.cs
//var l = new NotificationLayout().layout;
//l.AttachToDocument();
// : INodeConvertible<IHTMLElement>
//var c = (IHTMLCanvas)l.layout;
//var c = (IHTMLCanvas)l;
// look we have a databound 2D image!
// make it implicit operator for assetslibrary?
//l.style
//c.AttachToDocument();
// https://play.google.com/store/apps/details?id=com.abstractatech.vr
// could we display LAN UDP notifications too. like
// which youtube video is playing?
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.backgroundColor = "black";
// https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652
// hResolution: 1920,
//vResolution: 1080,
// "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln"
// http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0
// https://github.com/troffmo5/OculusStreetView
// http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect
// http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/
// http://stemkoski.github.io/Three.js/Sprites.html
// http://stemkoski.github.io/Three.js/Texture-Animation.html
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html
var window = Native.window;
var fov = 70.0;
var camera = new THREE.PerspectiveCamera(fov,
1920.0 / 1080.0,
//window.aspect,
1, 1100);
var target = new THREE.Vector3(0, 0, 0);
//(camera as dynamic).target = target;
var scene = new THREE.Scene();
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xafafaf));
// http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/
// http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect
scene.add(new THREE.AmbientLight(0x2f2f2f));
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
#region light
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.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
new _2294472375_24a3b8ef46_o().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
scene.add(mesh);
var labove = new NotificationLayout();
#region sprite2 above
{
labove.Message.innerText = "VR CREATIVE LEADERSHIP";
labove.layout.style.background = "";
new { }.With(
async delegate
{
retry:
// make it blink. gaze cursor is on it?
labove.box.style.background = "rgba(255,255,0,0.7)";
labove.box.setAttribute("invoke", "onmutation1");
await Task.Delay(1500);
// is mutation observer noticing it?
labove.box.style.background = "rgba(255,255,255,0.7)";
labove.box.setAttribute("invoke", "onmutation2");
await Task.Delay(1500);
goto retry;
}
);
var c = labove.AsCanvas();
var xcrateTexture = new THREE.Texture(c);
// like video texture
Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; };
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map = xcrateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var xsprite2 = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
xsprite2.position.set(200, 0, 0);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
xsprite2.scale.set(
c.width * 0.5,
c.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(xsprite2);
}
#endregion
//var lineTo = new List<THREE.Vector3>();
var others = new
{
ui = default(NotificationLayout),
canvas = default(IHTMLCanvas),
map = default(THREE.Texture),
sprite = default(THREE.Sprite)
}.ToEmptyList();
#region add
Action<NotificationLayout> add = ui =>
{
ui.layout.style.background = "";
var canvas = ui.AsCanvas();
var index = others.Count;
//ui.Message += new { index };
//ui.Message.innerText += new { index };
//lbelow0.Message = new { THREE.REVISION }.ToString();
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )
var map = new THREE.Texture(canvas);
map.minFilter = THREE.LinearFilter;
// like video texture
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left middle
//sprite2.position.set(200, 0, 0);
//sprite.position.set(250, -50, 50);
//lineTo.Add(sprite.position);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite.scale.set(
canvas.width * 0.5,
canvas.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite);
others.Add(
new
{
ui,
canvas,
map,
sprite
}
);
var sw = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// can we get some of the crazy c++ template bitmapbuffer code from the past?
map.needsUpdate = true;
var offset = Math.PI * 2 * ((double)(index + 1) / others.Count);
sprite.position.x = 300;
sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
};
};
#endregion
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new HTML.Images.FromAssets._0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Advanced Mechanics by Portugal Design Lab"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new HTML.Images.FromAssets._42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Face Value by mshariful"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new HTML.Images.FromAssets._371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Mind Wall. by Sumit Goski"
}
);
#region lines
{
var geometry = new THREE.Geometry
{
// how can we keep streaming verticies data points to gpu?
vertices =
others.SelectMany(
lineTo =>
new[]
{
new THREE.Vector3(200, 0, 0),
lineTo.sprite.position
}
).ToArray()
// https://github.com/mrdoob/three.js/wiki/Updates
// http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render
//verticesNeedUpdate = true
};
Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; };
var o = new THREE.Line(geometry, new THREE.LineDashedMaterial(
new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 }
), THREE.LineStrip);
//objects.Add(o);
scene.add(o);
}
#endregion
// // DK2
// hResolution: 1920,
//vResolution: 1080,
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1920, 1080);
#region HMD
// broken?
var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 };
var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 };
var HMD = new OculusRiftEffectOptions
{
hResolution = window.Width,
vResolution = window.Height,
hScreenSize = 0.12576,
vScreenSize = 0.07074,
interpupillaryDistance = 0.0635,
lensSeparationDistance = 0.0635,
eyeToScreenDistance = 0.041,
// j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0];
//distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 },
distortionK = distortionK,
// j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0];
//chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }
chromaAbParameter = chromaAbParameter
};
#endregion
//var effect = new THREE.OculusRiftEffect(
// renderer, new
// {
// worldScale = 100,
// //HMD
// }
// );
//effect.setSize(1920, 1080);
renderer.domElement.AttachToDocument();
//renderer.domElement.style.position = IStyle.PositionEnum.absolute;
renderer.domElement.style.SetLocation(0, 0);
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
// x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs
new { }.With(
async delegate
{
retry:
var s = (double)Native.window.Width / 1920.0;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
//#region onresize
//Native.window.onresize +=
// delegate
// {
// camera.aspect = Native.window.aspect;
// camera.updateProjectionMatrix();
// renderer.setSize(window.Width, window.Height);
// effect.setSize(window.Width, window.Height);
// };
//#endregion
//Native.document.body.onmousewheel +=
// e =>
// {
// fov -= e.WheelDirection * 5.0;
// camera.projectionMatrix.makePerspective(fov,
// (double)window.Width / window.Height, 1, 1100);
// };
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
//var controls = new THREE.OrbitControls(camera);
var camera_rotation_z = 0.0;
//Native.document.onmousemove +=
// e =>
// {
// l.Message = new { e.CursorX, e.CursorY }.ToString();
// };
Native.window.onframe +=
ee =>
{
//labove.Message = new
//{
// lon,
// lat,
// ee.counter
//}.ToString();
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//lat = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
target.y = 500 * Math.Cos(phi);
target.z = 500 * Math.Sin(phi) * Math.Sin(theta);
//controls.update();
//camera.position = controls.center.clone();
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
renderer.render(scene, camera);
//effect.render(scene, camera);
};
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
Alternative calculation (replacing lines 99-107 above):
var compassHeading = Math.atan2(rA, rB);
if(rA < 0) {
compassHeading += 2 * Math.PI;
}
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection; ;
};
// https://developer.android.com/training/system-ui/immersive.html
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
////ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo
//0001 02000178 ScriptCoreLib::ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProvider
//script: error JSC1000: Java : Opcode not implemented: stind.i1 at ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProviderByMahmood.CreatePaddedBuffer
//internal compiler error at method
// script: error JSC1000: Java :
//BCL needs another method, please define it.
//Cannot call type without script attribute :
//System.Threading.Monitor for Void Enter(System.Object, Boolean ByRef) used at
//WebGLVRCreativeLeadership.Activities.ApplicationWebServiceActivity+<>c__DisplayClass24.<CreateServer>b__29 at offset 0018.
//If the use of this method is intended, an implementation should be provided with the attribute[Script(Implements = typeof(...)] set.You may have mistyped it.
// I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
//I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
public Application(com.abstractatech.apps.vr.HTML.Pages.IApp page)
{
#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)
{
ChromeTCPServer.TheServerWithAppWindow.Invoke(com.abstractatech.apps.vr.HTML.Pages.AppSource.Text);
return;
}
#endregion
// https://play.google.com/store/apps/details?id=com.abstractatech.vr
// could we display LAN UDP notifications too. like
// which youtube video is playing?
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.backgroundColor = "black";
// https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652
// hResolution: 1920,
//vResolution: 1080,
// "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln"
// http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0
// https://github.com/troffmo5/OculusStreetView
// http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect
// http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/
// http://stemkoski.github.io/Three.js/Sprites.html
// http://stemkoski.github.io/Three.js/Texture-Animation.html
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html
var window = Native.window;
var fov = 70.0;
var camera = new THREE.PerspectiveCamera(fov,
window.aspect, 1, 1100);
var target = new THREE.Vector3(0, 0, 0);
//(camera as dynamic).target = target;
var scene = new THREE.Scene();
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xafafaf));
// http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/
// http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect
scene.add(new THREE.AmbientLight(0x2f2f2f));
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
#region light
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.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
new _2294472375_24a3b8ef46_o().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
scene.add(mesh);
#region sprite2
var crateTexture = THREE.ImageUtils.loadTexture(
new ChromeCreativeLeadership.HTML.Images.FromAssets.Mockup().src
);
var crateMaterial = new THREE.SpriteMaterial(
new
{
map = crateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite2 = new THREE.Sprite(crateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
//sprite2.position.set(200, 50, 0);
sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite2.scale.set(
_2294472375_24a3b8ef46_o.ImageDefaultWidth * 0.08,
_2294472375_24a3b8ef46_o.ImageDefaultHeight * 0.08,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite2);
#endregion
#region ColladaAudiA4
new ColladaAudiA4().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;
// right
dae.position.z = -20;
dae.position.x = -100;
dae.position.y = -90;
// 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);
}
);
#endregion
#region nexus7
new nexus7().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;
// left
//dae.position.x = 200;
dae.position.z = -100;
dae.position.y = -50;
//dae.position.z = 100;
// jsc, do we have ILObserver available yet?
dae.scale.x = 13.5;
dae.scale.y = 13.5;
dae.scale.z = 13.5;
//dae.position.y = -80;
scene.add(dae);
//oo.Add(dae);
}
);
#endregion
// // DK2
// hResolution: 1920,
//vResolution: 1080,
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1920, 1080);
// broken?
var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 };
var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 };
var HMD = new OculusRiftEffectOptions
{
hResolution = window.Width,
vResolution = window.Height,
hScreenSize = 0.12576,
vScreenSize = 0.07074,
interpupillaryDistance = 0.0635,
lensSeparationDistance = 0.0635,
eyeToScreenDistance = 0.041,
// j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0];
//distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 },
distortionK = distortionK,
// j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0];
//chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }
chromaAbParameter = chromaAbParameter
};
var effect = new THREE.OculusRiftEffect(
renderer, new
{
worldScale = 100,
//HMD
}
);
effect.setSize(1920, 1080);
renderer.domElement.AttachToDocument();
//renderer.domElement.style.position = IStyle.PositionEnum.absolute;
renderer.domElement.style.SetLocation(0, 0);
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
// x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs
#region onresize
new { }.With(
async delegate
{
retry:
var s = (double)Native.window.Width / 1920.0;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
#endregion
//#region onresize
//Native.window.onresize +=
// delegate
// {
// camera.aspect = Native.window.aspect;
// camera.updateProjectionMatrix();
// renderer.setSize(window.Width, window.Height);
// effect.setSize(window.Width, window.Height);
// };
//#endregion
//Native.document.body.onmousewheel +=
// e =>
// {
// fov -= e.WheelDirection * 5.0;
// camera.projectionMatrix.makePerspective(fov,
// (double)window.Width / window.Height, 1, 1100);
// };
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
var camera_rotation_z = 0.0;
var labove = new NotificationLayout();
#region sprite2 above
{
labove.Message.innerText = "VR CREATIVE LEADERSHIP";
labove.layout.style.background = "";
new { }.With(
async delegate
{
retry:
// make it blink. gaze cursor is on it?
labove.box.style.background = "rgba(255,255,0,0.7)";
labove.box.setAttribute("invoke", "onmutation1");
await Task.Delay(1500);
// is mutation observer noticing it?
labove.box.style.background = "rgba(255,255,255,0.7)";
labove.box.setAttribute("invoke", "onmutation2");
await Task.Delay(1500);
goto retry;
}
);
var c = labove.AsCanvas();
var xcrateTexture = new THREE.Texture(c);
// like video texture
Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; };
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map = xcrateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var xsprite2 = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
xsprite2.position.set(200, 0, 0);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
xsprite2.scale.set(
c.width * 0.5,
c.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(xsprite2);
}
#endregion
//var lineTo = new List<THREE.Vector3>();
var others = new
{
ui = default(NotificationLayout),
canvas = default(IHTMLCanvas),
map = default(THREE.Texture),
sprite = default(THREE.Sprite)
}.ToEmptyList();
#region add
Action <NotificationLayout> add = ui =>
{
ui.layout.style.background = "";
var canvas = ui.AsCanvas();
var index = others.Count;
//ui.Message += new { index };
//ui.Message.innerText += new { index };
//lbelow0.Message = new { THREE.REVISION }.ToString();
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )
var map = new THREE.Texture(canvas);
map.minFilter = THREE.LinearFilter;
// like video texture
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left middle
//sprite2.position.set(200, 0, 0);
//sprite.position.set(250, -50, 50);
//lineTo.Add(sprite.position);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite.scale.set(
canvas.width * 0.5,
canvas.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite);
others.Add(
new
{
ui,
canvas,
map,
sprite
}
);
var sw = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// can we get some of the crazy c++ template bitmapbuffer code from the past?
map.needsUpdate = true;
var offset = Math.PI * 2 * ((double)(index + 1) / others.Count);
sprite.position.x = 300;
sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
};
};
#endregion
#region NotificationLayout
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Advanced Mechanics by Portugal Design Lab"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Face Value by mshariful"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Mind Wall. by Sumit Goski"
}
);
#endregion
#region lines
{
var geometry = new THREE.Geometry
{
// how can we keep streaming verticies data points to gpu?
vertices =
others.SelectMany(
lineTo =>
new[]
{
new THREE.Vector3(200, 0, 0),
lineTo.sprite.position
}
).ToArray()
// https://github.com/mrdoob/three.js/wiki/Updates
// http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render
//verticesNeedUpdate = true
};
Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; };
var o = new THREE.Line(geometry, new THREE.LineDashedMaterial(
new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 }
), THREE.LineStrip);
//objects.Add(o);
scene.add(o);
}
#endregion
Native.window.onframe +=
ee =>
{
// look we are having html in 3D in VR!
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//lat = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
target.y = 500 * Math.Cos(phi);
target.z = 500 * Math.Sin(phi) * Math.Sin(theta);
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
//renderer.render(scene, camera);
effect.render(scene, camera);
};
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
* Alternative calculation (replacing lines 99-107 above):
*
* var compassHeading = Math.atan2(rA, rB);
*
* if(rA < 0) {
* compassHeading += 2 * Math.PI;
* }
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection;;
};
// https://developer.android.com/training/system-ui/immersive.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)
{
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();
};
}
void onDocumentMouseMove(Event arg)
{
if (!IsActive) return;
MouseEvent e = arg.As<MouseEvent>();
e.PreventDefault();
SetMousePos(e);
raycaster.setFromCamera(mouse, camera);
THREE.Intersection[] intersects;
if (selected != null )
{
intersects = raycaster.intersectObject(plane);
selected.position.copy(intersects[0].point.sub(offset));
return;
}
intersects = raycaster.intersectObjects(allObjects);
if (intersects.Length > 0)
{
THREE.Intersection i = intersects[0];
THREE.Mesh m = i.Object as THREE.Mesh;
if (m!=null && m!= intersected)
{
intersected = m;
plane.position.copy(intersected.position);
plane.lookAt(camera.position);
}
Container.Style.Cursor = Cursor.Pointer;
}
else
{
intersected = null;
Container.Style.Cursor = Cursor.Auto;
}
}
/// <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();
}
};
}
void onDocumentMouseDown(Event arg)
{
if (!IsActive) return;
MouseEvent e = arg.As<MouseEvent>();
e.PreventDefault();
THREE.Vector3 vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
THREE.Intersection[] intersects = raycaster.intersectObjects(allObjects);
if (intersects.Length > 0 )
{
THREE.Intersection interSec = intersects[0];
THREE.Mesh m = interSec.Object as THREE.Mesh;
if (m != null)
{
controls.enabled = false;
selected = m;
intersects = raycaster.intersectObject(plane);
offset.copy(interSec.point).sub(plane.position);
Container.Style.Cursor = Cursor.Move;
}
}
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150912/x360mountains
// ls sdcard/oculus/360photos/
// "X:\vr\0000.png"
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\0000.png" /sdcard/oculus/360photos/
// 2649 KB/s (1085134 bytes in 0.400s)
// "X:\vr\tr.png"
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\tr.png" /sdcard/oculus/360photos/
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\code.png" /sdcard/oculus/360photos/
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\cone2.png" /sdcard/oculus/360photos/
// "X:\vr\code.png"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150906/roomscanningeffectbyrosme
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150816/iss
// https://www.youtube.com/watch?v=UWiq-qgedws
// https://www.youtube.com/watch?v=TwRSOEG-Gx4
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0000.png" "/sdcard/oculus/360photos/tape360iss.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0230.png" "/sdcard/oculus/360photos/tape360iss0230.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\sh1\0000.png" "/sdcard/oculus/360photos/sh1.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360columns\0000.png" "/sdcard/oculus/360photos/tape360columns.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\edge.png" "/sdcard/oculus/360photos/tape360columns.png"
// 4041 KB/s (3248448 bytes in 0.785s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\terrain.png" "/sdcard/oculus/360photos/"
// could we udp our 360 image from webgl to vr yet?
// "R:\vr\tape360iss\0230.png"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst /D b:
// subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web
// subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web
// what if we want to do subst in another winstat or session?
// ColladaLoader: Empty or non-existing file (assets/x360mountains/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: "x360mountains");
// 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
//var vs0 = new TraceConeWithCRTByKlk.Shaders.Program360FragmentShader();
//var vs0 = new FaceEdgeVertexByPaniq.Shaders.Program360FragmentShader();
var vs0 = new ChromeShaderToyMountainsByHoskins.Shaders.Program360FragmentShader();
// onframe need syncs to enable GC!
var vsync = default(TaskCompletionSource<object>);
Func<bool> vsyncReady = delegate
{
if (vsync != null)
if (vsync.Task.IsCompleted)
return true;
return false;
};
// crash
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
// not responding...
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
int cubefacesizeMAX = 2048; // 6 faces, ?
//int cubefacesizeMAX = 1024; // 6 faces, ?
int cubefacesize = cubefacesizeMAX; // 6 faces, ?
//int cubefacesize = 1024; // 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/"
// force laptop into preview. when can we have a button for it?
//if (Environment.ProcessorCount < 8)
// cubefacesize = 64; // 6 faces, ?
// fast gif?
//cubefacesize = 128; // 6 faces, ?
//cubefacesize = 512; // 6 faces, ?
// [GroupMarkerNotSet(crbug.com / 242999)!:247F0809]
//RENDER WARNING: texture bound to texture unit 0 is not renderable.It maybe non-power-of-2 and have incompatible texture filtering.
// 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;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
//return;
// Earth params
//var radius = 0.5;
//var radius = 1024;
//var radius = 2048;
//var radius = 512;
//var radius = 256;
//var radius = 400;
// can we have not fly beyond moon too much?
//var radius = 500;
var radius = 480;
//var segments = 32;
var segments = 128 * 2;
//var rotation = 6;
//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/x360mountains/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg )
var far = 0xffffff;
new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument();
//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);
//scene.add(new THREE.AmbientLight(0x333333));
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xaaaaaa));
//scene.add(new THREE.AmbientLight(0xcccccc));
//scene.add(new THREE.AmbientLight(0xeeeeee));
scene.add(new THREE.AmbientLight(0xffffff));
//var light = new THREE.DirectionalLight(0xffffff, 1);
//// sun should be beyond moon
////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance);
////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//// where shall the light source be to see half planet?
//light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//scene.add(light);
//var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument();
//var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument();
//var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument();
//new IHTMLHorizontalRule { }.AttachToDocument();
// 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);
renderer0.setClearColor(0x0, 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 bottomRotate100 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -314, max = 314, valueAsNumber = 0, title = "bottomRotate" }.AttachToDocument();
var maxfps = 60;
//var maxlengthseconds = 60;
var maxlengthseconds = 120;
var maxframes = maxlengthseconds * maxfps;
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 137, title = "frameIDslider" }.AttachToDocument();
frameIDslider.onchange += delegate { frameIDslider.title = "frameIDslider " + frameIDslider.valueAsNumber; };
//var vs0 = new ChromeShaderToyRelentlessBySrtuss.Shaders.ProgramFragmentShader();
//var vs0 = new TraceConeWithCRTByKlk.Shaders.ProgramFragmentShader();
// left
IHTMLCanvas shader0canvasPZ = null;
// locCameraTargetOffset to look left?
#region shader0canvasPZ
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader0canvasPZ = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f);
// left?
//forward=normalize(float3(0.0 , 0.0 ,1.0));
};
Native.window.onframe += delegate
{
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// front
IHTMLCanvas shader1canvasPX = null;
#region shader1canvasPX
new { }.With(
async delegate
{
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
var gl0 = new WebGLRenderingContext(alpha: true);
shader1canvasPX = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
c0.style.SetLocation(720, 8);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
pass0.ProgramSelected += mProgram =>
{
// off by 45deg__
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f);
// fixup
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, -1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 0.0f);
// front
//forward=normalize(float3(1.0 , 0.0 ,0.0));
};
var sw0 = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// back
IHTMLCanvas shader1canvasNX = null;
#region shader1canvasNX
new { }.With(
async delegate
{
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
var gl0 = new WebGLRenderingContext(alpha: true);
shader1canvasNX = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
c0.style.SetLocation(720, 8);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
pass0.ProgramSelected += mProgram =>
{
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, 1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f);
// back
//forward=normalize(float3(-1.0 , 0.0 ,0.0));
};
var sw0 = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// right
IHTMLCanvas shader2canvasNZ = null;
// locCameraTargetOffset to look right?
#region shader2canvasNZ
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader2canvasNZ = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f);
// right
//forward=normalize(float3(0.0 , 0.0 ,-1.0));
};
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// bottom
IHTMLCanvas shader2canvasNY = null;
// locCameraTargetOffset to look bottom?
#region shader2canvasNY
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader2canvasNY = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
// 45deg off??
// front
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f);
// left
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, -1, 0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0);
};
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// top
IHTMLCanvas shader2canvasPY = null;
// locCameraTargetOffset to look right?
#region shader2canvasPY
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader2canvasPY = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
// 45deg off??
// front
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f);
// left
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, 1, 0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0);
};
Native.window.onframe += delegate
{
//d = a[0].CS___8__locals1.vsync != null;
//e = a[0].CS___8__locals1.vsync.kAcABp_b1ITCbIktNs3el5Q().dgQABqwxMjO1zVAJb5WXKA();
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
new IHTMLHorizontalRule { }.AttachToDocument();
var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, 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 = 0 - 2048 * 4, max = 2048 * 4, valueAsNumber = 0, 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 * 4, max = 0 + 2048 * 4, 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?
1.0 * (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,
1.0 * (cy + fcameray),
//1200
1.0 * (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";
// roslyn!
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;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
// 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.galaxy_starfield().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().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 DirectoryEntry
var dir = default(DirectoryEntry);
int files2count = 0;
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
var dir2r = dir.createReader();
var files2 = await dir2r.readFileEntries();
files2count = files2.Count();
if (files2count > 0)
{
new IHTMLPre { new { files2count } }.AttachToDocument();
}
};
frame0.style.cursor = IStyle.CursorEnum.pointer;
frame0.title = "save frame";
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
#region render 60hz 30sec
new IHTMLButton {
$"render {maxfps}hz {maxlengthseconds}sec"
}.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 = 0;
//frameIDslider.valueAsNumber = -1;
frameIDslider.valueAsNumber = files2count - 1;
goto beforeframe;
// parallax offset?
await_nextframe:
var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".png";
status = "rendering... " + new { 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;
// https://code.google.com/p/chromium/issues/detail?id=404301
if (dir != null)
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;
// design mode v render mode
if (cubefacesize < cubefacesizeMAX)
frameIDslider.valueAsNumber += 15;
else
frameIDslider.valueAsNumber++;
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 = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
// 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);
// some shaders need to know where the camera is looking from. can we tell them?
//fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//// up
//fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
// cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)));
// up
//fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcamerax += (1.0 / 60.0);
//fcamerax += (1.0 / 60.0) * 120;
// 60hz 30sec
if (frameIDslider.valueAsNumber < maxframes)
{
// Blob GC? either this helms or the that we made a Blob static.
//await Task.Delay(11);
await Task.Delay(33);
// gc at 260 happened twice?
goto await_nextframe;
}
total.Stop();
status = "all done " + new { frameid = frameIDslider.valueAsNumber, total.ElapsedMilliseconds };
vsync = default(TaskCompletionSource<object>);
// http://stackoverflow.com/questions/22899333/delete-javascript-blobs
e.Element.disabled = false;
};
#endregion
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
// asus will hang
// https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a
// can we get one frame into vr?
// cube: mesh to cast shadows
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// 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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 })
// );
// floor2.position.set(0, 0, -cubefacesize / 2);
// floor2.AttachTo(scene);
//}
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// 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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff })
// );
// floor2.position.set(-cubefacesize / 2, 0, 0);
// floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
// floor2.AttachTo(scene);
//}
// front?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader1canvasPX) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//floor2.position.set(0, 0, -cubefacesize * 0.55);
floor2.position.set(-cubefacesize * 0.5, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
floor2.AttachTo(scene);
}
// left?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader0canvasPZ) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0xff0000,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
floor2.position.set(0, 0, cubefacesize * 0.5);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
floor2.AttachTo(scene);
}
// right?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader2canvasNZ) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
floor2.position.set(0, 0, -cubefacesize * 0.5);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
floor2.AttachTo(scene);
}
// back?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader1canvasNX) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
floor2.position.set(cubefacesize * 0.5, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
floor2.AttachTo(scene);
}
// bottom?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader2canvasNY) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
//floor2.position.set(cubefacesize * 0.5, 0, 0);
//floor2.position.set(-cubefacesize * 0.5, 0, 0);
floor2.position.set(0, -cubefacesize * 0.5, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
applycameraoffset += delegate
{
floor2.rotation.set(0, 0, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI );
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI);
floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI + bottomRotate100 * 0.01f);
};
floor2.AttachTo(scene);
}
// top?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader2canvasPY) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
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 = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
//floor2.position.set(cubefacesize * 0.5, 0, 0);
//floor2.position.set(-cubefacesize * 0.5, 0, 0);
floor2.position.set(0, cubefacesize * 0.5, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
applycameraoffset += delegate
{
floor2.rotation.set(0, 0, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI );
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI);
floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), bottomRotate100 * 0.01f);
};
floor2.AttachTo(scene);
}
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs
// X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs
// hidden for alpha AppWindows
//#if FBACKGROUND
#region galaxy_starfield
new THREE.Texture().With(
async s =>
{
var i = new HTML.Images.FromAssets.galaxy_starfield();
//var i = new HTML.Images.FromAssets.galaxy_starfield150FOV();
var bytes = await i.async.bytes;
//for (int ii = 0; ii < bytes.Length; ii += 4)
//{
// bytes[ii + 3] = (byte)(bytes[ii + 0]);
// bytes[ii + 0] = 0xff;
// bytes[ii + 1] = 0xff;
// bytes[ii + 2] = 0xff;
//}
var cc = new CanvasRenderingContext2D(i.width, i.height);
cc.bytes = bytes;
s.image = cc;
s.needsUpdate = true;
var stars_material = new THREE.MeshBasicMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
map = s,
side = THREE.BackSide,
transparent = true
});
var stars = new THREE.Mesh(
new THREE.SphereGeometry(far * 0.9, 64, 64),
stars_material
);
// http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity
//(stars_material as dynamic).opacity = 0.5;
scene.add(stars);
}
);
#endregion
new { }.With(
delegate
{
//dae.position.y = -80;
//dae.AttachTo(sceneg);
//scene.add(dae);
//oo.Add(dae);
//var rdysw = Stopwatch.StartNew();
//Console.WriteLine()
// 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..
// let render man know..
if (vsyncReady())
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;
//globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0;
//clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0;
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
// 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?
// are we ready?
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?");
}
void onDocumentMouseUp(Event arg)
{
if (!IsActive) return;
MouseEvent e = arg.As<MouseEvent>();
e.PreventDefault();
controls.enabled = true;
if (intersected != null)
{
plane.position.copy(intersected.position);
selected = null;
}
Container.Style.Cursor = Cursor.Auto;
}
/// <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)
{
// 20140704 no balls shown?
// broken?
// view-source:http://www.mrdoob.com/lab/javascript/beachballs/
//Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
var origin = new THREE.Vector3(0, 15, 0);
var isMouseDown = false;
var renderer = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = false
});
renderer.setClearColor(new THREE.Color(0x101010));
renderer.domElement.AttachToDocument();
// scene
var camera = new THREE.PerspectiveCamera(
40,
Native.window.aspect, 1,
1000
);
camera.position.x = -30;
camera.position.y = 10;
camera.position.z = 30;
camera.lookAt(new THREE.Vector3(0, 10, 0));
#region AtResize
Action AtResize = delegate
{
camera.aspect = (double)Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
var scene = new THREE.Scene();
var light = new THREE.HemisphereLight(0xffffff, 0x606060, 1.2);
light.position.set(-10, 10, 10);
scene.add(light);
{
var geometry = new THREE.CubeGeometry(20, 20, 20);
var material = new THREE.MeshBasicMaterial(
new { wireframe = true, opacity = 0.1, transparent = true });
var mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 10;
scene.add(mesh);
}
var intersectionPlane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20, 8, 8));
intersectionPlane.position.y = 10;
intersectionPlane.visible = false;
scene.add(intersectionPlane);
// geometry
var ballGeometry = new THREE.Geometry();
var ballMaterial = new THREE.MeshPhongMaterial(
new __MeshPhongMaterialDictionary
{
vertexColors = THREE.FaceColors,
specular = 0x808080,
shininess = 2000
}
);
//
var colors = new[] {
new THREE.Color( 0xe52b30 ),
new THREE.Color( 0xe52b30 ),
new THREE.Color( 0x2e1b6a ),
new THREE.Color( 0xdac461 ),
new THREE.Color( 0xf07017 ),
new THREE.Color( 0x38b394 ),
new THREE.Color( 0xeaf1f7 )
};
var amount = colors.Length;
var geometryTop = new THREE.SphereGeometry(1, 5 * amount, 2, 0, Math.PI * 2.0, 0, 0.30);
for (var j = 0; j < geometryTop.faces.Length; j++)
{
geometryTop.faces[j].color = colors[0];
}
THREE.GeometryUtils.merge(ballGeometry, geometryTop);
var geometryBottom = new THREE.SphereGeometry(1, 5 * amount, 2, 0, Math.PI * 2, Math.PI - 0.30, 0.30);
for (var j = 0; j < geometryBottom.faces.Length; j++)
{
geometryBottom.faces[j].color = colors[0];
}
THREE.GeometryUtils.merge(ballGeometry, geometryBottom);
{
var sides = amount - 1;
var size = (Math.PI * 2) / sides;
for (var i = 0; i < sides; i++)
{
var patch = new THREE.SphereGeometry(1, 5, 10, i * size, size, 0.30, Math.PI - 0.60);
for (var j = 0; j < patch.faces.Length; j++)
{
patch.faces[j].color = colors[i + 1];
}
THREE.GeometryUtils.merge(ballGeometry, patch);
}
}
// physics
var world = new CANNON.World();
world.broadphase = new CANNON.NaiveBroadphase();
world.gravity.set(0, -15, 0);
world.solver.iterations = 7;
world.solver.tolerance = 0.1;
var groundShape = new CANNON.Plane();
var groundMaterial = new CANNON.Material();
var groundBody = new CANNON.RigidBody(0, groundShape, groundMaterial);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2.0);
world.add(groundBody);
var planeShapeXmin = new CANNON.Plane();
var planeXmin = new CANNON.RigidBody(0, planeShapeXmin, groundMaterial);
planeXmin.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2.0);
planeXmin.position.set(-10, 0, 0);
world.add(planeXmin);
var planeShapeXmax = new CANNON.Plane();
var planeXmax = new CANNON.RigidBody(0, planeShapeXmax, groundMaterial);
planeXmax.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), -Math.PI / 2.0);
planeXmax.position.set(10, 0, 0);
world.add(planeXmax);
var planeShapeYmin = new CANNON.Plane();
var planeZmin = new CANNON.RigidBody(0, planeShapeYmin, groundMaterial);
planeZmin.position.set(0, 0, -10);
world.add(planeZmin);
var planeShapeYmax = new CANNON.Plane();
var planeZmax = new CANNON.RigidBody(0, planeShapeYmax, groundMaterial);
planeZmax.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI);
planeZmax.position.set(0, 0, 10);
world.add(planeZmax);
var ballBodyMaterial = new CANNON.Material();
world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, ballBodyMaterial, 0.2, 0.5));
world.addContactMaterial(new CANNON.ContactMaterial(ballBodyMaterial, ballBodyMaterial, 0.2, 0.8));
var spheres = new Queue<THREE.Mesh>();
var bodies = new Queue<CANNON.RigidBody>();
Func<double> random = new Random().NextDouble;
#region addBall
Action<double, double, double> addBall = (x, y, z) =>
{
x = Math.Max(-10, Math.Min(10, x));
y = Math.Max(5, y);
z = Math.Max(-10, Math.Min(10, z));
var size = 1.25;
var sphere = new THREE.Mesh(ballGeometry, ballMaterial);
sphere.scale.multiplyScalar(size);
//sphere.useQuaternion = true;
scene.add(sphere);
spheres.Enqueue(sphere);
var sphereShape = new CANNON.Sphere(size);
var sphereBody = new CANNON.RigidBody(0.1, sphereShape, ballBodyMaterial);
sphereBody.position.set(x, y, z);
var q = new
{
a = random() * 3.0,
b = random() * 3.0,
c = random() * 3.0,
d = random() * 3.0
};
Console.WriteLine("addBall " + new { x, y, z, q });
//sphereBody.quaternion.set(q.a, q.b, q.c, q.d);
world.add(sphereBody);
bodies.Enqueue(sphereBody);
};
#endregion
for (var i = 0; i < 100; i++)
{
addBall(
random() * 10 - 5,
random() * 20,
random() * 10 - 5
);
}
//
var projector = new THREE.Projector();
var ray = new THREE.Raycaster();
var mouse3D = new THREE.Vector3();
Native.Document.body.ontouchstart +=
e =>
{
e.preventDefault();
isMouseDown = true;
};
Native.Document.body.ontouchmove +=
e =>
{
e.preventDefault();
};
Native.Document.body.ontouchend +=
e =>
{
e.preventDefault();
isMouseDown = false;
};
#region onmousemove
Native.document.body.onmousedown +=
e =>
{
e.preventDefault();
isMouseDown = true;
};
Native.document.body.onmouseup +=
e =>
{
e.preventDefault();
isMouseDown = false;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
if (Native.Document.pointerLockElement == Native.Document.body)
{
// cant requestFullscreen while pointerLockElement
Console.WriteLine("exitPointerLock");
Native.Document.exitPointerLock();
Native.Document.exitFullscreen();
return;
}
Console.WriteLine("requestFullscreen");
Native.Document.body.requestFullscreen();
Native.Document.body.requestPointerLock();
return;
}
};
Native.document.body.onmousemove +=
e =>
{
mouse3D.set(
((double)e.CursorX / (double)Native.window.Width) * 2 - 1,
-((double)e.CursorY / (double)Native.window.Height) * 2 + 1,
0.5
);
projector.unprojectVector(mouse3D, camera);
ray.set(camera.position, mouse3D.sub(camera.position).normalize());
var intersects = ray.intersectObject(intersectionPlane);
if (intersects.Length > 0)
{
origin.copy(intersects[0].point);
}
};
#endregion
#region removeBall
Action removeBall = delegate
{
scene.remove(spheres.Dequeue());
world.remove(bodies.Dequeue());
};
#endregion
var sw0 = Stopwatch.StartNew();
var sw = Stopwatch.StartNew();
//var time = Native.window.performance.now();
//var lastTime = Native.window.performance.now();
#region animate
Action render =
delegate
{
var delta = sw.ElapsedMilliseconds;
sw.Restart();
//time = Native.window.performance.now();
camera.position.x = -Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 40;
camera.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 40;
camera.lookAt(new THREE.Vector3(0, 10, 0));
intersectionPlane.lookAt(camera.position);
world.step(delta * 0.001);
//lastTime = time;
for (var i = 0; i < spheres.Count; i++)
{
var sphere = spheres.ElementAt(i);
var body = bodies.ElementAt(i);
sphere.position.copy(body.position);
sphere.quaternion.copy(body.quaternion);
}
renderer.render(scene, camera);
};
Native.window.onframe += delegate
{
if (isMouseDown)
{
if (spheres.Count > 200)
{
removeBall();
}
addBall(
origin.x + (random() * 4.0 - 2),
origin.y + (random() * 4.0 - 2),
origin.z + (random() * 4.0 - 2)
);
}
render();
};
#endregion
}
// new three broke it?
// http://www.clicktorelease.com/code/perlin/explosion.html
// http://www.webgl.com/2013/01/webgl-tutorial-vertex-displacement-with-a-noise-function-aka-fiery-explosion/
/// <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)
{
// http://inear.se/fireshader/
// http://stackoverflow.com/questions/16765120/ashima-perlin-noise-shader-not-working-with-recent-versions-of-three-js
//var container, renderer, camera, mesh;
var start = IDate.Now;
var fov = 30;
#region container
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var container = new IHTMLDiv();
container.AttachToDocument();
container.style.backgroundColor = "#000000";
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#endregion
var scene = new THREE.Scene();
var bkgScene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(fov, Native.window.aspect, 1, 10000);
camera.position.z = 100;
//camera.target = new THREE.Vector3(0, 0, 0);
scene.add(camera);
var bkgCamera = new THREE.OrthographicCamera(
Native.window.Width / -2,
Native.window.Width / 2,
Native.window.Height / 2,
Native.window.Height / -2,
-10000,
10000
);
bkgScene.add(bkgCamera);
var bkgShader = new THREE.ShaderMaterial(
new
{
uniforms = new
{
tDiffuse = new
{
type = "t",
value = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets.bkg().src
)
},
resolution = new { type = "v2", value = new THREE.Vector2(Native.window.Width, Native.window.Height) }
},
vertexShader = new Shaders.ExplosionVertexShader().ToString(),
// fragmentShader: document.getElementById( 'fs_Gradient' ).textContent,
//fragmentShader = new Shaders.GradientFragmentShader().ToString(),
fragmentShader = new Shaders.ExplosionFragmentShader().ToString(),
depthWrite = false,
depthTest = false,
transparent = true
}
);
var quad = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), bkgShader);
quad.position.z = -100;
quad.rotation.x = (float)Math.PI / 2;
bkgScene.add(quad);
var material = new THREE.ShaderMaterial(
new
{
uniforms = new // material_uniforms
{
tExplosion = new //uniforms_item
{
type = "t",
value = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets.explosion().src
)
},
time = new { type = "f", value = 0.0 },
weight = new { type = "f", value = 8.0 },
},
vertexShader = new Shaders.ExplosionVertexShader().ToString(),
fragmentShader = new Shaders.ExplosionFragmentShader().ToString(),
depthWrite = false,
depthTest = false,
transparent = true
}
);
var mesh = new THREE.Mesh(new THREE.SphereGeometry(20, 200, 200), material);
scene.add(mesh);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.autoClear = false;
container.appendChild(renderer.domElement);
var lon = 0.0;
var phi = 0.0;
var theta = 0.0;
var lat = 15.0;
var isUserInteracting = false;
var scale = 0.0;
#region render
Native.window.onframe += delegate
{
((material_uniforms)material.uniforms).time.value = .00025 * (IDate.Now - start);
scale += .005;
scale %= 2;
lat = Math.Max(-85, Math.Min(85, lat));
phi = (90 - lat) * Math.PI / 180;
theta = lon * Math.PI / 180;
camera.position.x = (float)(100 * Math.Sin(phi) * Math.Cos(theta));
camera.position.y = (float)(100 * Math.Cos(phi));
camera.position.z = (float)(100 * Math.Sin(phi) * Math.Sin(theta));
//mesh.rotation.x += .012;
//mesh.rotation.y += .01;
camera.lookAt(scene.position);
// //renderer.render( bkgScene, bkgCamera );
renderer.render(scene, camera);
// stats.update();
};
#endregion
#region IsDisposed
Dispose = delegate
{
if (IsDisposed)
return;
IsDisposed = true;
container.Orphanize();
};
#endregion
#region AtResize
Action AtResize = delegate
{
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
renderer.setSize(Native.window.Width, Native.window.Height);
camera.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100);
//camera.aspect = Native.Window.Width / Native.Window.Height;
//camera.updateProjectionMatrix();
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
var ze = new ZeProperties();
ze.Show();
ze.treeView1.Nodes.Clear();
ze.Add(() => renderer);
//ze.Add(() => controls);
ze.Add(() => scene);
ze.Left = 0;
}
public void addLocation(double lat, double lon, double radius, double heigth, THREE.Object3D parent, double segments)
{
var phi = (lat) * Math.PI / 180;
var theta = (lon - 180) * Math.PI / 180;
var x = -(radius + heigth) * Math.Cos(phi) * Math.Cos(theta);
var y = (radius + heigth) * Math.Sin(phi);
var z = (radius + heigth) * Math.Cos(phi) * Math.Sin(theta);
var latLongOnSphere = new THREE.Vector3(x, y, z);
var p = new THREE.Mesh(
new THREE.SphereGeometry(
0.005,
(int)segments, (int)segments),
new THREE.MeshBasicMaterial(
new
{
color = "red"
})
);
p.position = latLongOnSphere;
parent.add(p);
}
private static void InitializeContent()
{
Action __WoodsXmasByRobert_loaded = null;
Console.WriteLine(
new { Native.window.opener, Native.window.parent }
);
Native.window.parent.With(
parent =>
{
parent.postMessage("WoodsXmasByRobert.preparing");
Console.WriteLine("WoodsXmasByRobert.preparing");
__WoodsXmasByRobert_loaded = delegate
{
Console.WriteLine("will post WoodsXmasByRobert.loaded");
__WoodsXmasByRobert_loaded = null;
parent.postMessage("WoodsXmasByRobert.loaded");
};
}
);
//<!-- Snow flakes -->
new IHTMLScript { type = "x-shader/x-vertex", id = "vertexshader", innerText = new Shaders.particlesVertexShader().ToString() }.AttachToDocument();
new IHTMLScript { type = "x-shader/x-fragment", id = "fragmentshader", innerText = new Shaders.particlesFragmentShader().ToString() }.AttachToDocument();
var w = Native.window;
dynamic window = w;
// http://stackoverflow.com/questions/4923136/why-doesnt-firefox-support-mp3-file-format-in-audio
// Timestamp: 12/28/2012 1:22:05 PM
//Warning: HTTP "Content-Type" of "audio/mpeg3" is not supported. Load of media resource http://192.168.1.100:27248/assets/WoodsXmasByRobert/unfiltered_mix.mp3 failed.
//Source File: http://192.168.1.100:27248/
//Line: 0
#region snd
var snd = new HTML.Audio.FromAssets.unfiltered_mix { volume = 0.9 };
window.snd = snd;
Native.window.onfocus +=
delegate
{
Console.WriteLine("WoodsXmasByRobert onfocus");
snd.volume = 0.9;
};
Native.window.onblur +=
delegate
{
Console.WriteLine("WoodsXmasByRobert onblur");
snd.volume = 0.1;
// if we are also not visible anymore
// and animations frame stop
// we should stop all sound
};
#endregion
var canvas = new IHTMLCanvas();
object webglRenderer_args = new object().With(
(dynamic a) =>
{
a.clearColor = 0x000000;
a.clearAlpha = 1.0;
a.preserveDrawingBuffer = true;
a.canvas = canvas;
}
);
var webglRenderer = new THREE.WebGLRenderer(
webglRenderer_args
);
webglRenderer.autoClear = false;
//var canvas = (IHTMLCanvas)webglRenderer.domElement;
canvas.AttachToDocument();
webglRenderer.setSize(Native.window.Width, Native.window.Height);
var camera = new THREE.PerspectiveCamera(75, Native.window.Width / Native.window.Height, 1, 100000);
camera.position.z = 0;
camera.position.x = 0;
camera.position.y = 0;
window.camera = camera;
var cameraTarget = new THREE.Vector3();
cameraTarget.z = -400;
camera.lookAt(cameraTarget);
window.cameraTarget = cameraTarget;
var loadingImage = THREE.ImageUtils.loadTexture(new loading().src);
var map = THREE.ImageUtils.loadTexture(new snowflake().src);
var starImage = THREE.ImageUtils.loadTexture(new flare().src);
window.loadingImage = loadingImage;
window.map = map;
window.starImage = starImage;
#region cursor
var cursor = new pointer();
cursor.style.zIndex = 0x1000;
cursor.Hide();
cursor.AttachToDocument();
dynamic style = Native.Document.body.style;
//http://stackoverflow.com/questions/7849002/how-can-i-set-the-hotspot-to-the-center-of-a-custom-cursor
// http://stackoverflow.com/questions/5649608/custom-css-cursors
style.cursor = "url(" + cursor.src + ") 16 16,pointer";
#endregion
var mouseXpercent = 0.5;
var mouseYpercent = 0.5;
#region onmousemove
var CursorX = 0;
var CursorY = 0;
Native.Document.onmousemove +=
e =>
{
if (Native.Document.pointerLockElement == Native.Document.body)
{
cursor.Show();
CursorX += e.movementX;
CursorY += e.movementY;
}
else
{
cursor.Hide();
CursorX = e.CursorX;
CursorY = e.CursorY;
}
// keep cursor in view
CursorX = CursorX.Max(0).Min(Native.window.Width);
CursorY = CursorY.Max(0).Min(Native.window.Height);
if (Native.document.pointerLockElement == Native.document.body)
{
cursor.style.SetLocation(CursorX - 16, CursorY - 16);
}
var windowHalfX = Native.window.Width >> 1;
var windowHalfY = Native.window.Height >> 1;
var mouseX = (CursorX - windowHalfX);
var mouseY = (CursorY - windowHalfY);
mouseXpercent = mouseX / windowHalfX;
mouseYpercent = mouseY / windowHalfY;
window.mouseXpercent = mouseXpercent;
window.mouseYpercent = mouseYpercent;
};
#endregion
Native.Document.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Right)
Native.Document.body.requestPointerLock();
};
new AppCode().Content.AttachToDocument().onload +=
delegate
{
// ScriptCoreLib should define this event!
snd.addEventListener(
"loadeddata",
new Action(
delegate
{
new IFunction("window.checkLoadingDone();").apply(Native.window);
}
)
);
var scene = (THREE.Scene)(object)window.scene;
scene.add(camera);
#region Cloud
{
object args = new object().With(
(dynamic a) =>
{
a.map = THREE.ImageUtils.loadTexture(new cloud().src);
a.transparent = true;
a.opacity = 0.17;
a.fog = false;
}
);
var cloudPlane = new THREE.PlaneGeometry(12500, 1880);
var cloud = new THREE.Mesh(cloudPlane, new THREE.MeshBasicMaterial(args));
cloud.position.set(300, 5350, -4450);
cloud.lookAt(camera.position);
scene.add(cloud);
window.cloud = cloud;
}
#endregion
#region Sky
{
object args = new object().With(
(dynamic a) =>
{
a.map = THREE.ImageUtils.loadTexture(new sky().src);
a.opacity = 0.57;
a.fog = false;
}
);
var skyPlane = new THREE.PlaneGeometry(9000, 6000);
var sky = new THREE.Mesh(skyPlane, new THREE.MeshBasicMaterial(args));
sky.scale.set(4, 2.5, 2.5);
sky.position.set(0, 7500, -6000);
sky.lookAt(camera.position);
scene.add(sky);
window.sky = sky;
}
#endregion
#region moon
{
dynamic moon_material_args = new object();
moon_material_args.map = THREE.ImageUtils.loadTexture(new moon().src);
moon_material_args.transparent = true;
moon_material_args.opacity = 0.3;
moon_material_args.fog = false;
moon_material_args.blending = THREE.AdditiveBlending;
var moonPlane = new THREE.PlaneGeometry(1000, 1000);
var moon = new THREE.Mesh(moonPlane,
new THREE.MeshBasicMaterial(
(object)moon_material_args
)
);
moon.position.set(300, 4300, -4600);
moon.lookAt(camera.position);
scene.add(moon);
window.moon = moon;
}
#endregion
#region subtitleArray
var subtitleArray = (IArray<THREE.Mesh>)(object)window.subtitleArray;
var textPlane = new THREE.PlaneGeometry(512, 80);
new SubtitlesImages().Images.WithEach(
i =>
{
object args = new object().With(
(dynamic a) =>
{
a.map = THREE.ImageUtils.loadTexture(i.src);
a.transparent = true;
a.depthTest = false;
}
);
var sub = new THREE.Mesh(textPlane, new THREE.MeshBasicMaterial(args));
sub.position.z = -800;
sub.position.y = -550;
sub.visible = false;
camera.add(sub);
subtitleArray.push(sub);
}
);
{
var endPlane = new THREE.PlaneGeometry(500, 100);
object args = new object().With(
(dynamic a) =>
{
a.map = THREE.ImageUtils.loadTexture(new xmas().src);
a.transparent = true;
a.opacity = 1.0;
a.depthTest = false;
}
);
var end = new THREE.Mesh(endPlane, new THREE.MeshBasicMaterial(args));
end.position.z = -400;
end.position.y = 100;
end.visible = false;
camera.add(end);
subtitleArray.push(end);
window.end = end;
}
new IFunction("window.setupSubtitles();").apply(Native.window);
#endregion
var particles = (THREE.ParticleSystem)(object)window.particles;
var bgSprite = (THREE.Sprite)(object)window.bgSprite;
var loadingSprite = (THREE.Sprite)(object)window.loadingSprite;
var pointLight = (THREE.PointLight)(object)window.pointLight;
var treeArray = (IArray<THREE.Mesh>)(object)window.treeArray;
var rockArray = (IArray<THREE.Mesh>)(object)window.rockArray;
var flowerArray = (IArray<THREE.Mesh>)(object)window.flowerArray;
var groundMesh1 = (THREE.Mesh)(object)window.groundMesh1;
var groundMesh2 = (THREE.Mesh)(object)window.groundMesh2;
var renderModel = (object)window.renderModel;
var effectFilm = (object)window.effectFilm;
var effectVignette = (object)window.effectVignette;
var effectCopy = (object)window.effectCopy;
var composer = new THREE.EffectComposer(webglRenderer);
composer.addPass(renderModel);
composer.addPass(effectFilm);
composer.addPass(effectVignette);
composer.addPass(effectCopy);
var speedEffector_value = (int)new IFunction("return window.speedEffector.value;").apply(Native.window);
#region load
Action<string, Action<object>> load =
(src, yield) =>
{
new THREE.JSONLoader().load(
src,
IFunction.OfDelegate(yield)
);
};
#endregion
#region sled
load(
new WoodsXmasByRobert.Design.models.sleigh().Content.src,
geometry =>
{
Console.WriteLine("got sled!");
var sled = new THREE.Mesh(
geometry,
new THREE.MeshFaceMaterial()
);
var scale = 4;
sled.scale.set(scale, scale, scale);
sled.rotation.y = -Math.PI / 2;
sled.position.y = -290;
sled.position.z = -80;
scene.add(sled);
window.sled = sled;
new IFunction("window.checkLoadingDone();").apply(Native.window);
}
);
#endregion
var random = new Random();
#region treeDead
load(
new WoodsXmasByRobert.Design.models.treeDead().Content.src,
tree1Geo =>
{
Console.WriteLine("got treeDead!");
load(
new WoodsXmasByRobert.Design.models.treeEvergreenHigh().Content.src,
tree2Geo =>
{
Console.WriteLine("got treeEvergreenHigh!");
var gridSize = 500;
for (var x = 0; x < 8; x++)
{
for (var z = 0; z < 12; z++)
{
var geo = tree2Geo;
if (random.NextDouble() < 0.25)
if (x != 0 && x != 7)
{
geo = tree1Geo;
}
var mesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial());
var scale = 1.2 + random.NextDouble();
mesh.scale.set(scale, scale * 2, scale);
var posx = 0.0;
if (x < 4)
{
posx = (x * gridSize) - (gridSize * 4) - 100 + random.NextDouble() * 100 - 50;
}
else
{
posx = (x * gridSize) - 1400 + random.NextDouble() * 100 - 50;
};
var posz = -(z * gridSize) + random.NextDouble() * 100 - 50;
mesh.position.set(posx, -400 - (random.NextDouble() * 80), posz);
mesh.rotation.set((random.NextDouble() * 0.2) - 0.1, random.NextDouble() * Math.PI, (random.NextDouble() * 0.2) - 0.1);
scene.add(mesh);
treeArray.push(mesh);
}
}
new IFunction("window.checkLoadingDone();").apply(Native.window);
}
);
}
);
#endregion
#region bird
load(
new WoodsXmasByRobert.Design.models.eagle().Content.src,
geometry =>
{
Console.WriteLine("got bird!");
dynamic args = new object();
args.color = 0x000000;
args.morphTargets = true;
args.fog = false;
var bird = new THREE.MorphAnimMesh(
geometry,
new THREE.MeshBasicMaterial(
(object)args
)
);
bird.duration = 1000;
bird.scale.set(4, 4, 4);
bird.rotation.y = Math.PI;
bird.position.set(0, 3000, -1500);
scene.add(bird);
window.bird = bird;
new IFunction("window.checkLoadingDone();").apply(Native.window);
}
);
#endregion
#region rock
load(
new WoodsXmasByRobert.Design.models.rock().Content.src,
geometry =>
{
Console.WriteLine("got rock!");
var numOfRocks = 25;
for (var i = 0; i < numOfRocks; ++i)
{
dynamic args = new object();
args.color = 0x444444;
var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial((object)args));
var scale = 1 + (random.NextDouble() * 0.5);
mesh.scale.set(scale, scale, scale);
mesh.rotation.set(0, random.NextDouble() * Math.PI, 0);
mesh.position.set((random.NextDouble() * 4000) - 2000, -400, (random.NextDouble() * 6000) - 6000);
if (mesh.position.x < 45)
if (mesh.position.x > 0)
{
mesh.position.x += 450;
}
if (mesh.position.x > -450)
if (mesh.position.x < 0)
{
mesh.position.x -= 450;
}
scene.add(mesh);
rockArray.push(mesh);
}
new IFunction("window.checkLoadingDone();").apply(Native.window);
}
);
#endregion
#region horse
load(
new WoodsXmasByRobert.Design.models.horse().Content.src,
geometry =>
{
Console.WriteLine("got horse!");
dynamic horse_material_args = new object();
horse_material_args.color = 0x090601;
horse_material_args.morphTargets = true;
var horse = new THREE.MorphAnimMesh(geometry,
new THREE.MeshLambertMaterial(
(object)horse_material_args
)
);
horse.duration = 1000;
horse.scale.set(2.5, 1.8, 2);
horse.rotation.y = Math.PI;
horse.position.set(0, -350, -700);
scene.add(horse);
window.horse = horse;
//checkLoadingDone();
// Handles
var plane = new THREE.PlaneGeometry(700, 10, 40, 1);
var l = Math.Floor(plane.vertices.Length / 2.0);
for (var i = 0; i < l; i++)
{
var offset = Math.Sin(i / 14) * 100;
plane.vertices[i].y -= offset;
plane.vertices[i + 41].y -= offset;
plane.vertices[i].z -= (i / 5) + (offset * -1) / 8;
plane.vertices[i + 41].z += (i / 5) - (offset * -1) / 8;
}
dynamic material_args = new object();
material_args.color = 0x090601;
material_args.side = THREE.DoubleSide;
var material = new THREE.MeshBasicMaterial(
(object)material_args
);
var leftHandle = new THREE.Mesh(plane, material);
leftHandle.position.y = -120;
leftHandle.position.z = -350;
leftHandle.position.x = -30;
leftHandle.rotation.y = -(Math.PI / 2) + 0.075;
leftHandle.rotation.x = Math.PI * 2 - 0.075;
scene.add(leftHandle);
window.leftHandle = leftHandle;
var rightHandle = new THREE.Mesh(plane, material);
rightHandle.position.y = -120;
rightHandle.position.z = -350;
rightHandle.position.x = 30;
rightHandle.rotation.y = -(Math.PI / 2) - 0.075;
rightHandle.scale.z = -1;
rightHandle.rotation.x = Math.PI * 2 - 0.075;
scene.add(rightHandle);
window.rightHandle = rightHandle;
new IFunction("window.checkLoadingDone();").apply(Native.window);
}
);
#endregion
#region flowerLoaded
Action<object, bool> flowerLoaded = (geometry, halfScale) =>
{
var numOfFlowers = 20;
var half = Math.Floor(numOfFlowers / 2.0);
dynamic args = new object();
args.color = 0x444444;
for (var i = 0; i < half; ++i)
{
var mesh = new THREE.Mesh(geometry,
new THREE.MeshLambertMaterial(
(object)args
)
);
var scale = 1 + (random.NextDouble() * 1);
if (halfScale)
{
scale *= 0.6;
}
mesh.scale.set(scale, scale, scale);
mesh.rotation.set((random.NextDouble() * 0.6) - 0.3, random.NextDouble() * Math.PI, (random.NextDouble() * 0.6) - 0.3);
mesh.position.set((random.NextDouble() * 1000) - 500, -310, (random.NextDouble() * 6000) - 6000);
if (mesh.position.x < 100)
if (mesh.position.x > 0)
{
mesh.position.x += 100;
}
if (mesh.position.x > -100)
if (mesh.position.x < 0)
{
mesh.position.x -= 100;
}
scene.add(mesh);
flowerArray.push(mesh);
}
new IFunction("window.checkLoadingDone();").apply(Native.window);
};
#endregion
#region weeds01
load(
new WoodsXmasByRobert.Design.models.weeds01().Content.src,
geometry =>
{
Console.WriteLine("got weeds01!");
flowerLoaded(geometry, false);
}
);
#endregion
#region glowbulb
load(
new WoodsXmasByRobert.Design.models.glowbulb().Content.src,
geometry =>
{
Console.WriteLine("got glowbulb!");
flowerLoaded(geometry, true);
}
);
#endregion
#region run
Action<double> run =
delta =>
{
// trees
var mesh = default(THREE.Mesh);
for (var i = 0; i < treeArray.length; ++i)
{
mesh = treeArray[i];
// respawn
if (mesh.position.z > camera.position.z + 700)
{
mesh.position.z -= 6000;
var scale = 1.2 + random.NextDouble();
mesh.scale.set(scale, scale * 2, scale);
}
}
// rocks
for (var i = 0; i < rockArray.length; ++i)
{
mesh = rockArray[i];
// respawn
if (mesh.position.z > camera.position.z + 400)
{
mesh.position.z -= 6000;
}
}
// flowers
for (var i = 0; i < flowerArray.length; ++i)
{
mesh = flowerArray[i];
// respawn
if (mesh.position.z > camera.position.z + 400)
{
mesh.position.z -= 6000;
}
}
// ground respawn
if (groundMesh1.position.z - 10000 > camera.position.z)
{
groundMesh1.position.z -= 40000;
}
if (groundMesh2.position.z - 10000 > camera.position.z)
{
groundMesh2.position.z -= 40000;
}
};
#endregion
var oldTime = new IDate().getTime();
var r = 0.0;
bool disableNextFrame = false;
#region loop
Action loop = delegate
{
var allLoaded = (bool)(object)window.allLoaded;
var horse = (THREE.MorphAnimMesh)(object)window.horse;
var bird = (THREE.MorphAnimMesh)(object)window.bird;
var leftHandle = (THREE.Mesh)(object)window.leftHandle;
var rightHandle = (THREE.Mesh)(object)window.rightHandle;
var moon = (THREE.Mesh)(object)window.moon;
var cloud = (THREE.Mesh)(object)window.cloud;
var sky = (THREE.Mesh)(object)window.sky;
var sled = (THREE.Mesh)(object)window.sled;
//new IFunction("this.loop();").apply(Native.Window);
var time = new IDate().getTime();
var delta = time - oldTime;
oldTime = time;
if (double.IsNaN(delta))
{
delta = 1000 / 60;
}
var maxSpeed = delta / 2;
if (allLoaded)
{
r += delta / 2000;
run(delta);
var noise = random.NextDouble() * 2;
camera.position.x = (50 * Math.Cos(r * 2)) * speedEffector_value;
camera.position.y = (2 * Math.Sin(r * 12) - 100) * speedEffector_value;
camera.up.x = (Math.Sin(r * 12) / 50) * speedEffector_value;
cameraTarget.y += (((camera.position.y + 80) + noise - mouseYpercent * 120) - cameraTarget.y) / 20;
cameraTarget.x += (mouseXpercent * 400 - cameraTarget.x) / 20;
var speed = (delta / 2) * speedEffector_value;
camera.position.z -= speed;
cameraTarget.z -= speed;
camera.lookAt(cameraTarget);
pointLight.position.z -= speed;
if (moon != null)
{
moon.position.z -= speed;
}
if (cloud != null)
{
cloud.position.z -= speed;
}
if (sky != null)
{
sky.position.z -= speed;
}
#region sled
if (sled != null)
{
sled.position.z -= speed;
sled.position.x = camera.position.x;
}
#endregion
#region bird
if (bird != null)
{
bird.position.x = 200 * Math.Cos(r) + ((bird.position.z - camera.position.z) / 10);
bird.position.y = 4000 + (Math.Sin(r) * 300);
bird.position.z -= maxSpeed * 1.25;
if (bird.position.z < camera.position.z - 10000)
{
bird.position.z = camera.position.z - 500;
}
bird.updateAnimation(delta);
}
#endregion
#region horse
if (horse != null)
{
horse.position.z -= speed;
horse.position.x = camera.position.x;
horse.updateAnimation(speed * 2);
leftHandle.position.z -= speed;
leftHandle.position.x = camera.position.x - 37;
rightHandle.position.z -= speed;
rightHandle.position.x = camera.position.x + 40;
leftHandle.scale.y = 1 - Math.Abs(Math.Sin(camera.position.z / 150)) / 4;
rightHandle.scale.y = leftHandle.scale.y;
}
#endregion
particles.position.z -= speed;
new IFunction("e", "window.uniforms.globalTime.value += e;").apply(Native.window, delta * 0.00015);
new IFunction("e", "window.uniforms.speed.value = e;").apply(Native.window, speed / maxSpeed);
new IFunction("window.runSubtitles();").apply(Native.window);
//disableNextFrame = true;
if (__WoodsXmasByRobert_loaded != null)
__WoodsXmasByRobert_loaded();
}
else
{
if (loadingSprite != null)
{
loadingSprite.position.set(Native.window.Width >> 1, Native.window.Height >> 1, 0);
loadingSprite.rotation -= 0.08;
}
}
if (bgSprite != null)
{
bgSprite.position.set(Native.window.Width >> 1, Native.window.Height >> 1, 0);
}
new IFunction("window.TWEEN.update();").apply(Native.window);
//if (has_gl)
{
webglRenderer.clear();
composer.render(0.01);
}
};
#endregion
#region animate
Native.window.onframe += delegate
{
if (disableNextFrame)
return;
loop();
};
#endregion
Action AtResize = delegate
{
// notify the renderer of the size change
webglRenderer.setSize(Native.window.Width, Native.window.Height);
// update the camera
camera.aspect = Native.window.Width / Native.window.Height;
camera.updateProjectionMatrix();
};
#region onresize
Native.window.onresize +=
delegate
{
AtResize();
};
#endregion
AtResize();
};
Native.Document.body.ondblclick +=
delegate
{
Native.Document.body.requestFullscreen();
};
Native.Document.body.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;
}
Native.Document.body.requestFullscreen();
Native.Document.body.requestPointerLock();
}
};
Native.Document.oncontextmenu +=
e =>
{
e.preventDefault();
};
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151227/x360stereomoon
// chrome cannot copy url to clipboard!
/// <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)
{
// THREE.WebGLRenderer 72dev
Console.WriteLine(new { THREE.REVISION } + " back screen until everithing loads!");
// http://smus.com/ultrasonic-networking/
// http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html
// http://chromium.googlecode.com/svn/trunk/samples/audio/box2d-js/box2d-audio.html
// http://chromium.googlecode.com/svn/trunk/samples/audio/simple.html
// http://chromium.googlecode.com/svn/trunk/samples/audio/oscillator-fm2.html
// http://borismus.github.io/spectrogram/
// http://borismus.github.io/moving-music/
// http://smus.com/spatial-audio-web-vr/
// can we have 360 audio yet?
// THREE.WebGLObjects: Converting... THREE.PointCloud THREE.BufferGeometry
new { }.With(
async delegate
{
//HTML.Audio.FromAssets.
// does jsc assetslibrary do jpeg? or do we need jpg/
Native.document.body.Clear();
Native.document.body.style.margin = "0px";
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
var w = Stopwatch.StartNew();
Console.WriteLine("awaiting for main()...");
dynamic window = Native.window;
// X:\opensource\github\moving-music\js\audio-renderer.js
// why do we need this?
window.forest_impulse_response = new HTML.Audio.FromAssets.forest_impulse_response { }.src;
window.VideoRenderer_particle = new HTML.Images.FromAssets.particle { }.src;
// X:\opensource\github\moving-music\js\video-renderer.js
//var cubemapurls = new[] {
// // 'posx.jpeg', 'negx.jpeg', 'posy.jpeg', 'negy.jpeg', 'posz.jpeg', 'negz.jpeg']
// new HTML.Images.FromAssets.px { }.src,
// new HTML.Images.FromAssets.nx { }.src,
// new HTML.Images.FromAssets.py { }.src,
// new HTML.Images.FromAssets.ny { }.src,
// new HTML.Images.FromAssets.pz { }.src,
// new HTML.Images.FromAssets.nz { }.src,
//};
//window.cubemapurls = cubemapurls;
new HTML.Pages.References { }.AttachToDocument();
while (window.main == null)
{
await Task.Delay(1500);
Console.WriteLine("awaiting for main()... " + new { w.ElapsedMilliseconds });
}
Console.WriteLine("awaiting for main()... " + new { window.main });
// escape statemachine stack
Native.window.requestAnimationFrame += delegate
{
//Error 1 Cannot convert anonymous method to type 'dynamic' because it is not a delegate type Z:\jsc.svn\examples\javascript\audio\synergy\MovingMusicByBorismus\Application.cs 93 68 MovingMusicByBorismus
// Choreographer.prototype.getAudioFile = function(set, basename) {
// var extension = Util.isMp3Supported() ? 'mp3' : 'ogg';
// return 'snd/' + set + '/' + basename + '.' + extension;
//};
// Largely from http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/
window.VideoRenderer.prototype.addSkybox = IFunction.OfDelegate(
new Func<object>(
() =>
{
// black screen??
//var far = 0x9999;
var far = 0x999;
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(far, 20, 20),
new THREE.MeshBasicMaterial(
new
{
//20150608_165300.jpg
//map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.stolanuten().src)
map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets._20150608_165300().src)
}
)
);
sphere.scale.x = -1;
// wont help us.
//sphere.material.opacity = 0.5;
Console.WriteLine("addSkybox... " + new { window.video.scene });
sphere.AttachTo((THREE.Scene)window.video.scene);
return null;
}
)
);
//window.Choreographer.prototype.initVocal = (Action)
//window.Choreographer.prototype.initVocal = IFunction.OfDelegate(
//window.Choreographer.prototype.initVocal = IFunction.Of(
window.Choreographer.prototype.getAudioFile = IFunction.OfDelegate(
new Func<object, string, string>(
(object set, string basename) =>
{
Console.WriteLine("window.Choreographer.prototype.getAudioFile " + new { basename });
//var russian = new MovingTrack({
// src: this.getAudioFile(set, 'Russian'),
// color: 0x19414B,
// });
// this.manager.addTrack(cats);
// view-source:54442 29925ms window.Choreographer.prototype.getAudioFile { basename = Cats }
//2015-11-16 12:25:32.573 view-source:54442 29927ms window.Choreographer.prototype.getAudioFile { basename = Nimoy }
//2015-11-16 12:25:32.575 view-source:54442 29929ms window.Choreographer.prototype.getAudioFile { basename = Roth }
//2015-11-16 12:25:32.576 view-source:54442 29930ms window.Choreographer.prototype.getAudioFile { basename = Russian }
if (basename == "Cats") return new HTML.Audio.FromAssets.Sweet_Dreams_My_Love_by_Alexander_J_Turner { }.src;
//if (basename == "Cats") return new HTML.Audio.FromAssets.loop_GallinagoDelicata { }.src;
//if (basename == "Nimoy") return new HTML.Audio.FromAssets.sand_run { }.src;
////if (basename == "Roth") return new HTML.Audio.FromAssets.snd_jeepengine_start { }.src;
//if (basename == "Roth") return new HTML.Audio.FromAssets.heartbeat3 { }.src;
if (basename == "Nimoy") return null;
if (basename == "Roth") return null;
// the green blob.
//return new HTML.Audio.FromAssets.Russian { }.src;
return new HTML.Audio.FromAssets.crickets { }.src;
// yellow is str track man
}
)
);
// X:\opensource\github\moving-music\js\audio-renderer.js
window.main();
};
// cant reset the system. need to rewrite it .
#region ondropfile
var f = await Native.document.documentElement.async.ondropfile;
IHTMLAudio a = f;
await a.async.onloadeddata;
// Uncaught TypeError: track.update is not a function
window.isLoaded = false;
Console.WriteLine(new { f.name, f.size, window.manager.trackCount, window.isLoaded });
// :4822/view-source:54442 39610ms { name = Sweet Dreams My Love by Alexander_J_Turner.mp3, size = 29790804, trackCount = 4 }
//for (int i = 0; i < window.manager.trackCount; i++)
foreach (var id in Expando.InternalGetMemberNames((object)window.manager.tracks))
{
Console.WriteLine(new { id });
//window.manager.tracs[item].setAmplitude(0);
// https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createPanner
PannerNode panner = window.audio.panners[id];
// Failed to set the 'buffer' property on 'AudioBufferSourceNode': The provided value is not of type 'AudioBuffer'.
panner.disconnect();
THREE.Object3D t = window.video.trackObjects[id];
t.parent.remove(t);
}
window.manager.trackCount = 0;
//window.manager.tracks = new { };
window.manager.tracks = new object();
// vsync
await Native.window.async.onframe;
var MovingTrack = new IFunction("url", "return new MovingTrack({ src: url, color: 0x19414B});");
dynamic track = MovingTrack.apply(null, a.src);
Console.WriteLine("addTrack");
window.manager.addTrack(track);
Console.WriteLine("loadTrack_");
window.audio.loadTrack_(track.id);
Func<bool> isready = () => window.audio.ready[track.id];
var ready = new TaskCompletionSource<object> { };
new { }.With(
async delegate
{
while (!ready.Task.IsCompleted)
{
await Task.Delay(300);
bool xready = isready();
Console.WriteLine(new { track.id, xready });
if (xready)
ready.SetResult(null);
}
}
);
await ready.Task;
Console.WriteLine("start");
window.audio.start();
window.isLoaded = true;
//view-source:54481 28681ms { id = b674a511-0580-7000-24ba-02bca7b09197, xready = true }
//2015-11-16 17:59:14.044 view-source:54481 28686ms start
//2015-11-16 17:59:14.051 view-source:54481 28693ms addPointCloud
{
Console.WriteLine("addPointCloud " + new { window.choreographer, window.isLoaded });
var t = window.video.addPointCloud(new { color = track.color });
window.video.trackObjects[track.id] = t;
}
Console.WriteLine("setMode " + new { window.choreographer.mode_ });
window.choreographer.setMode(window.choreographer.mode_);
#endregion
}
);
//
// window.addEventListener('DOMContentLoaded', main);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// if we are running in a SYSTEM account
// the chrome no-sandbox only allows software renderer
// where we get 1 frame per sec.
// on older systems we may not get GL_OES_standard_derivatives
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
// ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
// or that system is just old as hell
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
//http://thematicmapping.org/playground/webgl/earth/
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222
// Earth params
var radius = 0.5;
//var segments = 32;
var segments = 128;
var rotation = 6;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);
camera.position.z = 1.5;
var renderer = new THREE.WebGLRenderer(
new
{
preserveDrawingBuffer = true
}
);
renderer.setSize();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var parent = new THREE.Object3D();
scene.add(parent);
#region sphere
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial(
new
{
map = new THREE.Texture().With(
async s =>
{
//0:75ms event: _2_no_clouds_4k_low view-source:36543
//Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
//Application Cache Progress event (2 of 2) 192.168.1.72/:1
//Application Cache Cached event 192.168.1.72/:1
//1:1018ms event: _2_no_clouds_4k_low done view-source:36543
//1:1019ms event: _2_no_clouds_4k view-source:36543
//event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
//1:16445ms event: _2_no_clouds_4k done
// ~ tilde to open css editor?
Console.WriteLine("event: _2_no_clouds_4k_low");
s.image = await new _2_no_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k_low done");
await 20000;
Console.WriteLine("event: _2_no_clouds_4k");
s.image = await new _2_no_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k done");
}
),
bumpMap = THREE.ImageUtils.loadTexture(
new elev_bump_4k().src
//new elev_bump_4k_low().src
),
// applies onyl to shaders to create the shadow
bumpScale = 0.001,
specularMap = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: water_4k_low");
s.image = await new water_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: water_4k_low done");
await 20000;
Console.WriteLine("event: water_4k");
s.image = await new water_4k();
s.needsUpdate = true;
Console.WriteLine("event: water_4k done");
}
),
//specular = new THREE.Color("grey")
specular = new THREE.Color(0xa0a0a0)
})
);
#endregion
// http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane
//sphere.rotation.y = rotation;
parent.rotation.y = rotation;
//sphere.position.x = 10;
//sphere.position.y = 10;
//sphere.position.z = 10;
//sphere.position.normalize();
//sphere.position.multiplyScalar(200);
parent.add(sphere);
//scene.add(sphere);
#region clouds
var clouds = new THREE.Mesh(
new THREE.SphereGeometry(
//radius + 0.003,
radius + 0.006,
segments, segments),
new THREE.MeshPhongMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(
// //new fair_clouds_4k().src
// new fair_clouds_4k_low().src
// ),
map = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: fair_clouds_4k_low");
s.image = await new fair_clouds_4k_low();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k_low done");
await 20000;
Console.WriteLine("event: fair_clouds_4k");
s.image = await new fair_clouds_4k();
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k done");
}
),
transparent = true
})
);
//clouds.rotation.y = rotation;
parent.add(clouds);
//scene.add(clouds);
#endregion
#region Location on sphere
Action AddCities = async delegate
{
var table = await this.GetAllCities();
Console.WriteLine(table.Rows.Count.ToString());
for (var r = 0; r < table.Rows.Count; r++)
{
var latitude = (double)table.Rows[r]["Latitude"];
var longtitude = (double)table.Rows[r]["Longtitude"];
addLocation(latitude, longtitude, radius, 0.001, parent, 6);
Console.WriteLine(latitude.ToString());
await 100;
}
};
AddCities();
#endregion
var stars = new THREE.Mesh(
new THREE.SphereGeometry(90, 64, 64),
new THREE.MeshBasicMaterial(
new
{
map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
side = THREE.BackSide
})
);
scene.add(stars);
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
// jsc, what pointers do we have in store?
this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;
var
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// //sphere.rotation.x,
// //sphere.rotation.y
//},
//clouds = new
//{
// //clouds.rotation.x,
// //clouds.rotation.y,
//},
CursorX = 0,
CursorY = 0
};
#region onmousedown
this.canvas.onmousedown +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
this.canvas.requestFullscreen();
this.canvas.requestPointerLock();
}
else
{
// movementX no longer works
old = new
{
parent = new
{
parent.rotation.x,
parent.rotation.y
},
//sphere = new
//{
// sphere.rotation.x,
// sphere.rotation.y
//},
//clouds = new
//{
// clouds.rotation.x,
// clouds.rotation.y,
//},
e.CursorX,
e.CursorY
};
if (pointerLock)
{
// skip
}
else
{
e.CaptureMouse();
}
}
};
#endregion
var z = camera.position.z;
var sfx = new WebGLEarthTest.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
{
autobuffer = true,
// this aint working
//loop = true
};
sfx.play();
//sfx.AttachToHead();
// http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/
this.canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 0.1 * e.WheelDirection;
z = z.Max(0.6).Min(4.5);
//Native.document.title = new { camera.position.z }.ToString();
};
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
this.canvas.onmousemove +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
if (pointerLock)
{
parent.rotation.x += 0.01 * e.movementY;
parent.rotation.y += 0.01 * e.movementX;
//sphere.rotation.x += 0.01 * e.movementY;
//sphere.rotation.y += 0.01 * e.movementX;
//clouds.rotation.x += 0.01 * e.movementY;
//clouds.rotation.y += 0.01 * e.movementX;
}
else
{
parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY);
parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX);
//sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
//sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);
//clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
//clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
}
// Native.document.title = new { e.movementX, e.movementY }.ToString();
}
};
#endregion
// could we
Native.window.onframe +=
e =>
{
if (this.canvas.parentNode == null)
return;
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
parent.rotation.y += speed;
renderer.render(scene, camera);
};
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
renderer.setSize();
};
//new IStyle(this.canvas.css.before)
//{
// content = "'do a middle click to maximize the earth dashboard'",
// left = "1em",
// bottom = "1em",
// color = "white",
// position = IStyle.PositionEnum.absolute
//};
}
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(IDefault page = null)
{
// used by
// X:\jsc.svn\examples\javascript\WebGL\WebGLGoldDropletTransactions\WebGLGoldDropletTransactions\Application.cs
if (DisableBackground)
{
// nop
}
else
{
//page.body.style.backgroundColor = "#4584b4";
container.style.backgroundColor = "#4584b4";
}
// Bg gradient
//var canvas = new IHTMLCanvas();
//canvas.width = 32;
//canvas.height = Native.Window.Height;
//var context = (CanvasRenderingContext2D)canvas.getContext("2d");
//var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
//gradient.addColorStop(0f, "#1e4877");
//gradient.addColorStop(0.5f, "#4584b4");
//context.fillStyle = gradient;
//context.fillRect(0, 0, canvas.width, canvas.height);
// Clouds
//var , , renderer, sky, mesh, , material,
//, h, color, colors = [], sprite, size, x, y, z;
var mouseX = 0f;
var start_time = new IDate().getTime();
Console.WriteLine(new { Native.window.Width, Native.window.Height });
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
Console.WriteLine(new { DefaultMouseY });
var mouseY = (float)((Native.window.Height * DefaultMouseY - windowHalfY) * 0.15);
//Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
if (page == null)
{
container.AttachToDocument();
}
else
{
container.AttachTo(page.body);
}
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
//container.style.background = "url(" + canvas.toDataURL("image/png") + ")";
#region Dispose
var IsDisposed = false;
Dispose = delegate
{
if (IsDisposed)
return;
IsDisposed = true;
container.Orphanize();
};
#endregion
var camera = new THREE.PerspectiveCamera(30, Native.window.aspect, 1, 3000);
camera.position.z = 6000;
var scene = new THREE.Scene();
var geometry = new THREE.Geometry();
//var texture = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.cloud10().src);
var texture = THREE.ImageUtils.loadTexture(CloudTexture);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
// FogColor
//var fog = new THREE.Fog(0x4584b4, -100, 3000);
var fog = new THREE.Fog(FogColor, -100, 3000);
// what about sprites?
var material = new THREE.ShaderMaterial(
new
{
uniforms = new
{
map = new { type = "t", value = texture },
fogColor = new { type = "c", value = fog.color },
fogNear = new { type = "f", value = fog.near },
fogFar = new { type = "f", value = fog.far },
},
vertexShader = new GeometryVertexShader().ToString(),
fragmentShader = new GeometryFragmentShader().ToString(),
depthWrite = false,
depthTest = false,
transparent = true
}
);
var r = new Random();
Func<float> Math_random = () => (float)r.NextDouble();
var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
for (var i = 0; i < 8000; i++)
{
plane.position.x = Math_random() * 1000 - 500;
plane.position.y = -Math_random() * Math_random() * 200 - 15;
plane.position.z = i;
plane.rotation.z = (f)(Math_random() * Math.PI);
plane.scale.x = Math_random() * Math_random() * 1.5f + 0.5f;
plane.scale.y = plane.scale.x;
THREE.GeometryUtils.merge(geometry, plane);
}
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -8000;
scene.add(mesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
container.appendChild(renderer.domElement);
container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
#region onresize
Native.window.onresize +=
delegate
{
container.style.SetSize(Native.window.Width, Native.window.Height);
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
#endregion
#region animate
Native.window.onframe += delegate
{
if (IsDisposed)
return;
var position = ((new IDate().getTime() - start_time) * 0.03) % 8000;
camera.position.x += (float)((mouseX - camera.position.x) * 0.01);
camera.position.y += (float)((-mouseY - camera.position.y) * 0.01);
camera.position.z = (f)(-position + 8000);
renderer.render(scene, camera);
};
#endregion
Native.document.onmousemove +=
e =>
{
mouseX = (float)((e.CursorX - windowHalfX) * 0.25);
mouseY = (float)((e.CursorY - windowHalfY) * 0.15);
};
//var ze = new ZeProperties();
//ze.Show();
//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)
{
// http://www.doingbusiness.org/data/exploreeconomies/puerto-rico/starting-a-business
// http://www.doingbusiness.org/data/exploretopics/starting-a-business
// X:\jsc.svn\examples\javascript\svg\DEAGELForecast\DEAGELForecast\Application.cs
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201410/20141028
// http://www.thecommonsenseshow.com/2014/10/23/the-target-date-for-americas-depopulation-has-been-set/
// would ScriptCoreLib be able to
// play navigator if we also
// have the role of AppWindow or Android Widget Service?
// if we are running in a SYSTEM account
// the chrome no-sandbox only allows software renderer
// where we get 1 frame per sec.
// on older systems we may not get GL_OES_standard_derivatives
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
// ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
// or that system is just old as hell
// http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
//http://thematicmapping.org/playground/webgl/earth/
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222
// Earth params
var radius = 0.5;
//var segments = 32;
var segments = 128;
var rotation = 6;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);
camera.position.z = 1.5;
var renderer = new THREE.WebGLRenderer(
new
{
// http://stackoverflow.com/questions/20495302/transparent-background-with-three-js
alpha = true,
preserveDrawingBuffer = true
}
);
renderer.setSize();
//renderer.setClearColor(
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
#region sphere
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial(
new
{
map = new THREE.Texture().With(
async s =>
{
//0:75ms event: _2_no_clouds_4k_low view-source:36543
//Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
//Application Cache Progress event (2 of 2) 192.168.1.72/:1
//Application Cache Cached event 192.168.1.72/:1
//1:1018ms event: _2_no_clouds_4k_low done view-source:36543
//1:1019ms event: _2_no_clouds_4k view-source:36543
//event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
//1:16445ms event: _2_no_clouds_4k done
// ~ tilde to open css editor?
Console.WriteLine("event: _2_no_clouds_4k_low");
//s.image = await new _2_no_clouds_4k_low();
s.image = await new _2_no_clouds_DEAGEL_4k_low().async.oncomplete;
// http://www.deagel.com/
//s.image = await new _2_no_clouds_DEAGEL_CIMSS_4k_low();
//s.image = new _2_no_clouds_4k_low();
//await s.image;
s.needsUpdate = true;
Console.WriteLine("event: _2_no_clouds_4k_low done");
//await 20000;
//Console.WriteLine("event: _2_no_clouds_4k");
s.image = await new _2_no_clouds_4k();
s.needsUpdate = true;
//Console.WriteLine("event: _2_no_clouds_4k done");
}
),
bumpMap = THREE.ImageUtils.loadTexture(
new elev_bump_4k().src
//new elev_bump_4k_low().src
),
// applies onyl to shaders to create the shadow
bumpScale = 0.005,
specularMap = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: water_4k_low");
s.image = await new water_4k_low().async.oncomplete;
s.needsUpdate = true;
Console.WriteLine("event: water_4k_low done");
await Task.Delay(20000);
Console.WriteLine("event: water_4k");
s.image = await new water_4k().async.oncomplete;
s.needsUpdate = true;
Console.WriteLine("event: water_4k done");
}
),
//specular = new THREE.Color("grey")
specular = new THREE.Color(0xa0a0a0)
})
);
#endregion
// http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane
sphere.rotation.y = rotation;
scene.add(sphere);
#region clouds
var clouds = new THREE.Mesh(
new THREE.SphereGeometry(
//radius + 0.003,
radius + 0.006,
segments, segments),
new THREE.MeshPhongMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(
// //new fair_clouds_4k().src
// new fair_clouds_4k_low().src
// ),
map = new THREE.Texture().With(
async s =>
{
Console.WriteLine("event: fair_clouds_4k_low");
s.image = await new fair_clouds_4k_low().async.oncomplete;
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k_low done");
await Task.Delay(20000);
Console.WriteLine("event: fair_clouds_4k");
s.image = await new fair_clouds_4k().async.oncomplete;
s.needsUpdate = true;
Console.WriteLine("event: fair_clouds_4k done");
}
),
transparent = true
})
);
clouds.rotation.y = rotation;
scene.add(clouds);
#endregion
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs
// X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs
// hidden for alpha AppWindows
//#if FBACKGROUND
#region galaxy_starfield
new THREE.Texture().With(
async s =>
{
var i = new HTML.Images.FromAssets.galaxy_starfield();
var bytes = await i.async.bytes;
for (int ii = 0; ii < bytes.Length; ii += 4)
{
bytes[ii + 3] = (byte)(bytes[ii + 0]);
bytes[ii + 0] = 0xff;
bytes[ii + 1] = 0xff;
bytes[ii + 2] = 0xff;
}
var c = new CanvasRenderingContext2D(i.width, i.height);
c.bytes = bytes;
s.image = c;
s.needsUpdate = true;
var stars_material = new THREE.MeshBasicMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
map = s,
side = THREE.BackSide,
transparent = true
});
var stars = new THREE.Mesh(
new THREE.SphereGeometry(90, 64, 64),
stars_material
);
// http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity
//(stars_material as dynamic).opacity = 0.5;
scene.add(stars);
}
);
#endregion
//#endif
//var controls = new THREE.TrackballControls(camera);
//Native.document.body.style.margin = "0";
//Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
this.canvas = (IHTMLCanvas)renderer.domElement;
//renderer.domElement.AttachToDocument();
this.canvas.AttachToDocument();
this.canvas.style.SetLocation(0, 0);
// jsc, what pointers do we have in store?
this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;
var
old = new
{
sphere = new
{
sphere.rotation.x,
sphere.rotation.y
},
clouds = new
{
clouds.rotation.x,
clouds.rotation.y,
},
CursorX = 0,
CursorY = 0
};
var z = camera.position.z;
#region sfx
var sfx = new WebGLEarthByBjorn.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
{
autobuffer = true,
// this aint working
//loop = true
};
sfx.play();
#endregion
//sfx.AttachToHead();
// http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/
#region onmousewheel
this.canvas.onmousewheel +=
e =>
{
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
z -= 0.1 * e.WheelDirection;
z = z.Max(0.6).Min(4.5);
//Native.document.title = new { camera.position.z }.ToString();
};
#endregion
#region onmousedown
this.canvas.onmousedown +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
// F11 ?
//this.canvas.requestFullscreen();
this.canvas.requestPointerLock();
}
else
{
// movementX no longer works
old = new
{
sphere = new
{
sphere.rotation.x,
sphere.rotation.y
},
clouds = new
{
clouds.rotation.x,
clouds.rotation.y,
},
e.CursorX,
e.CursorY
};
if (pointerLock)
{
// skip
}
else
{
e.CaptureMouse();
}
}
};
#endregion
canvas.css.active.style.cursor = IStyle.CursorEnum.move;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
this.canvas.onmousemove +=
e =>
{
var pointerLock = this.canvas == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
if (pointerLock)
{
sphere.rotation.x += 0.01 * e.movementY;
sphere.rotation.y += 0.01 * e.movementX;
clouds.rotation.x += 0.01 * e.movementY;
clouds.rotation.y += 0.01 * e.movementX;
}
else
{
sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);
clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
}
// Native.document.title = new { e.movementX, e.movementY }.ToString();
}
};
#endregion
// could we
#region onframe
Native.window.onframe +=
e =>
{
if (this.canvas.parentNode == null)
return;
camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
camera.updateProjectionMatrix();
camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;
// autorotation should pause while under mouse drag?
// the larger the vew the slower the rotation shall be
var speed = 0.0001 * e.delay.ElapsedMilliseconds +
0.007
* 96.0 / canvas.clientHeight
* 1.0 / camera.position.z;
//Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
//Native.document.title = new { speed }.ToString();
//controls.update();
sphere.rotation.y += speed;
clouds.rotation.y += speed;
renderer.render(scene, camera);
};
#endregion
Native.window.onresize +=
delegate
{
//if (canvas.parentNode == Native.document.body)
// are we embedded?
if (page != null)
renderer.setSize();
};
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
////ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
//new IStyle(this.canvas.css.before)
//{
// content = "'do a middle click to maximize the earth dashboard'",
// left = "1em",
// bottom = "1em",
// color = "white",
// position = IStyle.PositionEnum.absolute
//};
}