/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { var combo = new IHTMLSelect().AttachToDocument(); #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1px", top = "1em", bottom = "1em" }; next.onclick += delegate { var n = (combo.selectedIndex + 1) % combo.childNodes.Length; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion new[] { "red", "green", "blue" }.WithEach( async x => { var option = new IHTMLOption { value = x, innerText = new { x }.ToString() }.AttachTo(combo); do { await option.async.onselect; Native.css.style.borderLeft = $"1em {x} solid"; await option.async.ondeselect; Native.css.style.borderRight = $"1em {x} solid"; } while (await Native.window.async.onframe); } ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { var combo = new IHTMLSelect().AttachToDocument(); #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1px", top = "1em", bottom = "1em" }; next.onclick += delegate { var n = (combo.selectedIndex + 1) % combo.childNodes.Length; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion new[] { "red", "green", "blue" }.WithEach( async x => { var option = new IHTMLOption { value = x, innerText = new { x }.ToString() }.AttachTo(combo); do { await option.async.onselect; Native.css.style.borderLeft = $"1em {x} solid"; await option.async.ondeselect; Native.css.style.borderRight = $"1em {x} solid"; }while (await Native.window.async.onframe); } ); }
// could assetslibrary auto byref those projects ? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150818 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome-filesystem /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { //Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto; // chrome by default has no scrollbar, bowser does Native.document.documentElement.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // ipad? Native.window.onerror += e => { new IHTMLPre { "error " + new { e.error } }.AttachToDocument(); }; // https://www.youtube.com/watch?v=tnS8K0yhmZU // http://www.reddit.com/r/oculus/comments/2sv5lk/new_release_of_shadertoy_vr/ // https://www.shadertoy.com/view/lsSGRz // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150309 // https://zproxy.wordpress.com/2015/03/09/project-windstorm/ // https://github.com/jimbo00000/RiftRay #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: "ChromeUDPSendAsync"); var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: null ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion Console.WriteLine("create WebGLRenderingContext"); var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { Native.body.style.backgroundColor = "yellow"; new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag.", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); return; } Native.body.style.backgroundColor = "blue"; gl.oncontextlost += async e => { // The GPU process hung. Terminating after 10000 ms. // GpuProcessHostUIShim: The GPU process crashed! Native.body.style.backgroundColor = "red"; Native.body.Clear(); new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 //"The GPU process crashed! (or did the graphics driver crash?)", "The GPU process crashed! (or did the display driver crash?)", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); // reload? //if (Native.window.confirm("oncontextlost, retry or refresh later?")) //{ // Native.body.style.backgroundColor = "yellow"; // //e. //} await new IHTMLButton { "blacklist " + new { Native.document.location.hash } + " shader, reload tab to reload gpu. (or restart browser)" }.AttachToDocument().async.onclick; Native.window.localStorage[new { Native.document.location.hash }] = "blacklisted"; // reload gpu? Native.document.location.reload(); }; //gl.canvas.async.oncont var combo = new IHTMLSelect().AttachToDocument(); combo.style.position = IStyle.PositionEnum.absolute; combo.style.left = "0px"; combo.style.top = "0px"; //combo.style.right = "0px"; combo.style.width = "100%"; combo.style.backgroundColor = "rgba(255,255,255,0.5)"; //combo.style.backgroundColor = "rgba(255,255,0,0.5)"; //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))"; combo.style.border = "0px solid transparent"; combo.style.fontSize = "large"; combo.style.paddingLeft = "1em"; combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana; combo.style.cursor = IStyle.CursorEnum.pointer; //var mAudioContext = new AudioContext(); var c = gl.canvas.AttachToDocument(); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); } while (await Native.window.async.onresize); } ); #endregion #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; //mMouseOriY = ev.CursorY; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; // why aint it canvas? //ev.Element //ev.CaptureMouse(); // using ? ev.Element.requestPointerLock(); await ev.Element.async.onmouseup; Native.document.exitPointerLock(); mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; //c.ontouchmove += c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; c.onmousewheel += ev => { ev.preventDefault(); ev.stopPropagation(); mMousePosY += 3 * ev.WheelDirection; }; #endregion // http://www.wufoo.com/html5/attributes/05-list.html // http://www.w3schools.com/tags/att_input_list.asp //uiauto.datalist1.EnsureID(); //uiauto.search.list = uiauto.datalist1.id; //uiauto.datalist1.id = "datalist1"; //uiauto.search.list = "datalist1"; //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument(); var sw = Stopwatch.StartNew(); //new IHTMLOption { value = "", innerText = $"{References.programs.Count} shaders available" }.AttachTo(combo); new IHTMLOption { value = "", innerText = b.programs.Count + " shaders available" }.AttachTo(combo); // should bind the selection to uri and reload if gpu crashes. #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1em", top = "2em", bottom = "1em", padding = "4em" }; next.onclick += delegate { var n = combo.selectedIndex + 1; Console.WriteLine(new { n }); combo.selectedIndex = n; // if we are on a laptop, by clicking the button perhaps now you want to click right arrow? combo.focus(); }; } ); #endregion // do not add byref if bypackage is available! // Severity Code Description Project File Line //Error CS0433 The type 'ShaderToy' exists in both 'ChromeShaderToyColumns, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null' and 'WebGL ShaderToy, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' ChromeShaderToyPrograms.b Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms.b\Application.cs 283 ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice //References.programs.Keys.WithEachIndex( b.programs.Keys.WithEachIndex( async (key, index) => { //var text = (1 + index) + " of " + References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var text = (1 + index) + " of " + b.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var blacklisted = Native.window.localStorage[new { hash = "#" + key }] == "blacklisted"; if (blacklisted) { var option0 = new IHTMLOption { value = key, innerText = "blacklisted " + text }.AttachTo(combo); return; } var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // um should we preselect it? did we come from a reload? did gpu crash? if (Native.document.location.hash == "#" + key) { // 0 is the header.. should it be a optionheader instead? combo.selectedIndex = 1 + index; } // we are about to create 100 objects. does it have any impact to UI? //var frag = References.programs[key](); var frag = b.programs[key](); // 0ms Error: {{ infoLog = WARNING: 0:13: '=' : global variable initializers should be constant expressions (uniforms and globals are allowed in global initializers for legacy compatibility) // can we detect errors correctly? var len = frag.ToString().Length; option.innerText = text + " " + new { //frame, //load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; // cant we get it if we manually set it? await option.async.onselect; // first time select. before we try to load the shader, lets make sure we remember what causes the gpu crash // 2278ms select {{ key = InvadersByIapafoto, index = 10, hash = #InputTimeByIq }} await Native.document.location.replace("#" + key); // need two frames to see a change in hash? //await Native.window.async.onframe; //await Native.window.async.onframe; // unless from previous refresh it crashed gpu? Console.WriteLine("select " + new { key, index, Native.document.location.hash }); var load = Stopwatch.StartNew(); // defined at? // "C:\util\jsc\nuget\WebGL.ShaderToy.1.0.0.0.nupkg" var pass0 = new ShaderToy.EffectPass( gl: gl, precission: ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(frag); load.Stop(); new { }.With( async delegate { while (await option.async.ondeselect) { pip = pass0; await option.async.onselect; } } ); var framesInSecond = 0; var theSecond = Stopwatch.StartNew(); var frame = 0; do { // can we change uri so a refresh would reload the same program? // perhaps its time to review historic api? Native.document.location.replace("#" + key); frame++; framesInSecond++; if (theSecond.ElapsedMilliseconds >= 1000) { //option.innerText = key + new { frame }; option.innerText = text + " " + new { //frame, framesInSecond, load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; framesInSecond = 0; //theSecond.Restart(); theSecond = Stopwatch.StartNew(); } // can we scale? pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); if (pip != null) { // can we scale? pip.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 0.10f ); } // what does it do? gl.flush(); // wither we are selected or we are pip? await option.async.selected; } while (await Native.window.async.onframe); } ); }
// seems like switching to iframe, // does not keep parent responsive. // framerate is also shared between iframe and parent. // and reload may cause continuty issues // gpu reload seems to be tab based.. // even having multiple tabs, will kill webgl on both when crashed // having two ips wont help either. // so the true multishader // https://www.khronos.org/webgl/public-mailing-list/archives/1104/msg00041.php // http://www.anandtech.com/show/9124/amd-dives-deep-on-asynchronous-shading // https://code.google.com/p/chromium/issues/detail?id=249391 // http://toji.github.io/shader-perf/ // https://plus.google.com/+BrandonJonesToji/posts/4ERHkicC5Ny // or can we atleast move the program link time? // the only performance gain we could get is to batch link all shaders, keep responsive ui and then wait for it to complete. // await delayed shaders? // so it is rather useless until iframe has its own gpu blocking chain... // is there a way to ask if the deffered link or comple is ready? static void doprograms() { Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // Severity Code Description Project File Line Source //Error Metadata file 'Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\bin\Debug\ChromeShaderToyPrograms.exe' could not be found WebGLIFrameBuffer Z:\jsc.svn\examples\javascript\WebGL\WebGLIFrameBuffer\CSC Build var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag.", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); return; } Native.body.style.backgroundColor = "blue"; gl.oncontextlost += delegate { Native.body.style.backgroundColor = "red"; // reload? }; //gl.canvas.async.oncont var combo = new IHTMLSelect().AttachToDocument(); combo.style.position = IStyle.PositionEnum.absolute; combo.style.left = "0px"; combo.style.top = "0px"; //combo.style.right = "0px"; combo.style.width = "100%"; combo.style.backgroundColor = "rgba(255,255,255,0.5)"; //combo.style.backgroundColor = "rgba(255,255,0,0.5)"; //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))"; combo.style.border = "0px solid transparent"; combo.style.fontSize = "large"; combo.style.paddingLeft = "1em"; combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana; combo.style.cursor = IStyle.CursorEnum.pointer; //var mAudioContext = new AudioContext(); var c = gl.canvas.AttachToDocument(); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); } while (await Native.window.async.onresize); } ); #endregion #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; //mMouseOriY = ev.CursorY; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; // why aint it canvas? //ev.Element //ev.CaptureMouse(); // using ? ev.Element.requestPointerLock(); await ev.Element.async.onmouseup; Native.document.exitPointerLock(); mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; //c.ontouchmove += c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; c.onmousewheel += ev => { ev.preventDefault(); ev.stopPropagation(); mMousePosY += 3 * ev.WheelDirection; }; #endregion // http://www.wufoo.com/html5/attributes/05-list.html // http://www.w3schools.com/tags/att_input_list.asp //uiauto.datalist1.EnsureID(); //uiauto.search.list = uiauto.datalist1.id; //uiauto.datalist1.id = "datalist1"; //uiauto.search.list = "datalist1"; //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument(); var sw = Stopwatch.StartNew(); new IHTMLOption { value = "", innerText = $"{ChromeShaderToyPrograms.References.programs.Count} shaders available" }.AttachTo(combo); // should bind the selection to uri and reload if gpu crashes. #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1em", top = "2em", bottom = "1em", padding = "4em" }; next.onclick += delegate { var n = combo.selectedIndex + 1; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion ChromeShaderToyColumns.Library.ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice ChromeShaderToyPrograms.References.programs.Keys.WithEachIndex( async (key, index) => { var text = (1 + index) + " of " + ChromeShaderToyPrograms.References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // we are about to create 100 objects. does it have any impact to UI? var frag = ChromeShaderToyPrograms.References.programs[key](); var len = frag.ToString().Length; option.innerText = text + " " + new { //frame, //load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; // cant we get it if we manually set it? await option.async.onselect; await Native.window.async.onframe; var load = Stopwatch.StartNew(); var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( gl: gl, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(frag); load.Stop(); new { }.With( async delegate { while (await option.async.ondeselect) { pip = pass0; await option.async.onselect; } } ); var framesInSecond = 0; var theSecond = Stopwatch.StartNew(); var frame = 0; do { frame++; framesInSecond++; if (theSecond.ElapsedMilliseconds >= 1000) { //option.innerText = key + new { frame }; option.innerText = text + " " + new { //frame, framesInSecond, load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; framesInSecond = 0; //theSecond.Restart(); theSecond = Stopwatch.StartNew(); } // can we scale? pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); if (pip != null) { // can we scale? pip.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 0.10f ); } // what does it do? gl.flush(); // wither we are selected or we are pip? await option.async.selected; } while (await Native.window.async.onframe); } ); }
// seems like switching to iframe, // does not keep parent responsive. // framerate is also shared between iframe and parent. // and reload may cause continuty issues // gpu reload seems to be tab based.. // even having multiple tabs, will kill webgl on both when crashed // having two ips wont help either. // so the true multishader // https://www.khronos.org/webgl/public-mailing-list/archives/1104/msg00041.php // http://www.anandtech.com/show/9124/amd-dives-deep-on-asynchronous-shading // https://code.google.com/p/chromium/issues/detail?id=249391 // http://toji.github.io/shader-perf/ // https://plus.google.com/+BrandonJonesToji/posts/4ERHkicC5Ny // or can we atleast move the program link time? // the only performance gain we could get is to batch link all shaders, keep responsive ui and then wait for it to complete. // await delayed shaders? // so it is rather useless until iframe has its own gpu blocking chain... // is there a way to ask if the deffered link or comple is ready? static void doprograms() { Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // Severity Code Description Project File Line Source //Error Metadata file 'Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\bin\Debug\ChromeShaderToyPrograms.exe' could not be found WebGLIFrameBuffer Z:\jsc.svn\examples\javascript\WebGL\WebGLIFrameBuffer\CSC Build var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag.", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); return; } Native.body.style.backgroundColor = "blue"; gl.oncontextlost += delegate { Native.body.style.backgroundColor = "red"; // reload? }; //gl.canvas.async.oncont var combo = new IHTMLSelect().AttachToDocument(); combo.style.position = IStyle.PositionEnum.absolute; combo.style.left = "0px"; combo.style.top = "0px"; //combo.style.right = "0px"; combo.style.width = "100%"; combo.style.backgroundColor = "rgba(255,255,255,0.5)"; //combo.style.backgroundColor = "rgba(255,255,0,0.5)"; //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))"; combo.style.border = "0px solid transparent"; combo.style.fontSize = "large"; combo.style.paddingLeft = "1em"; combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana; combo.style.cursor = IStyle.CursorEnum.pointer; //var mAudioContext = new AudioContext(); var c = gl.canvas.AttachToDocument(); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); }while (await Native.window.async.onresize); } ); #endregion #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; //mMouseOriY = ev.CursorY; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; // why aint it canvas? //ev.Element //ev.CaptureMouse(); // using ? ev.Element.requestPointerLock(); await ev.Element.async.onmouseup; Native.document.exitPointerLock(); mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; //c.ontouchmove += c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; c.onmousewheel += ev => { ev.preventDefault(); ev.stopPropagation(); mMousePosY += 3 * ev.WheelDirection; }; #endregion // http://www.wufoo.com/html5/attributes/05-list.html // http://www.w3schools.com/tags/att_input_list.asp //uiauto.datalist1.EnsureID(); //uiauto.search.list = uiauto.datalist1.id; //uiauto.datalist1.id = "datalist1"; //uiauto.search.list = "datalist1"; //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument(); var sw = Stopwatch.StartNew(); new IHTMLOption { value = "", innerText = $"{ChromeShaderToyPrograms.References.programs.Count} shaders available" }.AttachTo(combo); // should bind the selection to uri and reload if gpu crashes. #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1em", top = "2em", bottom = "1em", padding = "4em" }; next.onclick += delegate { var n = combo.selectedIndex + 1; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion ChromeShaderToyColumns.Library.ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice ChromeShaderToyPrograms.References.programs.Keys.WithEachIndex( async(key, index) => { var text = (1 + index) + " of " + ChromeShaderToyPrograms.References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // we are about to create 100 objects. does it have any impact to UI? var frag = ChromeShaderToyPrograms.References.programs[key](); var len = frag.ToString().Length; option.innerText = text + " " + new { //frame, //load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; // cant we get it if we manually set it? await option.async.onselect; await Native.window.async.onframe; var load = Stopwatch.StartNew(); var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( gl: gl, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(frag); load.Stop(); new { }.With( async delegate { while (await option.async.ondeselect) { pip = pass0; await option.async.onselect; } } ); var framesInSecond = 0; var theSecond = Stopwatch.StartNew(); var frame = 0; do { frame++; framesInSecond++; if (theSecond.ElapsedMilliseconds >= 1000) { //option.innerText = key + new { frame }; option.innerText = text + " " + new { //frame, framesInSecond, load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; framesInSecond = 0; //theSecond.Restart(); theSecond = Stopwatch.StartNew(); } // can we scale? pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); if (pip != null) { // can we scale? pip.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 0.10f ); } // what does it do? gl.flush(); // wither we are selected or we are pip? await option.async.selected; }while (await Native.window.async.onframe); } ); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy /// <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(HTML.Pages.IApp page) { // show shader based on tab selection? //Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto; // chrome by default has no scrollbar, bowser does // "C:\util\jsc\bin\ScriptCoreLib.dll" Native.document.documentElement.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // ipad? Native.window.onerror += e => { new IHTMLPre { "error " + new { e.error } }.AttachToDocument(); }; // https://www.youtube.com/watch?v=tnS8K0yhmZU // http://www.reddit.com/r/oculus/comments/2sv5lk/new_release_of_shadertoy_vr/ // https://www.shadertoy.com/view/lsSGRz // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150309 // https://zproxy.wordpress.com/2015/03/09/project-windstorm/ // https://github.com/jimbo00000/RiftRay //1>Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\Application.cs(81,35,81,39): // error CS0656: Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' // #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: "ChromeUDPSendAsync"); var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: null ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag.", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); return; } Native.body.style.backgroundColor = "blue"; gl.oncontextlost += delegate { Native.body.style.backgroundColor = "red"; // reload? }; //gl.canvas.async.oncont var combo = new IHTMLSelect().AttachToDocument(); combo.style.position = IStyle.PositionEnum.absolute; combo.style.left = "0px"; combo.style.top = "0px"; //combo.style.right = "0px"; combo.style.width = "100%"; combo.style.backgroundColor = "rgba(255,255,255,0.5)"; //combo.style.backgroundColor = "rgba(255,255,0,0.5)"; //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))"; combo.style.border = "0px solid transparent"; combo.style.fontSize = "large"; combo.style.paddingLeft = "1em"; combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana; combo.style.cursor = IStyle.CursorEnum.pointer; //var mAudioContext = new AudioContext(); var c = gl.canvas.AttachToDocument(); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); } while (await Native.window.async.onresize); } ); #endregion #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; //mMouseOriY = ev.CursorY; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; // why aint it canvas? //ev.Element //ev.CaptureMouse(); // using ? ev.Element.requestPointerLock(); await ev.Element.async.onmouseup; Native.document.exitPointerLock(); mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; //c.ontouchmove += c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; c.onmousewheel += ev => { ev.preventDefault(); ev.stopPropagation(); mMousePosY += 3 * ev.WheelDirection; }; #endregion // http://www.wufoo.com/html5/attributes/05-list.html // http://www.w3schools.com/tags/att_input_list.asp //uiauto.datalist1.EnsureID(); //uiauto.search.list = uiauto.datalist1.id; //uiauto.datalist1.id = "datalist1"; //uiauto.search.list = "datalist1"; //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument(); var sw = Stopwatch.StartNew(); new IHTMLOption { value = "", innerText = $"{References.programs.Count} shaders available" }.AttachTo(combo); // should bind the selection to uri and reload if gpu crashes. #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1em", top = "2em", bottom = "1em", padding = "4em" }; next.onclick += delegate { var n = combo.selectedIndex + 1; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice References.programs.Keys.WithEachIndex( async (key, index) => { var text = (1 + index) + " of " + References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // we are about to create 100 objects. does it have any impact to UI? var frag = References.programs[key](); var len = frag.ToString().Length; option.innerText = text + " " + new { //frame, //load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; // cant we get it if we manually set it? await option.async.onselect; await Native.window.async.onframe; var load = Stopwatch.StartNew(); var pass0 = new ShaderToy.EffectPass( gl: gl, precission: ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(frag); load.Stop(); new { }.With( async delegate { while (await option.async.ondeselect) { pip = pass0; await option.async.onselect; } } ); var framesInSecond = 0; var theSecond = Stopwatch.StartNew(); var frame = 0; do { frame++; framesInSecond++; if (theSecond.ElapsedMilliseconds >= 1000) { //option.innerText = key + new { frame }; option.innerText = text + " " + new { //frame, framesInSecond, load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; framesInSecond = 0; //theSecond.Restart(); theSecond = Stopwatch.StartNew(); } // can we scale? pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); if (pip != null) { // can we scale? pip.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 0.10f ); } // what does it do? gl.flush(); // wither we are selected or we are pip? await option.async.selected; } while (await Native.window.async.onframe); } ); }