webGL简单例子（klayge）

　　当前的WebGL版本是1.0，其实际上是个OpenGL ES 2.0的Javascript绑定，也就是可以用Javascript来调用OpenGL ES 2.0的函数，在网页中实现3D渲染。WebGL是桌面、移动、嵌入式平台通吃，只要支持OpenGL ES 2.0的平台就可以用WebGL。使用了WebGL的Web游戏等程序可以做到和本地桌面程序一样的绚烂。

　　目前支持WebGL的浏览器有Firefox 4.0 Beta、Chrome 9.0、Opera预览版、Safari每日构建版，NV和AMD的驱动都已经支持桌面的OpenGL ES 2.0，所以也就等于支持了WebGL。

　　这个例子主要是用于测试不同浏览器对WebGL的支持情况，它来自于这里：http://www.klayge.org/html/webgl_test.html 通过这个例子可以了解一个最简单的WebGL程序是如何写成的！另外，可通过这个网页WebGLReport来查看浏览器对WebGL的支持情况。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<html>
    <head> 
        <title>WebGL test</title> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
        <script id="shader-vs" type="x-shader/x-vertex">
            attribute vec3 position;
             
            uniform mat4 mv;
            uniform mat4 proj;
 
            void main()
            {
                gl_Position = proj * mv * vec4(position, 1.0);
            }
        </script>
        <script id="shader-fs" type="x-shader/x-fragment">
            void main()
            {
                gl_FragColor = vec4(0.8, 0.8, 0.0, 1.0);
            }
        </script>
 
        <script type="text/javascript">           
            // Initialises WebGL and creates the 3D scene.
            function loadScene()
            {
                var canvas = document.getElementById("webGLCanvas");
                if (!canvas.getContext)
                {
                    alert("There's no canvas available.");
                    return;
                }
 
                var gl = canvas.getContext("experimental-webgl");
                if (!gl)
                {
                    alert("There's no WebGL context available.");
                    return;
                }
 
                var vendor_info = document.getElementById("vendor_info");
                var renderer_info = document.getElementById("renderer_info");
                var version_info = document.getElementById("version_info");
                var ext_info = document.getElementById("ext_info");
                vendor_info.innerHTML = gl.getParameter(gl.VENDOR);
                renderer_info.innerHTML = gl.getParameter(gl.RENDERER);
                version_info.innerHTML = gl.getParameter(gl.VERSION);
                var exts = gl.getSupportedExtensions();
                var s = "";
                for (index in exts)
                {
                    s += exts[index] + "<br />";
                }
                ext_info.innerHTML = s;
 
                 
                gl.viewport(0, 0, canvas.width, canvas.height);
                 
                var vertexShaderScript = document.getElementById("shader-vs");
                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vertexShader, vertexShaderScript.text);
                gl.compileShader(vertexShader);
                if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS))
                {
                    alert("Unable to compile the vertex shader");
                    gl.deleteShader(vertexShader);
                    return;
                }
                 
                var fragmentShaderScript = document.getElementById("shader-fs");
                var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fragmentShader, fragmentShaderScript.text);
                gl.compileShader(fragmentShader);
                if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS))
                {
                    alert("Unable to compile the fragment shader");
                    gl.deleteShader(fragmentShader);
                    return;
                }
 
                gl.program = gl.createProgram();
                gl.attachShader(gl.program, vertexShader);
                gl.attachShader(gl.program, fragmentShader);
                gl.linkProgram(gl.program);
                if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS))
                {
                    alert("Unable to link shaders");
                    gl.deleteProgram(gl.program);
                    gl.deleteProgram(vertexShader);
                    gl.deleteProgram(fragmentShader);
                    return;
                }
 
                gl.clearColor(0.2, 0.4, 0.6, 1.0);
                gl.clearDepth(1.0);
                gl.enable(gl.DEPTH_TEST);
                gl.depthFunc(gl.LEQUAL);
                 
                var vertexBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
                var vertices = new Float32Array([
                    0.0,   1.0, 1.0,
                    -1.0, -1.0, 1.0,
                    1.0,  -1.0, 1.0
                ]);
     
                gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
                 
                gl.useProgram(gl.program);
                var vertexPosition = gl.getAttribLocation(gl.program, "position");
                gl.enableVertexAttribArray(vertexPosition);
                gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0);
 
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                 
                var fov = 90.0;
                var aspect = canvas.width / canvas.height;
                var nearPlane = 1.0;
                var farPlane = 100.0;
                var top = nearPlane * Math.tan(fov / 2 * Math.PI / 180);
                var bottom = -top;
                var right = top * aspect;
                var left = -right;
 
                var a = (right + left) / (right - left);
                var b = (top + bottom) / (top - bottom);
                var c = (farPlane + nearPlane) / (farPlane - nearPlane);
                var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane);
                var x = (2 * nearPlane) / (right - left);
                var y = (2 * nearPlane) / (top - bottom);
                var perspectiveMatrix = new Float32Array([
                    x, 0, a, 0,
                    0, y, b, 0,
                    0, 0, c, d,
                    0, 0, -1, 0
                ]);
                 
                var modelViewMatrix = new Float32Array([
                    1, 0, 0, 0,
                    0, 1, 0, 0,
                    0, 0, 1, 0,
                    0, 0, 0, 1
                ]);
 
                gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "proj"), false, perspectiveMatrix);
                gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mv"), false, modelViewMatrix);
 
                gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
            }
        </script>
    </head>
     
    <body onload="loadScene()">
        <h1>WebGL Test</h1>
        <h3>Vendor</h3>
        <p id="vendor_info"></p>
        <h3>Renderer</h3>
        <p id="renderer_info"></p>
        <h3>Version</h3>
        <p id="version_info"></p>
        <h3>Extensions</h3>
        <p id="ext_info"></p>
        <h3>Rendering</h3>
        <canvas id="webGLCanvas" width="640" height="480"></canvas>
         
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16460301-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
    </body>
</html>