static WebGLShader InternalConstructor(WebGLRenderingContext gl, uint type = WebGLRenderingContext.VERTEX_SHADER)
		{
			// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs
			var p = gl.createShader(type);

			return p;
		}

		static WebGLDebugShaders InternalConstructor(WebGLRenderingContext gl)
		{
			// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs
			var p = (WebGLDebugShaders)gl.getExtension("WEBGL_debug_shaders");

			return p;
		}

		static WebGLBuffer InternalConstructor(WebGLRenderingContext gl)
		{
			// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs
			var p = gl.createBuffer();

			return p;
		}

 /// <summary>
 /// http://go.jsc-solutions.net/Uniforms Access GLSL uniforms via dynamic dispatch.
 /// </summary>
 public static dynamic Uniforms(this WebGLProgram program, WebGLRenderingContext gl)
 {
     return new WebGLDynamicUniforms
     {
         gl = gl,
         program = program
     };
 }

		static WebGLTexture InternalConstructor(WebGLRenderingContext gl)
		{
			// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeWebGLFrameBuffer\ChromeWebGLFrameBuffer\Application.cs
			// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs
			var p = gl.createTexture();

			return p;
		}

        // samsung gearvr browser doesnt have webgl enabled yet
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151201/samsungbrowser
        // https://zproxy.wordpress.com/2015/07/04/gearvr-ovrmycubeworldndk/


        /// <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)
        {
            // X:\jsc.svn\examples\java\android\vr\OVRMyCubeWorldNDK\OVRMyCubeWorldNDK\VrCubeWorld.Renderer.cs

            // works for IE11
            //DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();


            //if (Native.window.parent != Native.window.self)
            //{
            //    // why stop there. negotiate our own title bar!
            //    Native.document.body.style.backgroundColor = JSColor.Transparent;
            //}
            //else
            //{
            Native.window.document.body.style.backgroundColor = JSColor.Black;
            Native.window.document.body.style.color = JSColor.Yellow;
            //}

            //page.PageContainer.style.color = Color.Blue;

            var size = 600;


            var gl = new WebGLRenderingContext();


            var canvas = gl.canvas.AttachToDocument();

            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            canvas.style.SetLocation(0, 0, size, size);

            canvas.width = size;
            canvas.height = size;



            var gl_viewportWidth = size;
            var gl_viewportHeight = size;

            #region AtResize
            Action AtResize =
                delegate
                {
                    gl_viewportWidth = Native.window.Width;
                    gl_viewportHeight = Native.window.Height;

                    canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight);

                    canvas.width = gl_viewportWidth;
                    canvas.height = gl_viewportHeight;
                };

            Native.window.onresize +=
                e =>
                {
                    AtResize();
                };
            AtResize();
            #endregion


            var shaderProgram = gl.createProgram(
                new GeometryVertexShader(),
                new GeometryFragmentShader()
            );



            gl.linkProgram(shaderProgram);
            gl.useProgram(shaderProgram);

            var shaderProgram_vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");

            gl.enableVertexAttribArray((uint)shaderProgram_vertexPositionAttribute);

            // new in lesson 02
            var shaderProgram_vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
            gl.enableVertexAttribArray((uint)shaderProgram_vertexColorAttribute);

            var shaderProgram_pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
            var shaderProgram_mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");


            // X:\jsc.svn\examples\java\android\vr\OVRMyCubeWorldNDK\OVRMyCubeWorldNDK\References\VrApi.ovrMatrix4f.cs
            // exports.mat4 = require("./gl-matrix/mat4.js");
            // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix.js
            // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix/mat4.js
            // new glMatrix.ARRAY_TYPE(16);
            // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix/common.js
            //  Float32Array : Array
