/// <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); } ); }
/// <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) { // 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); } ); }
/* 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 }
/* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/ */ /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IDefault page = null) { var SCREEN_WIDTH = Native.window.Width; var SCREEN_HEIGHT = Native.window.Height; //var ,stats; //var mesh, zmesh, geometry; var mouseX = 0; var mouseY = 0; var windowHalfX = SCREEN_WIDTH / 2; var windowHalfY = SCREEN_HEIGHT / 2; var lastUpdate = new IDate().getTime(); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000); camera.position.z = 50; camera.updateMatrix(); var scene = new THREE.Scene(); // LIGHTS var ambient = new THREE.AmbientLight(0x222222); ambient.position.z = -300; scene.add(ambient); var directionalLight = new THREE.DirectionalLight(0xffeedd); directionalLight.position.set(-1, 0, 1); directionalLight.position.normalize(); scene.add(directionalLight); var dLight = new THREE.DirectionalLight(0xffeedd); dLight.position.set(1, 0, 1); dLight.position.normalize(); scene.add(dLight); // init the WebGL renderer and append it to the Dom var renderer = new THREE.WebGLRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); renderer.autoClear = false; renderer.domElement.AttachTo(container); #region createScene Action<object, f, f, f, f> createScene = (geometry, x, y, z, b) => { //var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial()); var zmesh = new THREE.Mesh(geometry); zmesh.position.x = x; zmesh.position.z = y; zmesh.position.y = z; zmesh.scale.x = 5f; zmesh.scale.y = 5f; zmesh.scale.z = 5f; //zmesh.overdraw = true; zmesh.updateMatrix(); scene.add(zmesh); }; #endregion // message: "Unexpected token /" var loader = new THREE.JSONLoader(); Action<object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); }; loader.load( url: new invade().Content.src, callback: IFunction.OfDelegate(callbackMale) ); // postprocessing var composer = new THREE.EffectComposer(renderer); var renderModel = new THREE.RenderPass(scene, camera); composer.addPass(renderModel); var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false ); effectFilm.renderToScreen = true; composer.addPass(effectFilm); #region IsDisposed var IsDisposed = false; Dispose = delegate { if (IsDisposed) return; IsDisposed = true; renderer.domElement.Orphanize(); }; #endregion #region getFrametime Func<long> getFrametime = () => { var now = new IDate().getTime(); var tdiff = (now - lastUpdate) / 1000; lastUpdate = now; return tdiff; }; #endregion #region render Action render = delegate { var delta = getFrametime(); camera.position.x += (mouseX - camera.position.x) * .05f; camera.position.y += (-mouseY - camera.position.y) * .05f; camera.updateMatrix(); //renderer.render( scene, camera ); renderer.clear(); composer.render(delta); }; #endregion #region onmousemove Native.document.onmousemove += e => { mouseX = (e.CursorX - windowHalfX); mouseY = (e.CursorY - windowHalfY); }; #endregion Native.window.onframe += delegate { if (IsDisposed) return; render(); }; #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); }; #endregion }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // 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); } ); }