/// <summary> /// Constructor /// </summary> /// <param name="renderer"></param> /// <param name="renderTarget"></param> private void Initialize(WebGLRenderer renderer, WebGLRenderTarget renderTarget) { Debug.Assert(null != renderer); Debug.Assert(null != renderTarget); this._renderer = renderer; this.renderTarget1 = renderTarget; this.renderTarget2 = (WebGLRenderTarget)renderTarget.Clone(); this.writeBuffer = this.renderTarget1; this.readBuffer = this.renderTarget2; this.passes = new List <IPass>(); //if ( THREE.CopyShader == null ) // Trace.TraceError( "THREE.EffectComposer relies on THREE.CopyShader" ); this.copyPass = new ShaderPass(new CopyShader()); }
// inspired by http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html // http://alteredqualia.com/three/examples/webgl_morphtargets_md2_control.html // Invalid version number in manifest: 40. Please make sure the newly uploaded package has a larger version in file manifest.json than the published package: 40. public Application(IDefault page = null) { // http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/ // vr view, isometric view // http://skycraft.io/ // http://www.mark-lundin.com/box/inception/ // running as android tab // I / chromium(25513): [INFO: CONSOLE(88580)] "THREE.WebGLRenderer", source: http://192.168.43.7:25796/view-source (88580) //I/chromium(25513): [INFO: CONSOLE(88791)] "Error creating WebGL context.", source: http://192.168.43.7:25796/view-source (88791) //I/chromium(25513): [INFO: CONSOLE(88795)] "Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null", source: http://192.168.43.7:25796/view-source (88795) // X:\opensource\github\three.js // WEBGL_compressed_texture_pvrtc extension not supported. // http://stackoverflow.com/questions/21673278/three-js-error-when-applying-texture #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; // I/chromium(18051): [INFO:CONSOLE(36608)] "Uncaught TypeError: Cannot read property 'socket' of undefined", source: http://192.168.43.7:24445/view-source (36608) if ((object)self_chrome != null) { object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // could we change the color of the window? // https://developer.chrome.com/apps/manifest/icons chrome.Notification.DefaultIconUrl = new WebGLHZBlendCharacter.HTML.Images.FromAssets.x128().src; Console.WriteLine("invoke TheServerWithAppWindow.Invoke"); ChromeTCPServer.TheServerWithAppWindow.Invoke(WebGLTiltShift.HTML.Pages.DefaultSource.Text); return; } } #endregion Native.document.body.style.margin = "0px"; Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; Native.document.body.Clear(); // I / chromium(7069): [INFO: CONSOLE(91150)] "THREE.WebGLRenderer", source: http://192.168.1.212:24430/view-source (91150) //I/chromium( 7069): [INFO: CONSOLE(91361)] "Error creating WebGL context.", source: http://192.168.1.212:24430/view-source (91361) #region svg cursor new IXMLHttpRequest(ScriptCoreLib.Shared.HTTPMethodEnum.GET, new HeatZeekerRTS.HTML.Images.FromAssets.MyCursor().src, r => { // public static XElement AsXElement(this IElement e); var svg = (ISVGSVGElement)(IElement)(r.responseXML.documentElement); var cursor1 = svg.AsXElement(); cursor1 .Elements("g") .Elements("path") .Where(x => x.Attribute("id").Value == "path2985") .WithEach( path => path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#ffff00;", "fill:#00ff00;") ); cursor1 .Elements("g") .Elements("path") .Where(x => x.Attribute("id").Value == "path2985-1") .WithEach( path => path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#d9d900;", "fill:#00df00;") ); //.AttachToDocument(); Native.css.style.cursorImage = svg; // this wont work no more? new IStyle(Native.css[IHTMLElement.HTMLElementEnum.div].hover) { // last change was abut adding pointer // jsc jit could atleast let us know how it looks like //cursor = IStyle.CursorEnum.pointer //cursorImage = new MyCursor() }; //Native.document.documentElement.style.cursorImage = svg; //Native.document.documentElement.style.cursorImage = cursor1; //Native.document.documentElement.style.cursorElement = cursor1; //Native.document.documentElement.style.cursorElement = cursor1.AsHTMLElement(); //public static IHTMLElement AttachToDocument(this XElement e); //.AttachToHead(); } ); #endregion //#region playmusic //new { }.With( // async delegate // { // do // { // var music = new HeatZeekerRTS.HTML.Audio.FromAssets.crickets // { // volume = 0.1 // //loop = true, // //controls = true // }.AttachToHead(); // music.play(); // await music.async.onended; // music.Orphanize(); // } // while (true); // } //); //#endregion double SCREEN_WIDTH = Native.window.Width; double SCREEN_HEIGHT = Native.window.Height; 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 scene = new THREE.Scene(); 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); 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)); new THREE.AmbientLight(0x101030).AttachTo(scene); //var light = new THREE.DirectionalLight(0xffffff, 1.0); #region light var light = new THREE.DirectionalLight(0xffffff, 1.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(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; #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); #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 } #endregion // "X:\opensource\github\three.js\examples\js\shaders\VerticalTiltShiftShader.js" // http://stackoverflow.com/questions/20899326/how-do-i-stop-effectcomposer-from-destroying-my-transparent-background 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 #region WebGLRah66Comanche // why isnt it being found? 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 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 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 #region YomotsuTPS var material = new THREE.MeshPhongMaterial( new { map = THREE.ImageUtils.loadTexture( new WebGLYomotsuTPS.HTML.Images.FromAssets._1().src ), ambient = 0x999999, color = 0xffffff, specular = 0xffffff, shininess = 25, morphTargets = true } ); var loader = new THREE.JSONLoader(); // Severity Code Description Project File Line //Error CS0122 'Application.md2frames' is inaccessible due to its protection level WebGLTiltShift X:\jsc.svn\examples\javascript\WebGL\WebGLTiltShift\WebGLTiltShift\Application.cs 661 // wtf? var md2frames = new WebGLYomotsuTPS.Application.md2frames(); var moveState_moving = false; var moveState_front = false; var moveState_Backwards = false; var moveState_left = false; var moveState_right = false; var moveState_speed = 4.0; var moveState_angle = 0.0; var player_motion = default(WebGLYomotsuTPS.Application.motion); loader.load( new global::WebGLYomotsuTPS.Design.droid().Content.src, IFunction.OfDelegate( new Action<object>( xgeometry => { var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material); // raise it up md2meshBody.position.y = 100; md2meshBody.rotation.y = (float)(-Math.PI / 2); //md2meshBody.scale.set(.02, .02, .02); md2meshBody.scale.set(4, 4, 4); md2meshBody.castShadow = true; //md2meshBody.receiveShadow = false; #region player_motion Action<WebGLYomotsuTPS.Application.motion> player_changeMotion = motion => { //Console.WriteLine( // new { motion, md2frames.run, md2frames.stand }); player_motion = motion; // player.state = md2frames[motion][3].state; var animMin = motion.min; var animMax = motion.max; var animFps = motion.fps; md2meshBody.time = 0; md2meshBody.duration = (int)( 1000 * ((animMax - animMin) / (double)animFps) ); Native.document.title = new { animMin, animMax }.ToString(); md2meshBody.setFrameRange(animMin, animMax); }; player_changeMotion(md2frames.stand); #endregion #region move Action move = delegate { // if(player.model.motion !== 'run' && player.model.state === 'stand'){ // changeMotion('run'); //} //if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){ // changeMotion('crwalk'); //} var speed = moveState_speed; //if(player.model.state === 'crstand'){speed *= .5;} //if(player.model.state === 'freeze') {speed *= 0;} var direction = moveState_angle; if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right) { direction += 0; } if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 45; } if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 90; } if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right) { direction += 135; } if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right) { direction += 180; } if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right) { direction += 225; } if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 270; } if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 315; } md2meshBody.rotation.y = (float)((direction - 90) * Math.PI / 180); md2meshBody.position.x -= (float)(Math.Sin(direction * Math.PI / 180.0) * speed * 10); md2meshBody.position.z -= (float)(Math.Cos(direction * Math.PI / 180.0) * speed * 10); }; #endregion //scene.add(player_model_objects); //player_model_objects.add(md2meshBody); scene.add(md2meshBody); #region onkeydown Native.document.onkeydown += e => { if (e.KeyCode == 67) { if (player_motion == md2frames.stand) player_changeMotion(md2frames.crstand); else if (player_motion == md2frames.crstand) player_changeMotion(md2frames.stand); } else if (e.KeyCode == 87) { moveState_front = true; moveState_Backwards = false; } else if (e.KeyCode == 83) { moveState_front = false; moveState_Backwards = true; } else if (e.KeyCode == 65) { moveState_left = true; moveState_right = false; } else if (e.KeyCode == 68) { moveState_left = false; moveState_right = true; } var isStand = player_motion == md2frames.stand; Console.WriteLine( new { e.KeyCode, moveState_front, moveState_Backwards, isStand } ); if (moveState_front || moveState_Backwards || moveState_left || moveState_right) if (player_motion == md2frames.stand) player_changeMotion(md2frames.run); else if (player_motion == md2frames.crstand) player_changeMotion(md2frames.crwalk); }; #endregion #region onkeyup Native.document.onkeyup += e => { if (e.KeyCode == 87) { moveState_front = false; } else if (e.KeyCode == 83) { moveState_Backwards = false; } else if (e.KeyCode == 65) { moveState_left = false; } else if (e.KeyCode == 68) { moveState_right = false; } }; #endregion #region loop var yclock = Stopwatch.StartNew(); Native.window.onframe += delegate { if (moveState_front || moveState_Backwards || moveState_left || moveState_right) { move(); } else if (player_motion == md2frames.run) player_changeMotion(md2frames.stand); else if (player_motion == md2frames.crwalk) player_changeMotion(md2frames.crstand); //player_model_objects.position.x = player_position_x; //player_model_objects.position.y = player_position_y; //player_model_objects.position.z = player_position_z; #region model animation var delta = yclock.ElapsedMilliseconds * 0.001; yclock.Restart(); var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe); var isAction = player_motion.action; var x = (isAction && !isEndFleame); if (!isAction || x) { md2meshBody.updateAnimation(1000 * delta); } else if (player_motion.state == "freeze") { //dead... } else { player_changeMotion(player_motion); } #endregion //renderer.render(scene, camera); }; #endregion } ))); #endregion #region virtual webview.requestFullscreen Console.WriteLine("? awaiting to go fullscreen"); Action requestFullscreen = Native.document.body.requestFullscreen; // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs // webview virtual dispatch Native.window.onmessage += e => { //await contentWindow.postMessageAsync("virtual webview.requestFullscreen"); // X:\jsc.svn\examples\javascript\chrome\apps\ChromeWebviewFullscreen\ChromeWebviewFullscreen\Application.cs if (e.data == "virtual webview.requestFullscreen") { requestFullscreen = delegate { Console.WriteLine("requestFullscreen"); //e.ports. //e.ports.WithEach e.postMessage("requestFullscreen"); }; return; } // ??? Native.document.body.innerText = new { e.data }.ToString(); //await contentWindow.postMessageAsync("virtual webview.requestFullscreen"); }; #endregion #region onkeyup Native.document.onkeyup += e => { if (e.KeyCode == (int)System.Windows.Forms.Keys.F) { requestFullscreen(); } }; #endregion var controls = new THREE.OrbitControls(camera); Native.window.onframe += delegate { ////var delta = clock.getDelta(); 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); } controls.update(); camera.position = controls.center.clone(); composer.render(0.1); }; #region onresize new { }.With( async delegate { //while (true) do { // wont really work yet? renderer.setSize(Native.window.Width, Native.window.Height); renderTarget.setSize(Native.window.Width, Native.window.Height); composer.setSize(Native.window.Width, Native.window.Height); (hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; (vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); #endregion var ze = new ZeProperties(); ze.Show(); ze.treeView1.Nodes.Clear(); ze.Add(() => renderer); ze.Add(() => controls); ze.Add(() => scene); ze.Left = 0; }
// inspired by http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html // http://alteredqualia.com/three/examples/webgl_morphtargets_md2_control.html // Invalid version number in manifest: 40. Please make sure the newly uploaded package has a larger version in file manifest.json than the published package: 40. public Application(IDefault page = null) { // http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/ // vr view, isometric view // http://skycraft.io/ // http://www.mark-lundin.com/box/inception/ // running as android tab // I / chromium(25513): [INFO: CONSOLE(88580)] "THREE.WebGLRenderer", source: http://192.168.43.7:25796/view-source (88580) //I/chromium(25513): [INFO: CONSOLE(88791)] "Error creating WebGL context.", source: http://192.168.43.7:25796/view-source (88791) //I/chromium(25513): [INFO: CONSOLE(88795)] "Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null", source: http://192.168.43.7:25796/view-source (88795) // X:\opensource\github\three.js // WEBGL_compressed_texture_pvrtc extension not supported. // http://stackoverflow.com/questions/21673278/three-js-error-when-applying-texture #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; // I/chromium(18051): [INFO:CONSOLE(36608)] "Uncaught TypeError: Cannot read property 'socket' of undefined", source: http://192.168.43.7:24445/view-source (36608) if ((object)self_chrome != null) { object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // could we change the color of the window? // https://developer.chrome.com/apps/manifest/icons chrome.Notification.DefaultIconUrl = new WebGLHZBlendCharacter.HTML.Images.FromAssets.x128().src; Console.WriteLine("invoke TheServerWithAppWindow.Invoke"); ChromeTCPServer.TheServerWithAppWindow.Invoke(WebGLTiltShift.HTML.Pages.DefaultSource.Text); return; } } #endregion Native.document.body.style.margin = "0px"; Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; Native.document.body.Clear(); // I / chromium(7069): [INFO: CONSOLE(91150)] "THREE.WebGLRenderer", source: http://192.168.1.212:24430/view-source (91150) //I/chromium( 7069): [INFO: CONSOLE(91361)] "Error creating WebGL context.", source: http://192.168.1.212:24430/view-source (91361) #region svg cursor new IXMLHttpRequest(ScriptCoreLib.Shared.HTTPMethodEnum.GET, new HeatZeekerRTS.HTML.Images.FromAssets.MyCursor().src, r => { // public static XElement AsXElement(this IElement e); var svg = (ISVGSVGElement)(IElement)(r.responseXML.documentElement); var cursor1 = svg.AsXElement(); cursor1 .Elements("g") .Elements("path") .Where(x => x.Attribute("id").Value == "path2985") .WithEach( path => path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#ffff00;", "fill:#00ff00;") ); cursor1 .Elements("g") .Elements("path") .Where(x => x.Attribute("id").Value == "path2985-1") .WithEach( path => path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#d9d900;", "fill:#00df00;") ); //.AttachToDocument(); Native.css.style.cursorImage = svg; // this wont work no more? new IStyle(Native.css[IHTMLElement.HTMLElementEnum.div].hover) { // last change was abut adding pointer // jsc jit could atleast let us know how it looks like //cursor = IStyle.CursorEnum.pointer //cursorImage = new MyCursor() }; //Native.document.documentElement.style.cursorImage = svg; //Native.document.documentElement.style.cursorImage = cursor1; //Native.document.documentElement.style.cursorElement = cursor1; //Native.document.documentElement.style.cursorElement = cursor1.AsHTMLElement(); //public static IHTMLElement AttachToDocument(this XElement e); //.AttachToHead(); } ); #endregion //#region playmusic //new { }.With( // async delegate // { // do // { // var music = new HeatZeekerRTS.HTML.Audio.FromAssets.crickets // { // volume = 0.1 // //loop = true, // //controls = true // }.AttachToHead(); // music.play(); // await music.async.onended; // music.Orphanize(); // } // while (true); // } //); //#endregion double SCREEN_WIDTH = Native.window.Width; double SCREEN_HEIGHT = Native.window.Height; 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 scene = new THREE.Scene(); 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); 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)); new THREE.AmbientLight(0x101030).AttachTo(scene); //var light = new THREE.DirectionalLight(0xffffff, 1.0); #region light var light = new THREE.DirectionalLight(0xffffff, 1.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(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; #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); #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 } #endregion // "X:\opensource\github\three.js\examples\js\shaders\VerticalTiltShiftShader.js" // http://stackoverflow.com/questions/20899326/how-do-i-stop-effectcomposer-from-destroying-my-transparent-background 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 #region WebGLRah66Comanche // why isnt it being found? 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 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 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 #region YomotsuTPS var material = new THREE.MeshPhongMaterial( new { map = THREE.ImageUtils.loadTexture( new WebGLYomotsuTPS.HTML.Images.FromAssets._1().src ), ambient = 0x999999, color = 0xffffff, specular = 0xffffff, shininess = 25, morphTargets = true } ); var loader = new THREE.JSONLoader(); // Severity Code Description Project File Line //Error CS0122 'Application.md2frames' is inaccessible due to its protection level WebGLTiltShift X:\jsc.svn\examples\javascript\WebGL\WebGLTiltShift\WebGLTiltShift\Application.cs 661 // wtf? var md2frames = new WebGLYomotsuTPS.Application.md2frames(); var moveState_moving = false; var moveState_front = false; var moveState_Backwards = false; var moveState_left = false; var moveState_right = false; var moveState_speed = 4.0; var moveState_angle = 0.0; var player_motion = default(WebGLYomotsuTPS.Application.motion); loader.load( new global::WebGLYomotsuTPS.Design.droid().Content.src, IFunction.OfDelegate( new Action <object>( xgeometry => { var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material); // raise it up md2meshBody.position.y = 100; md2meshBody.rotation.y = (float)(-Math.PI / 2); //md2meshBody.scale.set(.02, .02, .02); md2meshBody.scale.set(4, 4, 4); md2meshBody.castShadow = true; //md2meshBody.receiveShadow = false; #region player_motion Action <WebGLYomotsuTPS.Application.motion> player_changeMotion = motion => { //Console.WriteLine( // new { motion, md2frames.run, md2frames.stand }); player_motion = motion; // player.state = md2frames[motion][3].state; var animMin = motion.min; var animMax = motion.max; var animFps = motion.fps; md2meshBody.time = 0; md2meshBody.duration = (int)( 1000 * ((animMax - animMin) / (double)animFps) ); Native.document.title = new { animMin, animMax }.ToString(); md2meshBody.setFrameRange(animMin, animMax); }; player_changeMotion(md2frames.stand); #endregion #region move Action move = delegate { // if(player.model.motion !== 'run' && player.model.state === 'stand'){ // changeMotion('run'); //} //if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){ // changeMotion('crwalk'); //} var speed = moveState_speed; //if(player.model.state === 'crstand'){speed *= .5;} //if(player.model.state === 'freeze') {speed *= 0;} var direction = moveState_angle; if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right) { direction += 0; } if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 45; } if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 90; } if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right) { direction += 135; } if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right) { direction += 180; } if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right) { direction += 225; } if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 270; } if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 315; } md2meshBody.rotation.y = (float)((direction - 90) * Math.PI / 180); md2meshBody.position.x -= (float)(Math.Sin(direction * Math.PI / 180.0) * speed * 10); md2meshBody.position.z -= (float)(Math.Cos(direction * Math.PI / 180.0) * speed * 10); }; #endregion //scene.add(player_model_objects); //player_model_objects.add(md2meshBody); scene.add(md2meshBody); #region onkeydown Native.document.onkeydown += e => { if (e.KeyCode == 67) { if (player_motion == md2frames.stand) { player_changeMotion(md2frames.crstand); } else if (player_motion == md2frames.crstand) { player_changeMotion(md2frames.stand); } } else if (e.KeyCode == 87) { moveState_front = true; moveState_Backwards = false; } else if (e.KeyCode == 83) { moveState_front = false; moveState_Backwards = true; } else if (e.KeyCode == 65) { moveState_left = true; moveState_right = false; } else if (e.KeyCode == 68) { moveState_left = false; moveState_right = true; } var isStand = player_motion == md2frames.stand; Console.WriteLine( new { e.KeyCode, moveState_front, moveState_Backwards, isStand } ); if (moveState_front || moveState_Backwards || moveState_left || moveState_right) { if (player_motion == md2frames.stand) { player_changeMotion(md2frames.run); } else if (player_motion == md2frames.crstand) { player_changeMotion(md2frames.crwalk); } } }; #endregion #region onkeyup Native.document.onkeyup += e => { if (e.KeyCode == 87) { moveState_front = false; } else if (e.KeyCode == 83) { moveState_Backwards = false; } else if (e.KeyCode == 65) { moveState_left = false; } else if (e.KeyCode == 68) { moveState_right = false; } }; #endregion #region loop var yclock = Stopwatch.StartNew(); Native.window.onframe += delegate { if (moveState_front || moveState_Backwards || moveState_left || moveState_right) { move(); } else if (player_motion == md2frames.run) { player_changeMotion(md2frames.stand); } else if (player_motion == md2frames.crwalk) { player_changeMotion(md2frames.crstand); } //player_model_objects.position.x = player_position_x; //player_model_objects.position.y = player_position_y; //player_model_objects.position.z = player_position_z; #region model animation var delta = yclock.ElapsedMilliseconds * 0.001; yclock.Restart(); var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe); var isAction = player_motion.action; var x = (isAction && !isEndFleame); if (!isAction || x) { md2meshBody.updateAnimation(1000 * delta); } else if (player_motion.state == "freeze") { //dead... } else { player_changeMotion(player_motion); } #endregion //renderer.render(scene, camera); }; #endregion } ))); #endregion #region virtual webview.requestFullscreen Console.WriteLine("? awaiting to go fullscreen"); Action requestFullscreen = Native.document.body.requestFullscreen; // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs // webview virtual dispatch Native.window.onmessage += e => { //await contentWindow.postMessageAsync("virtual webview.requestFullscreen"); // X:\jsc.svn\examples\javascript\chrome\apps\ChromeWebviewFullscreen\ChromeWebviewFullscreen\Application.cs if (e.data == "virtual webview.requestFullscreen") { requestFullscreen = delegate { Console.WriteLine("requestFullscreen"); //e.ports. //e.ports.WithEach e.postMessage("requestFullscreen"); }; return; } // ??? Native.document.body.innerText = new { e.data }.ToString(); //await contentWindow.postMessageAsync("virtual webview.requestFullscreen"); }; #endregion #region onkeyup Native.document.onkeyup += e => { if (e.KeyCode == (int)System.Windows.Forms.Keys.F) { requestFullscreen(); } }; #endregion var controls = new THREE.OrbitControls(camera); Native.window.onframe += delegate { ////var delta = clock.getDelta(); 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); } controls.update(); camera.position = controls.center.clone(); composer.render(0.1); }; #region onresize new { }.With( async delegate { //while (true) do { // wont really work yet? renderer.setSize(Native.window.Width, Native.window.Height); renderTarget.setSize(Native.window.Width, Native.window.Height); composer.setSize(Native.window.Width, Native.window.Height); (hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; (vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); #endregion var ze = new ZeProperties(); ze.Show(); ze.treeView1.Nodes.Clear(); ze.Add(() => renderer); ze.Add(() => controls); ze.Add(() => scene); ze.Left = 0; }