//.........这里部分代码省略.........

        /// <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 gl_viewportWidth = 500;
            var gl_viewportHeight = 500;


            var gl = new WebGLRenderingContext();





            #region canvas
            var canvas = gl.canvas.AttachToDocument();

            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight);

            canvas.width = gl_viewportWidth;
            canvas.height = gl_viewportHeight;
            #endregion




            var h = 1f;
            var r1 = .5f;
            var r2 = .2f;
            var nPhi = 500;


            var prog = gl.createProgram();


            #region createShader
            Func<ScriptCoreLib.GLSL.Shader, WebGLShader> createShader = (src) =>
            {
                var shader = gl.createShader(src);

                // verify
                if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) == null)
                {
                    Native.window.alert("error in SHADER:\n" + gl.getShaderInfoLog(shader));
                    throw new InvalidOperationException("shader failed");
                }

                return shader;
            };
            #endregion

            var vs = createShader(new GeometryVertexShader());
            var fs = createShader(new GeometryFragmentShader());


            gl.attachShader(prog, vs);
            gl.attachShader(prog, fs);


            gl.linkProgram(prog);
            gl.useProgram(prog);



            var pt = new IArray<float>();
            var nt = new IArray<float>();
            var Phi = 0.0;
            var dPhi = 2 * Math.PI / (nPhi - 1);

            var Nx = r1 - r2;
            var Ny = h;
            var N = (float)Math.Sqrt(Nx * Nx + Ny * Ny);

            Nx /= N;
            Ny /= N;

            for (var i = 0; i < nPhi; i++)
            {
                var cosPhi = Math.Cos(Phi);
                var sinPhi = Math.Sin(Phi);
                var cosPhi2 = Math.Cos(Phi + dPhi / 2);
                var sinPhi2 = Math.Sin(Phi + dPhi / 2);

                pt.push(-h / 2);
                pt.push((float)(cosPhi * r1));
                pt.push((float)(sinPhi * r1));   // points

                nt.push(Nx);
                nt.push((float)(Ny * cosPhi));
                nt.push((float)(Ny * sinPhi));         // normals

                pt.push(h / 2);
                pt.push((float)(cosPhi2 * r2));
                pt.push((float)(sinPhi2 * r2));  // points

//.........这里部分代码省略.........

        /// <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\chrome\apps\WebGL\ChromeWebGLExtensions\ChromeWebGLExtensions\Application.cs

			// http://link.springer.com/chapter/10.1007%2F978-3-319-02726-5_20
			// roslyn broke worker support?
			// Uncaught TypeError: c._3BYABlqcAz6k53tGgDEanQ is not a function

			var gl = new WebGLRenderingContext();

            // http://webglreport.com/
            //       unMaskedRenderer: getUnmaskedInfo(gl).renderer,
            //<th>Unmasked Renderer:</th>
            //			<td><%= report.unMaskedRenderer %></td>

            var UNMASKED_RENDERER_WEBGL = "";
            var WEBGL_debug_renderer_info = new
            {
                UNMASKED_RENDERER_WEBGL = 0x9246u
            };


//            02000509 ScriptCoreLib.Shared.BCLImplementation.System.Linq.__OrderedEnumerable`1 +<> c__DisplayClass0
//{ SourceMethod = Int32 < GetEnumerator > b__1(TSource, TSource) }
//        script: error JSC1000: unknown opcode brtrue.s at < GetEnumerator > b__1 + 0x002f

            var dbgRenderInfo = gl.getExtension("WEBGL_debug_renderer_info");
            if (dbgRenderInfo != null)
            {
                // https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/
                UNMASKED_RENDERER_WEBGL = (string)gl.getParameter(WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL);
            }


            new IHTMLButton { "do MD5" }.AttachToDocument().onclick +=
                async a =>
                {
                    var data = "whats the hash for this?";

                    var z = await Task.Run(
                        delegate
                        {
                            // 20140629 level1 scope sharing!

                            var bytes = Encoding.UTF8.GetBytes(data);

                            var s = Stopwatch.StartNew();

                            // { data = "{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 41 }" }

                            // { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 1268 }
                            // { i = 255, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 170 }

                            // {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 245, ManagedThreadId = 10 }}
                            // laptop {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 439, ManagedThreadId = 10 }}

                            // on red server. how fast is the laptop?
                            // laptop wont trust the server ssl?
                            // certs are configured via certmgr.msc 
                            // after export and import the laptop should now be able to trust the ssl?

                            var scope = new { data };

                            for (int i = 0; i < 0x1000; i++)
                            {

                                var hash = bytes.ToMD5Bytes();
                                var hex = hash.ToHexString();

                                //scope = new { data = new { i, hex, s.ElapsedMilliseconds, Thread.CurrentThread.ManagedThreadId, Environment.ProcessorCount }.ToString() };
                                scope = new { data = new { i, hex, s.ElapsedMilliseconds, Thread.CurrentThread.ManagedThreadId }.ToString() };

                            }


                            return scope;
                        }
                    );

                    // show proof of work
                    //a.Element.innerText = z.data;


                    //Environment.OSVersion.
                    var winver = Native.window.navigator.userAgent.SkipUntilOrEmpty("(Windows ").TakeUntilOrEmpty(")");




                    new IHTMLPre {
                        // ProcessorCount allows to know if we are on our lite laptop or the server
                        new {
                            Environment.ProcessorCount,
                            winver,
                            UNMASKED_RENDERER_WEBGL,
                            Native.window.navigator.userAgent,
//.........这里部分代码省略.........

//.........这里部分代码省略.........

                        oo.WithEach(
                            x =>
                            {
                                x.rotation.y += 0.006 * (e.CursorX - old.CursorX);
                                x.rotation.x += 0.006 * (e.CursorY - old.CursorY);
                            }
                        );

                        old = new
                        {


                            e.CursorX,
                            e.CursorY
                        };



                    }

                };
            #endregion

            // THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
            // THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll

            // http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
            // https://www.youtube.com/watch?v=D-Wl9jAB45Q



            #region spherical
            var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
            var c = gl.canvas.AttachToDocument();

            //  3840x2160

            //c.style.SetSize(3840, 2160);

            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube


            c.width = 3840;
            c.height = 2160;


            //c.width = 3840 * 2;
            //c.height = 2160 * 2;


            //c.width = 3840;
            //c.height = 2160;
            // 1,777777777777778

            // https://www.youtube.com/watch?v=fTfJwzRsE-w
            //c.width = 7580;
            //c.height = 3840;
            //1,973958333333333

            //7580
            //    3840

            // wont work
            //c.width = 8192;
            //c.height = 4096;

        static bar initObject(WebGLRenderingContext gl, Action callback)
        {

            var data = new data
            {
                vertices = new float[] { },
                indices = new ushort[] { },
                uvs = new float[] { }
            };

            createRectangle(2, data);

            var @object = new bar();

            @object.vertex_buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, @object.vertex_buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(data.vertices), gl.STATIC_DRAW);

            @object.index_buffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, @object.index_buffer);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(data.indices), gl.STATIC_DRAW);

            @object.texturecoord_buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, @object.texturecoord_buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(data.uvs), gl.STATIC_DRAW);

            @object.n_elements = data.indices.Length;

            @object.t["texture1"] = loadTexture(gl, new texture1().src, callback);
            @object.t["texture2"] = loadTexture(gl, new texture2().src, callback);
            @object.t["texture3"] = loadTexture(gl, new texture3().src, callback);
            @object.t["texture4"] = loadTexture(gl, new texture4().src, callback);
            @object.t["texture5"] = loadTexture(gl, new texture5().src, callback);
            @object.t["texture6"] = loadTexture(gl, new texture6().src, callback);
            return @object;
        }

        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // http://webglsamples.googlecode.com/hg/google-io/2011/100-objects.html

            // https://twitter.com/schteppe/status/493346982279532545

            // http://floooh.github.io/oryol/DrawCallPerf.html
            // https://www.mail-archive.com/[email protected]/msg01454.html
            // https://code.google.com/p/dart/issues/detail?id=11357
            // https://bugzilla.mozilla.org/show_bug.cgi?id=843673

            // http://webglstats.com/
            // for heat zeeker, can we use webgl, instanced geometry, collada databound to LAN synced data layer?
            // http://msdn.microsoft.com/en-us/library/ie/dn725046%28v=vs.85%29.aspx
            // would this mean we would have a nice isometric world?
            // http://www.khronos.org/registry/webgl/extensions/ANGLE_instanced_arrays/
            // ace of spades webgl lan?

            // https://code.google.com/p/chromium/issues/detail?id=288391
            // http://blog.tojicode.com/2013/07/webgl-instancing-with.html
            // http://media.tojicode.com/webgl-samples/instancing.html

            //new WebGLRenderingContext

            // Uncaught TypeError: undefined is not a function 
            var gl = new WebGLRenderingContext().AttachTo(Native.shadow);

            // var ext = gl.getExtension("ANGLE_instanced_arrays"); // Vendor prefixes may apply!
            //var ANGLEInstancedArrays = gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays;

            // when will jsc pass generic arguments along?
            //var ANGLEInstancedArrays = (ANGLE_instanced_arrays)gl.getExtension<ANGLE_instanced_arrays>();

            var ANGLEInstancedArrays = (ANGLE_instanced_arrays)gl.getExtension("ANGLE_instanced_arrays");
            // 0:63ms {{ ANGLEInstancedArrays = [object ANGLEInstancedArrays] }} 

            // any reason to provide extension methods as gl.drawArraysInstanced ?
            // X:\jsc.svn\core\ScriptCoreLib.Redux\ScriptCoreLib.Redux\JavaScript\Extensions\WebGLExtensions.cs

            //ANGLEInstancedArrays.drawArraysInstancedANGLE(

            //gl.drawArraysInstanced(

            Console.WriteLine(new { ANGLEInstancedArrays });
            // 0:270ms {{ ext = [object ANGLEInstancedArrays] }} 
            // 


            // THREE.JS supports it? http://stackoverflow.com/questions/23172609/does-three-js-support-angle-instanced-arrays
            // BufferedGeometry perhaps?

            // https://github.com/mrdoob/three.js/issues/975
            // can we have starling like 2d svg instancing now for webgl?
            // if we wanted to run physic on the background thearead,

            // would the jsc interfaces for webgl have enough knowledge to proxy via WorkerAPI?

            // http://www.browserleaks.com/webgl
            // https://github.com/kripken/emscripten/issues/2510

            // http://nullprogram.com/blog/2014/06/01/

        }

        static CreateShaderResult CreateShader(
            WebGLRenderingContext gl,
            string tvs,
            string tfs,
            bool nativeDebug
            )
        {
            //new IHTMLPre { "enter CreateShader" }.AttachToDocument();

            //var p = gl.createProgram();

            var vs = new WebGLShader(gl, gl.VERTEX_SHADER);
            var fs = new WebGLShader(gl, gl.FRAGMENT_SHADER);

            gl.shaderSource(vs, tvs);
            gl.shaderSource(fs, tfs);

            gl.compileShader(vs);

            var ok = new CreateShaderResult { mSuccess = true };

            // https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_shaders/
            new WebGLDebugShaders(gl).With(x => ok.vsTranslatedShaderSource = x.getTranslatedShaderSource(vs));

            //gl.getExtension("WEBGL_debug_shaders").With(
            //(dynamic WEBGL_debug_shaders) =>
            //	{
            //		ok.vsTranslatedShaderSource = WEBGL_debug_shaders.getTranslatedShaderSource((WebGLShader)vs);
            //	}
            //);

            gl.compileShader(fs);

            // ipad wont have it available
            new WebGLDebugShaders(gl).With(x => ok.fsTranslatedShaderSource = x.getTranslatedShaderSource(fs));

            //gl.getExtension("WEBGL_debug_shaders").With(
            //	(dynamic WEBGL_debug_shaders) =>
            //	{
            //		ok.fsTranslatedShaderSource = WEBGL_debug_shaders.getTranslatedShaderSource((WebGLShader)fs);
            //	}
            //);

            if (gl.getShaderParameter(vs, gl.COMPILE_STATUS) == null)
            {
                var infoLog = gl.getShaderInfoLog(vs);

                // does our async rewriter throw async exceptions yet?
                throw new Exception(message: new { infoLog }.ToString());
                //new IHTMLPre { "error CreateShader " + new { infoLog } }.AttachToDocument();
                //return new CreateShaderResult { mSuccess = false, mInfo = infoLog };
            }

            var fsCOMPILE_STATUS = (bool)gl.getShaderParameter(fs, gl.COMPILE_STATUS);
            //new IHTMLPre { "CreateShader " + new { fsCOMPILE_STATUS } }.AttachToDocument();

            if (!fsCOMPILE_STATUS)
            {
                var infoLog = gl.getShaderInfoLog(fs);
                throw new Exception(message: new { infoLog }.ToString());
                //new IHTMLPre { "error CreateShader " + new { infoLog } }.AttachToDocument();
                //return new CreateShaderResult { mSuccess = false, mInfo = infoLog };
            }


            var p = new WebGLProgram(gl);
            gl.attachShader(p, vs);
            gl.attachShader(p, fs);

            // using dispose?
            gl.deleteShader(vs);
            gl.deleteShader(fs);

            gl.linkProgram(p);

            var linkResult = (bool)gl.getProgramParameter(p, gl.LINK_STATUS);

            //new IHTMLPre { "CreateShader " + new { linkResult } }.AttachToDocument();

            if (!linkResult)
            {
                var infoLog = gl.getProgramInfoLog(p);
                gl.deleteProgram(p);
                throw new Exception(message: new { infoLog }.ToString());
                //new IHTMLPre { "error CreateShader " + new { infoLog } }.AttachToDocument();
                //return new CreateShaderResult { mSuccess = false, mInfo = infoLog };
            }

            // https://msdn.microsoft.com/en-us/library/ie/dn302415(v=vs.85).aspx
            //new IHTMLPre { "exit CreateShader" }.AttachToDocument();

            ok.mProgram = p;
            return ok;
        }

		public WebGLBuffer(WebGLRenderingContext gl)
		{
			// InternalConstructor
		}

        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706
        // subst b: r:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\bin\Debug\staging\GLSLShaderToyPip.Application\web

        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
		{
			// the idea of this exammple
			// is to look at how multiple shaders can be linked to work together.
			// we need two shaders
			// first we could run them as separate programs in pip mode
			// selected by the host/javascript
			// then repeat the same experiment, but have the shader do the pip in a single program
			// later shader code could be nugeted
			// lets have a copy of
			// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyQuadraticBezierByMattdesl\ChromeShaderToyQuadraticBezierByMattdesl\Shaders\Program.frag
			// locally should we need to modify it..

			// can we change colors?


			// https://www.shadertoy.com/view/lsSGRz

			#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

			new { }.With(
				async delegate


				//02000047 <module>[email protected]
				//02000048 GLSLShaderToyPip.Application+<AttachToDocument>d__1+<MoveNext>06000020
				//script: error JSC1000:
				//error:
				//  statement cannot be a load instruction(or is it a bug?)
				//  [0x0000]
				//		ldarg.0    +1 -0

				//public static async void AttachToDocument()
				//public async void AttachToDocument()
				{
					Native.body.style.margin = "0px";
					(Native.body.style as dynamic).webkitUserSelect = "auto";


					var gl = new WebGLRenderingContext(alpha: true);

					#region GPU process was unable to boot
					if (gl == null)
					{

						new IHTMLPre {
							// https://code.google.com/p/chromium/issues/detail?id=294207
//.........这里部分代码省略.........

        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/equirectangular
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150718/shadertoy
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706
        // subst b: X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\bin\Debug\staging\ChromeShaderToyColumns.Application\web


        public Application(IApp page)
		{
			#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


			// view-source:https://www.shadertoy.com/view/Xls3WS
			// https://www.shadertoy.com/api

			// https://www.shadertoy.com/view/Xls3WS
			// https://www.shadertoy.com/js/cmRenderUtils.js
			// https://www.shadertoy.com/js/effect.js

			// what does it take to import those nice shaders into jsc world?

			// x:\jsc.svn\examples\javascript\webgl\webglchocolux\webglchocolux\application.cs
			// it looks there are no channels.
			// is it a vert or frag?
			//  fragColor = vec4( col, 1.0 );
			// must be a frag
			// <body onload="watchInit()" 


			//ChromeShaderToyColumns.Library.ShaderToy.AttachToDocument(
			//	new Shaders.ProgramFragmentShader()
			//);

			new { }.With(
				async delegate
				{
					Native.body.style.margin = "0px";
					(Native.body.style as dynamic).webkitUserSelect = "auto";

					var vs = new Shaders.ProgramFragmentShader();

					var mAudioContext = new AudioContext();
					var gl = new WebGLRenderingContext(alpha: true);
					var c = gl.canvas.AttachToDocument();

					c.style.SetSize(460, 237);
					c.width = 460;
					c.height = 237;

					var u = new UIKeepRendering
					{
						animate = true
					}.AttachToDocument();

					//new IHTMLPre { "init..." }.AttachToDocument();
//.........这里部分代码省略.........

		public WebGLTexture(WebGLRenderingContext gl)
		{
			// InternalConstructor
		}

        private void Initialize(IHTMLCanvas c, WebGLRenderingContext gl, IDefault  page)
        {
            // http://cs.helsinki.fi/u/ilmarihe/metatunnel.html
            // http://wakaba.c3.cx/w/puls.html

            Action<string> alert = Native.window.alert;

            c.style.border = "1px solid yellow";

            page.MaxTextures.innerText = "" + gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);

            // https://www.khronos.org/webgl/public-mailing-list/archives/1007/msg00034.html

            var vs = "";

            vs += "precision highp float; \n";
            vs += "attribute vec3 aVertexPosition;";
            vs += "attribute vec2 aTextureCoord;";
            vs += "uniform mat4 uModelViewMatrix;";
            vs += "uniform mat4 uProjectionMatrix;";
            vs += "varying vec2 vTextureCoord;";
            vs += "void main(void) {";
            vs += "gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);";
            vs += "vTextureCoord = vec2(aTextureCoord.x, 1.0 - aTextureCoord.y);";
            vs += "}";

           var fs = "";
            
            fs += "precision highp float; \n";
            fs += "varying vec2 vTextureCoord;";
            fs += "uniform sampler2D uSamplerDiffuse1;";
            fs += "uniform sampler2D uSamplerDiffuse2;";
            fs += "uniform sampler2D uSamplerDiffuse3;";
            fs += "uniform sampler2D uSamplerDiffuse4;";
            fs += "uniform sampler2D uSamplerDiffuse5;";
            fs += "uniform sampler2D uSamplerDiffuse6;";
            fs += "void main(void) {";
            fs += "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * texture2D(uSamplerDiffuse1, vTextureCoord)";
            fs += "+ vec4(0.0, 1.0, 0.0, 1.0) * texture2D(uSamplerDiffuse2, vTextureCoord)";
            fs += "+ vec4(0.0, 0.0, 1.0, 1.0) * texture2D(uSamplerDiffuse3, vTextureCoord)";
            fs += "+ vec4(0.0, 1.0, 1.0, 1.0) * texture2D(uSamplerDiffuse4, vTextureCoord)";
            fs += "+ vec4(1.0, 0.0, 1.0, 1.0) * texture2D(uSamplerDiffuse5, vTextureCoord)";
            fs += "+ vec4(1.0, 1.0, 0.0, 1.0) * texture2D(uSamplerDiffuse6, vTextureCoord);";
            fs += "}";


            var xfs = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(xfs, fs);
            gl.compileShader(xfs);
            if ((int)gl.getShaderParameter(xfs, gl.COMPILE_STATUS) != 1)
            {
                // vs: ERROR: 0:2: '' : Version number not supported by ESSL 
                // fs: ERROR: 0:1: '' : No precision specified for (float) 

                var error = gl.getShaderInfoLog(xfs);
                Native.window.alert("fs: " + error);
                return;
            }

            var xvs = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(xvs, vs);
            gl.compileShader(xvs);
            if ((int)gl.getShaderParameter(xvs, gl.COMPILE_STATUS) != 1)
            {
                // vs: ERROR: 0:2: '' : Version number not supported by ESSL 
                // vs: ERROR: 0:10: '-' :  wrong operand types  no operation '-' exists that takes a left-hand operand of type 'const mediump int' and a right operand of type 'float' (or there is no acceptable conversion)


                var error = gl.getShaderInfoLog(xvs);
                Native.window.alert("vs: " + error);
                return;
            }

            var shader = new foo();

            shader.program = gl.createProgram();
            gl.attachShader(shader.program, xvs);
            gl.attachShader(shader.program, xfs);
            gl.linkProgram(shader.program);

            var linked = gl.getProgramParameter(shader.program, gl.LINK_STATUS);
            if (linked == null)
            {
                var error = gl.getProgramInfoLog(shader.program);
                Native.window.alert("Error while linking: " + error);
                return;
            }

            gl.useProgram(shader.program);
            shader.aVertexPosition = gl.getAttribLocation(shader.program, "aVertexPosition");
            shader.aTextureCoord = gl.getAttribLocation(shader.program, "aTextureCoord");
            gl.enableVertexAttribArray((uint)shader.aVertexPosition);
            gl.enableVertexAttribArray((uint)shader.aTextureCoord);

            shader.u["uModelViewMatrix"] = gl.getUniformLocation(shader.program, "uModelViewMatrix");
            shader.u["uProjectionMatrix"] = gl.getUniformLocation(shader.program, "uProjectionMatrix");

            shader.u["uSamplerDiffuse1"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse1");
            shader.u["uSamplerDiffuse2"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse2");
            shader.u["uSamplerDiffuse3"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse3");
//.........这里部分代码省略.........

        // 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);
//.........这里部分代码省略.........