C# WebGLRenderingContext.createBuffer方法代码示例

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

			return p;
		}

//.........这里部分代码省略.........
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR);

                    gl.bindTexture(gl.TEXTURE_2D, null);




                    Func<string, f> parseFloat = x => (f)double.Parse(x);

                    var lines = data.Split('\n');
                    var vertexCount = 0;
                    var vertexPositions = new List<f>();
                    var vertexTextureCoords = new List<f>();
                    foreach (var i in lines)
                    {
                        var vals = i.Trim().Replace("   ", "  ").Replace("  ", " ").Split(' ');

                        if (vals.Length == 5)
                            if (vals[0] != "//")
                            {
                                // It is a line describing a vertex; get X, Y and Z first
                                vertexPositions.Add(parseFloat(vals[0]));
                                vertexPositions.Add(parseFloat(vals[1]));
                                vertexPositions.Add(parseFloat(vals[2]));

                                // And then the texture coords
                                vertexTextureCoords.Add(parseFloat(vals[3]));
                                vertexTextureCoords.Add(parseFloat(vals[4]));

                                vertexCount += 1;
                            }
                    }

                    var worldVertexPositionBuffer = gl.createBuffer();
                    gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexPositionBuffer);
                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositions.ToArray()), gl.STATIC_DRAW);
                    var worldVertexPositionBuffer_itemSize = 3;
                    var worldVertexPositionBuffer_numItems = vertexCount;

                    var worldVertexTextureCoordBuffer = gl.createBuffer();
                    gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexTextureCoordBuffer);
                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexTextureCoords.ToArray()), gl.STATIC_DRAW);
                    var worldVertexTextureCoordBuffer_itemSize = 2;
                    var worldVertexTextureCoordBuffer_numItems = vertexCount;





                    gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f);
                    gl.enable(gl.DEPTH_TEST);




                    var lastTime = 0L;
                    // Used to make us "jog" up and down as we move forward.
                    var joggingAngle = 0f;

                    #region animate
                    Action animate = () =>
                    {
                        var timeNow = new IDate().getTime();
                        if (lastTime != 0)
                        {
                            var elapsed = timeNow - lastTime;

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

            var tilt = 90f;
            var spin = 0f;


            #region handleKeys
            Action handleKeys =
                delegate
                {
                    if (currentlyPressedKeys[33])
                    {
                        // Page Up
                        zoom -= 0.1f;
                    }
                    if (currentlyPressedKeys[34])
                    {
                        // Page Down
                        zoom += 0.1f;
                    }
                    if (currentlyPressedKeys[38])
                    {
                        // Up cursor key
                        tilt += 2;
                    }
                    if (currentlyPressedKeys[40])
                    {
                        // Down cursor key
                        tilt -= 2;
                    }
                };
            #endregion

            #region initBuffers
            var starVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
            var vertices = new f[]{
                    -1.0f, -1.0f,  0.0f,
                     1.0f, -1.0f,  0.0f,
                    -1.0f,  1.0f,  0.0f,
                     1.0f,  1.0f,  0.0f
                };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            var starVertexPositionBuffer_itemSize = 3;
            var starVertexPositionBuffer_numItems = 4;

            var starVertexTextureCoordBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
            var textureCoords = new f[]{
                    0.0f, 0.0f,
                    1.0f, 0.0f,
                    0.0f, 1.0f,
                    1.0f, 1.0f
                };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
            var starVertexTextureCoordBuffer_itemSize = 2;
            var starVertexTextureCoordBuffer_numItems = 4;
            #endregion


            #region initWorldObjects
            var stars = new List<Star>();
            var numStars = 50f;

            for (var i = 0; i < numStars; i++)
            {
                stars.Add(new Star((i / numStars) * 5.0f, i / numStars));

        /// <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)
        {
            // view-source:http://mrdoob.com/lab/javascript/webgl/glsl/04/

            var time = new Stopwatch();
            time.Start();

            var parameters_screenWidth = 0;
            var parameters_screenHeight = 0;

            var gl = new WebGLRenderingContext();
            var canvas = gl.canvas.AttachToDocument();


            #region IsDisposed
            var IsDisposed = false;

            Dispose = delegate
            {
                if (IsDisposed)
                    return;

                IsDisposed = true;

                canvas.Orphanize();
            };
            #endregion

            // Create Vertex buffer (2 triangles)

            var buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(-1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f), gl.STATIC_DRAW);

            // Create Program


            var program = gl.createProgram(
                new DisturbVertexShader(),
                new DisturbFragmentShader()
            );

            gl.linkProgram(program);
            gl.useProgram(program);


            #region loadTexture
            Action<IHTMLImage, WebGLTexture> loadTexture =
                async (image, texture_) =>
                {
                    await image;


                    gl.enable(gl.TEXTURE_2D);
                    gl.bindTexture(gl.TEXTURE_2D, texture_);
                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR_MIPMAP_LINEAR);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, (int)gl.REPEAT);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, (int)gl.REPEAT);
                    gl.generateMipmap(gl.TEXTURE_2D);
                    gl.bindTexture(gl.TEXTURE_2D, null);

                };
            #endregion


            var texture = gl.createTexture();

            loadTexture(new HTML.Images.FromAssets.disturb(), texture);


            var vertexPositionLocation = default(long);
            var textureLocation = default(WebGLUniformLocation);

            #region resize
            Action resize = delegate
            {
                canvas.style.SetLocation(0, 0);

                canvas.width = Native.window.Width;
                canvas.height = Native.window.Height;

                parameters_screenWidth = canvas.width;
                parameters_screenHeight = canvas.height;

                gl.viewport(0, 0, canvas.width, canvas.height);
            };

            Native.window.onresize +=
                delegate
                {
                    if (IsDisposed)
                        return;

                    resize();
//.........这里部分代码省略.........

//.........这里部分代码省略.........
            var uniforms = prog.Uniforms(gl);

            var nPhi = 100;
            var nTheta = 50;
            var dPhi = 2 * Math.PI / nPhi;
            var dTheta = Math.PI / nTheta;

            var vertices = new IArray<float>();
            var ind = new IArray<ushort>();

            for (var j = 0; j <= nTheta; j++)
            {
                var Theta = j * dTheta;
                var cosTheta = Math.Cos(Theta);
                var sinTheta = Math.Sin(Theta);
                for (var i = 0; i <= nPhi; i++)
                {
                    var Phi = i * dPhi;
                    var cosPhi = Math.Cos(Phi);
                    var sinPhi = Math.Sin(Phi);
                    vertices.push((f)(cosPhi * sinTheta));
                    vertices.push((f)(-sinPhi * sinTheta));
                    vertices.push((f)(cosTheta));
                }
            }
            for (var j = 0; j < nTheta; j++)
                for (var i = 0; i <= nPhi; i++)
                {
                    ind.push((ushort)(j * (nPhi + 1) + i));
                    ind.push((ushort)((j + 1) * (nPhi + 1) + i));
                }
            var posLocation = gl.getAttribLocation(prog, "aPos");
            gl.enableVertexAttribArray((uint)posLocation);
            var posBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            gl.vertexAttribPointer((uint)posLocation, 3, gl.FLOAT, false, 0, 0);

            var indexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(ind.ToArray()),
              gl.STATIC_DRAW);

            //prMatrix.perspective(45, 1, .1, 100);
            gl.uniformMatrix4fv(gl.getUniformLocation(prog, "prMatrix"),
               false, new Float32Array(prMatrix.getAsArray()));
            var mvMatrix = new CanvasMatrix4();

            var mvMatLoc = gl.getUniformLocation(prog, "mvMatrix");


            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);
            gl.clearDepth(1.0f);
            gl.clearColor(0, 0, .8f, 1f);

            var xOffs = 0;
            var yOffs = 0;
            var drag = 0;
            var xRot = 0f;
            var yRot = 1f;
            var transl = -15.5f;

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

                nt.push(Nx);
                nt.push((float)(Ny * cosPhi2));
                nt.push((float)(Ny * sinPhi2));       // normals

                Phi += dPhi;
            }

            var posLoc = gl.getAttribLocation(prog, "aPos");
            gl.enableVertexAttribArray((uint)posLoc);
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pt.ToArray()), gl.STATIC_DRAW);
            gl.vertexAttribPointer((uint)posLoc, 3, gl.FLOAT, false, 0, 0);

            var normLoc = gl.getAttribLocation(prog, "aNorm");
            gl.enableVertexAttribArray((uint)normLoc);
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(nt), gl.STATIC_DRAW);
            gl.vertexAttribPointer((uint)normLoc, 3, gl.FLOAT, false, 0, 0);

            var prMatrix = new CanvasMatrix4();

            gl.uniformMatrix4fv(gl.getUniformLocation(prog, "prMatrix"),
               false, new Float32Array(prMatrix.getAsArray()));

            var mvMatrix = new CanvasMatrix4();
            var rotMat = new CanvasMatrix4();
            rotMat.makeIdentity();
            rotMat.rotate(-40, 0, 1, 0);
            var mvMatLoc = gl.getUniformLocation(prog, "mvMatrix");

            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);
            gl.clearDepth(1.0f);
            gl.clearColor(0, 0, .5f, 1);

            var xOffs = 0;
            var yOffs = 0;
            var drag = 0;
            var xRot = 0;
            var yRot = 0;
            var transl = -1.5f;

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

            var pMatrix = glMatrix.mat4.create();

            #region new in lesson 03
            Action mvPushMatrix = delegate
            {
                var copy = glMatrix.mat4.create();
                glMatrix.mat4.set(mvMatrix, copy);
                mvMatrixStack.Push(copy);
            };

            Action mvPopMatrix = delegate
            {
                mvMatrix = mvMatrixStack.Pop();
            };
            #endregion


            #region setMatrixUniforms
            Action setMatrixUniforms =
                delegate
                {
                    gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix);
                    gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix);
                };
            #endregion



            var size = 0.03f;


            #region cube
            var cubeVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
            #region vertices
            var vertices = new[]{

                // Front face RED
                -size, -size,  size,
                 size, -size,  size,
                 size,  size,  size,
                -size,  size,  size,

                // Back face YELLOW
                -size, -size, -size,
                -size,  size, -size,
                 size,  size, -size,
                 size, -size, -size,

                // Top face GREEN
                -size,  size, -size,
                -size,  size,  size,
                 size,  size,  size,
                 size,  size, -size,

                // Bottom face BEIGE
                -size, -size, -size,
                 size, -size, -size,
                 size, -size,  size,
                -size, -size,  size,

                // Right face PURPLE
                 size, -size, -size,
                 size,  size, -size,
                 size,  size,  size,

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

            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");



            var mvMatrix = glMatrix.mat4.create();
            var pMatrix = glMatrix.mat4.create();

            #region setMatrixUniforms
            Action setMatrixUniforms =
                delegate
                {
                    gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix);
                    gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix);
                };
            #endregion




            #region init buffers
            var triangleVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
            var vertices = new[]{
                     0.0f,  1.0f,  0.0f,
                    -1.0f, -1.0f,  0.0f,
                     1.0f, -1.0f,  0.0f
                };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            var triangleVertexPositionBuffer_itemSize = 3;
            var triangleVertexPositionBuffer_numItems = 3;

            #region new in lesson 02

            var triangleVertexColorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

            var colors = new[]{
                1.0f, 0.0f, 0.0f, 1.0f,
                0.0f, 1.0f, 0.0f, 1.0f,
                0.0f, 0.0f, 1.0f, 1.0f
            };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
            var triangleVertexColorBuffer_itemSize = 4;
            var triangleVertexColorBuffer_numItems = 3;
            #endregion


            var squareVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
            vertices = new[]{
                     1.0f,  1.0f,  0.0f,
                    -1.0f,  1.0f,  0.0f,
                     1.0f, -1.0f,  0.0f,

        /// <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 = Native.window.Width;
            var gl_viewportHeight = Native.window.Height;




            var gl = new WebGLRenderingContext();


            var canvas = gl.canvas.AttachToDocument();

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


            gl.viewport(0, 0, gl_viewportWidth, gl_viewportWidth);


            var prog = gl.createProgram(
                new CubicVertexShader(),
                new CubicFragmentShader()
                );


            var posLoc = 0U;
            gl.bindAttribLocation(prog, posLoc, "aPos");
            var normLoc = 1U;
            gl.bindAttribLocation(prog, normLoc, "aNorm");
            gl.linkProgram(prog);
            gl.useProgram(prog);

            #region data
            var a = 1.0f; // where is it used? what shall be the type?
            var pt0 = new float[] {-a,-a,a, a,-a,a, -a,a,a, a,a,a,  // cubic
                 -a,a,a, a,a,a, -a,a,-a, a,a,-a,
                 -a,a,-a, a,a,-a, -a,-a,-a, a,-a,-a,  -a,-a,-a, a,-a,-a, -a,-a,a, a,-a,a,
                 a,a,a, a,a,-a, a,-a,a, a,-a,-a,  -a,a,a, -a,a,-a, -a,-a,a, -a,-a,-a};
            var nt = new float[] {0,0,1, 0,0,1, 0,0,1, 0,0,1,  0,1,0, 0,1,0, 0,1,0, 0,1,0,
                 0,0,-1, 0,0,-1, 0,0,-1, 0,0,-1,  0,-1,0, 0,-1,0, 0,-1,0, 0,-1,0,
                 1,0,0, 1,0,0, 1,0,0, 1,0,0,  -1,0,0, -1,0,0, -1,0,0, -1,0,0};
            var ind = new ushort[] {0,1,2,1,2,3, 4,5,6,5,6,7, 8,9,10,9,10,11,
                 12,13,14,13,14,15, 16,17,18,17,18,19, 20,21,22,21,22,23};

            var nPhi = 25;
            var nTheta = 12;
            var r = .15;
            var dPhi = 2.0 * Math.PI / nPhi;
            var dTheta = Math.PI / nTheta;

            for (var j = 0; j <= nTheta; j++)
            {
                var Theta = j * dTheta;
                var cosTheta = Math.Cos(Theta);
                var sinTheta = Math.Sin(Theta);
                for (var i = 0; i <= nPhi; i++)
                {
                    var Phi = i * dPhi;
                    var cosPhi = Math.Cos(Phi);
                    var sinPhi = Math.Sin(Phi);


                    ((IArray<float>)(object)pt0).push((float)(r * cosPhi * sinTheta));
                    ((IArray<float>)(object)pt0).push((float)(-r * sinPhi * sinTheta));
                    ((IArray<float>)(object)pt0).push((float)(r * cosTheta));

                    ((IArray<float>)(object)nt).push((float)(cosPhi * sinTheta));
                    ((IArray<float>)(object)nt).push((float)(-sinPhi * sinTheta));
                    ((IArray<float>)(object)nt).push((float)(cosTheta));
                }
            }
            var n1 = nPhi + 1;
            var off = 24;
            for (var i = 0; i < nTheta; i++)
                for (var j = 0; j < nPhi; j++)
                {
                    ((IArray<int>)(object)ind).push(i * n1 + j + off);
                    ((IArray<int>)(object)ind).push((i + 1) * n1 + j + 1 + off);
                    ((IArray<int>)(object)ind).push(i * n1 + j + 1 + off);
                    ((IArray<int>)(object)ind).push(i * n1 + j + off);
                    ((IArray<int>)(object)ind).push((i + 1) * n1 + j + off);
                    ((IArray<int>)(object)ind).push((i + 1) * n1 + j + 1 + off);
                }
            #endregion

            gl.enableVertexAttribArray(posLoc);
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pt0), gl.STATIC_DRAW);
            gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

            gl.enableVertexAttribArray(normLoc);
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(nt), gl.STATIC_DRAW);
            gl.vertexAttribPointer(normLoc, 3, gl.FLOAT, false, 0, 0);

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

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

                            #region handleLoadedTexture
                            Action<WebGLTexture, IHTMLImage> handleLoadedTexture = (texture, texture_image) =>
                            {
                                gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
                                gl.bindTexture(gl.TEXTURE_2D, texture);
                                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture_image);
                                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR);
                                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR_MIPMAP_NEAREST);
                                gl.generateMipmap(gl.TEXTURE_2D);

                                gl.bindTexture(gl.TEXTURE_2D, null);
                            };
                            #endregion




                            var earthTexture = gl.createTexture();
                            handleLoadedTexture(earthTexture, earth);


                            var galvanizedTexture = gl.createTexture();
                            handleLoadedTexture(galvanizedTexture, metal);


                            new WebGLLesson14.Data.Teapot().Content.AttachToDocument().onload +=
                                delegate
                                {

                                    #region loadTeapot
                                    var teapotData = Application.Teapot;

                                    var teapotVertexNormalBuffer = gl.createBuffer();
                                    gl.bindBuffer(gl.ARRAY_BUFFER, teapotVertexNormalBuffer);
                                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(teapotData.vertexNormals), gl.STATIC_DRAW);
                                    var teapotVertexNormalBuffer_itemSize = 3;
                                    var teapotVertexNormalBuffer_numItems = teapotData.vertexNormals.Length / 3;

                                    var teapotVertexTextureCoordBuffer = gl.createBuffer();
                                    gl.bindBuffer(gl.ARRAY_BUFFER, teapotVertexTextureCoordBuffer);
                                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(teapotData.vertexTextureCoords), gl.STATIC_DRAW);
                                    var teapotVertexTextureCoordBuffer_itemSize = 2;
                                    var teapotVertexTextureCoordBuffer_numItems = teapotData.vertexTextureCoords.Length / 2;

                                    var teapotVertexPositionBuffer = gl.createBuffer();
                                    gl.bindBuffer(gl.ARRAY_BUFFER, teapotVertexPositionBuffer);
                                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(teapotData.vertexPositions), gl.STATIC_DRAW);
                                    var teapotVertexPositionBuffer_itemSize = 3;
                                    var teapotVertexPositionBuffer_numItems = teapotData.vertexPositions.Length / 3;

                                    var teapotVertexIndexBuffer = gl.createBuffer();
                                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, teapotVertexIndexBuffer);
                                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(teapotData.indices), gl.STATIC_DRAW);
                                    var teapotVertexIndexBuffer_itemSize = 1;
                                    var teapotVertexIndexBuffer_numItems = teapotData.indices.Length;

                                    #endregion







                                    gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f);

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

            var pMatrix = glMatrix.mat4.create();

            #region new in lesson 03
            Action mvPushMatrix = delegate
            {
                var copy = glMatrix.mat4.create();
                glMatrix.mat4.set(mvMatrix, copy);
                mvMatrixStack.Push(copy);
            };

            Action mvPopMatrix = delegate
            {
                mvMatrix = mvMatrixStack.Pop();
            };
            #endregion


            #region setMatrixUniforms
            Action setMatrixUniforms =
                delegate
                {
                    gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix);
                    gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix);
                };
            #endregion




            #region init buffers

            #region pyramid
            var pyramidVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
            var vertices = new[]{
                // Front face
                 0.0f,  1.0f,  0.0f,
                -1.0f, -1.0f,  1.0f,
                 1.0f, -1.0f,  1.0f,

                // Right face
                 0.0f,  1.0f,  0.0f,
                 1.0f, -1.0f,  1.0f,
                 1.0f, -1.0f, -1.0f,

                // Back face
                 0.0f,  1.0f,  0.0f,
                 1.0f, -1.0f, -1.0f,
                -1.0f, -1.0f, -1.0f,

                // Left face
                 0.0f,  1.0f,  0.0f,
                -1.0f, -1.0f, -1.0f,
                -1.0f, -1.0f,  1.0f
            };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            var pyramidVertexPositionBuffer_itemSize = 3;
            var pyramidVertexPositionBuffer_numItems = 12;


            var pyramidVertexColorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);

            var colors = new[]{
                // Front face

//.........这里部分代码省略.........
                                    var y = cosTheta;
                                    var z = sinPhi * sinTheta;
                                    var u = 1 - (longNumber / longitudeBands);
                                    var v = 1 - (latNumber / latitudeBands);

                                    normalData.Add(x);
                                    normalData.Add(y);
                                    normalData.Add(z);
                                    textureCoordData.Add(u);
                                    textureCoordData.Add(v);
                                    vertexPositionData.Add(radius * x);
                                    vertexPositionData.Add(radius * y);
                                    vertexPositionData.Add(radius * z);
                                }
                            }

                            var indexData = new List<ushort>();
                            for (var latNumber = 0; latNumber < latitudeBands; latNumber++)
                            {
                                for (var longNumber = 0; longNumber < longitudeBands; longNumber++)
                                {
                                    var first = (latNumber * (longitudeBands + 1)) + longNumber;
                                    var second = first + longitudeBands + 1;
                                    indexData.Add((ushort)first);
                                    indexData.Add((ushort)second);
                                    indexData.Add((ushort)(first + 1));

                                    indexData.Add((ushort)second);
                                    indexData.Add((ushort)(second + 1));
                                    indexData.Add((ushort)(first + 1));
                                }
                            }

                            var sphereVertexNormalBuffer = gl.createBuffer();
                            gl.bindBuffer(gl.ARRAY_BUFFER, sphereVertexNormalBuffer);
                            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData.ToArray()), gl.STATIC_DRAW);
                            var sphereVertexNormalBuffer_itemSize = 3;
                            var sphereVertexNormalBuffer_numItems = normalData.Count / 3;

                            var sphereVertexTextureCoordBuffer = gl.createBuffer();
                            gl.bindBuffer(gl.ARRAY_BUFFER, sphereVertexTextureCoordBuffer);
                            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData.ToArray()), gl.STATIC_DRAW);
                            var sphereVertexTextureCoordBuffer_itemSize = 2;
                            var sphereVertexTextureCoordBuffer_numItems = textureCoordData.Count / 2;

                            var sphereVertexPositionBuffer = gl.createBuffer();
                            gl.bindBuffer(gl.ARRAY_BUFFER, sphereVertexPositionBuffer);
                            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData.ToArray()), gl.STATIC_DRAW);
                            var sphereVertexPositionBuffer_itemSize = 3;
                            var sphereVertexPositionBuffer_numItems = vertexPositionData.Count / 3;

                            var sphereVertexIndexBuffer = gl.createBuffer();
                            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sphereVertexIndexBuffer);
                            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData.ToArray()), gl.STREAM_DRAW);
                            var sphereVertexIndexBuffer_itemSize = 1;
                            var sphereVertexIndexBuffer_numItems = indexData.Count;
                            #endregion



                            gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f);
                            gl.enable(gl.DEPTH_TEST);

                            var earthAngle = 180f;

                            var lastTime = 0L;

        /* Source: http://www.ibiblio.org/e-notes/webgl/models/ethanol.html
         * 
         */


        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IDefault page = null)
        {
            var gl_viewportWidth = 500;
            var gl_viewportHeight = 500;




            var gl = new WebGLRenderingContext();

            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;




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


            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 nPhi = 100;
            var nTheta = 50;
            var dPhi = 2 * Math.PI / nPhi;
            var dTheta = Math.PI / nTheta;

            var vertices = new IArray<float>();
            var ind = new IArray<ushort>();

            for (var j = 0; j <= nTheta; j++)
            {
                var Theta = j * dTheta;
                var cosTheta = Math.Cos(Theta);
                var sinTheta = Math.Sin(Theta);
                for (var i = 0; i <= nPhi; i++)
                {
                    var Phi = i * dPhi;
                    var cosPhi = Math.Cos(Phi);
                    var sinPhi = Math.Sin(Phi);
                    vertices.push((f)(cosPhi * sinTheta));
                    vertices.push((f)(-sinPhi * sinTheta));
                    vertices.push((f)(cosTheta));
                }
            }
            for (var j = 0; j < nTheta; j++)
                for (var i = 0; i <= nPhi; i++)
                {
                    ind.push((ushort)(j * (nPhi + 1) + i));
                    ind.push((ushort)((j + 1) * (nPhi + 1) + i));
                }
            var posLocation = gl.getAttribLocation(prog, "aPos");
            gl.enableVertexAttribArray((uint)posLocation);
            var posBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            gl.vertexAttribPointer((uint)posLocation, 3, gl.FLOAT, false, 0, 0);
//.........这里部分代码省略.........

//.........这里部分代码省略.........
            var mvMatrix = glMatrix.mat4.create();
            var mvMatrixStack = new Stack<Float32Array>();

            var pMatrix = glMatrix.mat4.create();

            #region new in lesson 03
            Action mvPushMatrix = delegate
            {
                var copy = glMatrix.mat4.create();
                glMatrix.mat4.set(mvMatrix, copy);
                mvMatrixStack.Push(copy);
            };

            Action mvPopMatrix = delegate
            {
                mvMatrix = mvMatrixStack.Pop();
            };
            #endregion


            #region setMatrixUniforms
            Action setMatrixUniforms =
                delegate
                {
                    gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix);
                    gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix);
                };
            #endregion




            #region init buffers
            var triangleVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
            var vertices = new[]{
                     0.0f,  1.0f,  0.0f,
                    -1.0f, -1.0f,  0.0f,
                     1.0f, -1.0f,  0.0f
                };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            var triangleVertexPositionBuffer_itemSize = 3;
            var triangleVertexPositionBuffer_numItems = 3;

            #region new in lesson 02

            var triangleVertexColorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

            var colors = new[]{
                1.0f, 0.0f, 0.0f, 1.0f,
                0.0f, 1.0f, 0.0f, 1.0f,
                0.0f, 0.0f, 1.0f, 1.0f
            };
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
            var triangleVertexColorBuffer_itemSize = 4;
            var triangleVertexColorBuffer_numItems = 3;
            #endregion


            var squareVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
            vertices = new[]{
                     1.0f,  1.0f,  0.0f,
                    -1.0f,  1.0f,  0.0f,
                     1.0f, -1.0f,  0.0f,

//.........这里部分代码省略.........
                            var shaderProgram_vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
                            gl.enableVertexAttribArray((uint)shaderProgram_vertexPositionAttribute);

                            var shaderProgram_textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
                            gl.enableVertexAttribArray((uint)shaderProgram_textureCoordAttribute);

                            var shaderProgram_vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
                            gl.enableVertexAttribArray((uint)shaderProgram_vertexNormalAttribute);

                            var shaderProgram_pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
                            var shaderProgram_mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
                            var shaderProgram_nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
                            var shaderProgram_samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
                            var shaderProgram_useLightingUniform = gl.getUniformLocation(shaderProgram, "uUseLighting");
                            var shaderProgram_ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor");
                            var shaderProgram_pointLightingLocationUniform = gl.getUniformLocation(shaderProgram, "uPointLightingLocation");
                            var shaderProgram_pointLightingColorUniform = gl.getUniformLocation(shaderProgram, "uPointLightingColor");

                            #region setMatrixUniforms
                            Action setMatrixUniforms =
                                delegate
                                {
                                    gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix);
                                    gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix);

                                    var normalMatrix = glMatrix.mat3.create();
                                    glMatrix.mat4.toInverseMat3(mvMatrix, normalMatrix);
                                    glMatrix.mat3.transpose(normalMatrix);
                                    gl.uniformMatrix3fv(shaderProgram_nMatrixUniform, false, normalMatrix);
                                };
                            #endregion

                            #region cubeVertexPositionBuffer
                            var cubeVertexPositionBuffer = gl.createBuffer();
                            gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
                            var vertices = new f[]
                                   {
                                       // Front face
                                       -1.0f, -1.0f,  1.0f,
                                        1.0f, -1.0f,  1.0f,
                                        1.0f,  1.0f,  1.0f,
                                       -1.0f,  1.0f,  1.0f,

                                       // Back face
                                       -1.0f, -1.0f, -1.0f,
                                       -1.0f,  1.0f, -1.0f,
                                        1.0f,  1.0f, -1.0f,
                                        1.0f, -1.0f, -1.0f,

                                       // Top face
                                       -1.0f,  1.0f, -1.0f,
                                       -1.0f,  1.0f,  1.0f,
                                        1.0f,  1.0f,  1.0f,
                                        1.0f,  1.0f, -1.0f,

                                       // Bottom face
                                       -1.0f, -1.0f, -1.0f,
                                        1.0f, -1.0f, -1.0f,
                                        1.0f, -1.0f,  1.0f,
                                       -1.0f, -1.0f,  1.0f,

                                       // Right face
                                        1.0f, -1.0f, -1.0f,
                                        1.0f,  1.0f, -1.0f,
                                        1.0f,  1.0f,  1.0f,
                                        1.0f, -1.0f,  1.0f,