DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 在支持HTML5的浏覽器上運行WebGL程序的方法
在支持HTML5的浏覽器上運行WebGL程序的方法
編輯：HTML5教程     

 　　前提條件和預期結果

　　目前只有少數的浏覽器支持 WebGL ，請看我的另外一篇文章：Can I use WebGL?.

　　下面的例子是在 Windows 下的 Chrome 16/23 以及 Android 下的 Firefox 17 進行測試。如果你使用的是非兼容浏覽器訪問則會彈出一個警告。

2015618155306361.png (418×380)

　　圖1：包含 Hello world 文本的動畫的 WebGL 立方體

　　在兼容 HTML5 的浏覽器上，你將會看到如下圖所示的帶動畫效果的立方體：

2015618155324527.jpg (600×404)

　　圖2: 示例運行的屏幕截圖

　　該代碼基於 Lighting in WebGL - How to simulate lighting effects in your WebGL context - 非常感謝這篇教程。在該實例初始運行時，動畫的立方體是通過一個靜態的 Bitmap 圖形對象渲染的。

　　下面的代碼演示如何在程序中動態的渲染文本：

　　XML/HTML Code復制內容到剪貼板

　　// TODO #1 New method to create a texture

　　function createCubeTexture(text) {

　　...

　　}

　　在這裡使用 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 是非常重要的，用來確保寫文本時不會前後顛倒。剩下的就很容易理解了：

　　XML/HTML Code復制內容到剪貼板

　　// TODO #2 Assign the created texture for display

　　cubeTexture = createCubeTexture("Hello World!");

　源碼

// File #1: webgl-demo.htm

XML/HTML Code復制內容到剪貼板
  1. <html>
  2. <head>
  3. <title>WebGL - Hello World!</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="sylvester.js" type="text/javascript"></script>
  6. <script src="glUtils.js" type="text/javascript"></script>
  7. <script src="webgl-demo.js" type="text/javascript"></script>
  8.  
  9. <!-- Fragment shader program -->
  10. <script id="shader-fs" type="x-shader/x-fragment">
  11. varying highp vec2 vTextureCoord;
  12. varying highp vec3 vLighting;
  13.  
  14. uniform sampler2D uSampler;
  15.  
  16. void main(void) {
  17. highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  18.  
  19. gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
  20. }
  21. </script>
  22.  
  23. <!-- Vertex shader program -->
  24. <script id="shader-vs" type="x-shader/x-vertex">
  25. attribute highp vec3 aVertexNormal;
  26. attribute highp vec3 aVertexPosition;
  27. attribute highp vec2 aTextureCoord;
  28.  
  29. uniform highp mat4 uNormalMatrix;
  30. uniform highp mat4 uMVMatrix;
  31. uniform highp mat4 uPMatrix;
  32.  
  33. varying highp vec2 vTextureCoord;
  34. varying highp vec3 vLighting;
  35.  
  36. void main(void) {
  37. gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  38. vTextureCoord = aTextureCoord;
  39.  
  40. // Apply lighting effect
  41.  
  42. highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
  43. highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
  44. highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
  45. highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
  46.  
  47. highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
  48. vLighting = ambientLight + (directionalLightColor * directional);
  49. }
  50. </script>
  51. </head>
  52.  
  53. <body onload="start()">
  54. <canvas id="glcanvas" width="640" height="480">
  55. Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
  56. </canvas>
  57. </body>
  58. </html>

　　// File #02: webgl-demo.js

　　XML/HTML Code復制內容到剪貼板

　　var canvas;

　　var gl;

　　var cubeVerticesBuffer;

　　var cubeVerticesTextureCoordBuffer;

　　var cubeVerticesIndexBuffer;

　　var cubeVerticesIndexBuffer;

　　var cubeRotation = 0.0;

　　var lastCubeUpdateTime = 0;

　　var cubeImage;

　　var cubeTexture;

　　var mvMatrix;

　　var shaderProgram;

　　var vertexPositionAttribute;

　　var vertexNormalAttribute;

　　var textureCoordAttribute;

　　var perspectiveMatrix;

　　//

　　// start

　　//

　　// Called when the canvas is created to get the ball rolling.

　　//

　　function start() {

　　canvas = document.getElementById("glcanvas");

　　initWebGL(canvas); // Initialize the GL context

　　// Only continue if WebGL is available and working

　　if (gl) {

　　gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque

　　gl.clearDepth(1.0); // Clear everything

　　gl.enable(gl.DEPTH_TEST); // Enable depth testing

　　gl.depthFunc(gl.LEQUAL); // Near things obscure far things

　　// Initialize the shaders; this is where all the lighting for the

　　// vertices and so forth is established.

　　initShaders();

　　// Here's where we call the routine that builds all the objects

　　// we'll be drawing.

　　initBuffers();

　　// Next, load and set up the textures we'll be using.

　　// TODO#2 Start

　　cubeTexture = createCubeTexture("Hello World!");

　　// TODO#2 End

　　// Set up to draw the scene periodically.

　　setInterval(drawScene, 15);

　　}

　　}

　　//

　　// initWebGL

　　//

　　// Initialize WebGL, returning the GL context or null if

　　// WebGL isn't available or could not be initialized.

　　//

　　function initWebGL() {

　　gl = null;

　　try {

　　gl = canvas.getContext("experimental-webgl");

　　}

　　catch(e) {

　　}

　　// If we don't have a GL context, give up now

　　if (!gl) {

　　alert("Unable to initialize WebGL. Your browser may not support it.");

　　}

　　}

　　//

　　// initBuffers

　　//

　　// Initialize the buffers we'll need. For this demo, we just have

　　// one object -- a simple two-dimensional cube.

　　//

　　function initBuffers() {

　　// Create a buffer for the cube's vertices.

　　cubeVerticesBuffer = gl.createBuffer();

　　// Select the cubeVerticesBuffer as the one to apply vertex

　　// operations to from here out.

　　gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);

　　// Now create an array of vertices for the cube.

　　var vertices = [

　　// Front face

　　-1.0, -1.0, 1.0,

　　1.0, -1.0, 1.0,

　　1.0, 1.0, 1.0,

　　-1.0, 1.0, 1.0,

　　// Back face

　　-1.0, -1.0, -1.0,

　　-1.0, 1.0, -1.0,

　　1.0, 1.0, -1.0,

　　1.0, -1.0, -1.0,

　　// Top face

　　-1.0, 1.0, -1.0,

　　-1.0, 1.0, 1.0,

　　1.0, 1.0, 1.0,

　　1.0, 1.0, -1.0,

　　// Bottom face

　　-1.0, -1.0, -1.0,

　　1.0, -1.0, -1.0,

　　1.0, -1.0, 1.0,

　　-1.0, -1.0, 1.0,

　　// Right face

　　1.0, -1.0, -1.0,

　　1.0, 1.0, -1.0,

　　1.0, 1.0, 1.0,

　　1.0, -1.0, 1.0,

　　// Left face

　　-1.0, -1.0, -1.0,

　　-1.0, -1.0, 1.0,

　　-1.0, 1.0, 1.0,

　　-1.0, 1.0, -1.0

　　];

　　// Now pass the list of vertices into WebGL to build the shape. We

　　// do this by creating a Float32Array from the JavaScript array,

　　// then use it to fill the current vertex buffer.

　　gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

　　// Set up the normals for the vertices, so that we can compute lighting.

　　cubeVerticesNormalBuffer = gl.createBuffer();

　　gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);

　　var vertexNormals = [

　　// Front

　　0.0, 0.0, 1.0,

　　0.0, 0.0, 1.0,

　　0.0, 0.0, 1.0,

　　0.0, 0.0, 1.0,

　　// Back

　　0.0, 0.0, -1.0,

　　0.0, 0.0, -1.0,

　　0.0, 0.0, -1.0,

　　0.0, 0.0, -1.0,

　　// Top

　　0.0, 1.0, 0.0,

　　0.0, 1.0, 0.0,

　　0.0, 1.0, 0.0,

　　0.0, 1.0, 0.0,

　　// Bottom

　　0.0, -1.0, 0.0,

　　0.0, -1.0, 0.0,

　　0.0, -1.0, 0.0,

　　0.0, -1.0, 0.0,

　　// Right

　　1.0, 0.0, 0.0,

　　1.0, 0.0, 0.0,

　　1.0, 0.0, 0.0,

　　1.0, 0.0, 0.0,

　　// Left

　　-1.0, 0.0, 0.0,

　　-1.0, 0.0, 0.0,

　　-1.0, 0.0, 0.0,

　　-1.0, 0.0, 0.0

　　];

　　gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals),

　　gl.STATIC_DRAW);

　　// Map the texture onto the cube's faces.

　　cubeVerticesTextureCoordBuffer = gl.createBuffer();

　　gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);

　　var textureCoordinates = [

　　// Front

　　0.0, 0.0,

　　1.0, 0.0,

　　1.0, 1.0,

　　0.0, 1.0,

　　// Back

　　0.0, 0.0,

　　1.0, 0.0,

　　1.0, 1.0,

　　0.0, 1.0,

　　// Top

　　0.0, 0.0,

　　1.0, 0.0,

　　1.0, 1.0,

　　0.0, 1.0,

　　// Bottom

　　0.0, 0.0,

　　1.0, 0.0,

　　1.0, 1.0,

　　0.0, 1.0,

　　// Right

　　0.0, 0.0,

　　1.0, 0.0,

　　1.0, 1.0,

　　0.0, 1.0,

　　// Left

　　0.0, 0.0,

　　1.0, 0.0,

　　1.0, 1.0,

　　0.0, 1.0

　　];

　　gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),

　　gl.STATIC_DRAW);

　　// Build the element array buffer; this specifies the indices

　　// into the vertex array for each face's vertices.

　　cubeVerticesIndexBuffer = gl.createBuffer();

　　gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);

　　// This array defines each face as two triangles, using the

　　// indices into the vertex array to specify each triangle's

　　// position.

　　var cubeVertexIndices = [

　　0, 1, 2, 0, 2, 3, // front

　　4, 5, 6, 4, 6, 7, // back

　　8, 9, 10, 8, 10, 11, // top

　　12, 13, 14, 12, 14, 15, // bottom

　　16, 17, 18, 16, 18, 19, // right

　　20, 21, 22, 20, 22, 23 // left

　　]

　　// Now send the element array to GL

　　gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,

　　new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);

　　}

　　//

　　// initTextures

　　//

　　// Initialize the textures we'll be using, then initiate a load of

　　// the texture images. The handleTextureLoaded() callback will finish

　　// the job; it gets called each time a texture finishes loading.

　　//

　　// TODO#1 Start

　　function createCubeTexture(text) {

　　// create a hidden canvas to draw the texture

　　var canvas = document.createElement('canvas');

　　canvas.id = "hiddenCanvas";

　　canvas.width = 512;

　　canvas.height = 512;

　　canvas.style.display = "none";

　　var body = document.getElementsByTagName("body")[0];

　　body.appendChild(canvas);

　　// draw texture

　　var cubeImage = document.getElementById('hiddenCanvas');

　　var ctx = cubeImage.getContext('2d');

　　ctx.beginPath();

　　ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);

　　ctx.fillStyle = 'white';

　　ctx.fill();

　　ctx.fillStyle = 'black';

　　ctx.font = "65px Arial";

　　ctx.textAlign = 'center';

　　ctx.fillText(text, ctx.canvas.width / 2, ctx.canvas.height / 2);

　　ctx.restore();

　　// create new texture

　　var texture = gl.createTexture();

　　gl.bindTexture(gl.TEXTURE_2D, texture);

　　gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

　　gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

　　gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

　　handleTextureLoaded(cubeImage, texture)

　　return texture;

　　}

　　// TODO#1 End

　　function handleTextureLoaded(image, texture) {

　　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, gl.LINEAR);

　　gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

　　gl.generateMipmap(gl.TEXTURE_2D);

　　gl.bindTexture(gl.TEXTURE_2D, null);

　　}

　　//

　　// drawScene

　　//

　　// Draw the scene.

　　//

　　function drawScene() {

　　// Clear the canvas before we start drawing on it.

　　gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

　　// Establish the perspective with which we want to view the

　　// scene. Our field of view is 45 degrees, with a width/height

　　// ratio of 640:480, and we only want to see objects between 0.1 units

　　// and 100 units away from the camera.

　　perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

　　// Set the drawing position to the "identity" point, which is

　　// the center of the scene.

　　loadIdentity();

　　// Now move the drawing position a bit to where we want to start

　　// drawing the cube.

　　mvTranslate([0.0, 0.0, -6.0]);

　　// Save the current matrix, then rotate before we draw.

　　mvPushMatrix();

　　mvRotate(cubeRotation, [1, 0, 1]);

　　// Draw the cube by binding the array buffer to the cube's vertices

　　// array, setting attributes, and pushing it to GL.

　　gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);

　　gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

　　// Set the texture coordinates attribute for the vertices.

　　gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);

　　gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

　　// Bind the normals buffer to the shader attribute.

　　gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);

　　gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);

　　// Specify the texture to map onto the faces.

　　gl.activeTexture(gl.TEXTURE0);

　　gl.bindTexture(gl.TEXTURE_2D, cubeTexture);

　　gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

　　// Draw the cube.

　　gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);

　　setMatrixUniforms();

　　gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

　　// Restore the original matrix

　　mvPopMatrix();

　　// Update the rotation for the next draw, if it's time to do so.

　　var currentTime = (new Date).getTime();

　　if (lastCubeUpdateTime) {

　　var delta = currentTime - lastCubeUpdateTime;

　　cubeRotation += (30 * delta) / 1000.0;

　　}

　　lastCubeUpdateTime = currentTime;

　　}

　　//

　　// initShaders

　　//

　　// Initialize the shaders, so WebGL knows how to light our scene.

　　//

　　function initShaders() {

　　var fragmentShader = getShader(gl, "shader-fs");

　　var vertexShader = getShader(gl, "shader-vs");

　　// Create the shader program

　　shaderProgram = gl.createProgram();

　　gl.attachShader(shaderProgram, vertexShader);

　　gl.attachShader(shaderProgram, fragmentShader);

　　gl.linkProgram(shaderProgram);

　　// If creating the shader program failed, alert

　　if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

　　alert("Unable to initialize the shader program.");

　　}

　　gl.useProgram(shaderProgram);

　　vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");

　　gl.enableVertexAttribArray(vertexPositionAttribute);

　　textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");

　　gl.enableVertexAttribArray(textureCoordAttribute);

　　vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");

　　gl.enableVertexAttribArray(vertexNormalAttribute);

　　}

　　//

　　// getShader

　　//

　　// Loads a shader program by scouring the current document,

　　// looking for a script with the specified ID.

　　//

　　function getShader(gl, id) {

　　var shaderScript = document.getElementById(id);

　　// Didn't find an element with the specified ID; abort.

　　if (!shaderScript) {

　　return null;

　　}

　　// Walk through the source element's children, building the

　　// shader source string.

　　var theSource = "";

　　var currentChild = shaderScript.firstChild;

　　while(currentChild) {

　　if (currentChild.nodeType == 3) {

　　theSource += currentChild.textContent;

　　}

　　currentChildcurrentChild = currentChild.nextSibling;

　　}

　　// Now figure out what type of shader script we have,

　　// based on its MIME type.

　　var shader;

　　if (shaderScript.type == "x-shader/x-fragment") {

　　shader = gl.createShader(gl.FRAGMENT_SHADER);

　　} else if (shaderScript.type == "x-shader/x-vertex") {

　　shader = gl.createShader(gl.VERTEX_SHADER);

　　} else {

　　return null; // Unknown shader type

　　}

　　// Send the source to the shader object

　　gl.shaderSource(shader, theSource);

　　// Compile the shader program

　　gl.compileShader(shader);

　　// See if it compiled successfully

　　if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

　　alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));

　　return null;

　　}

　　return shader;

　　}

　　//

　　// Matrix utility functions

　　//

　　function loadIdentity() {

　　mvMatrix = Matrix.I(4);

　　}

　　function multMatrix(m) {

　　mvMatrixmvMatrix = mvMatrix.x(m);

　　}

　　function mvTranslate(v) {

　　multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());

　　}

　　function setMatrixUniforms() {

　　var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");

　　gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));

　　var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");

　　gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));

　　var normalMatrix = mvMatrix.inverse();

　　normalMatrixnormalMatrix = normalMatrix.transpose();

　　var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");

　　gl.uniformMatrix4fv(nUniform, false, new Float32Array(normalMatrix.flatten()));

　　}

　　var mvMatrixStack = [];

　　function mvPushMatrix(m) {

　　if (m) {

　　mvMatrixStack.push(m.dup());

　　mmvMatrix = m.dup();

　　} else {

　　mvMatrixStack.push(mvMatrix.dup());

　　}

　　}

　　function mvPopMatrix() {

　　if (!mvMatrixStack.length) {

　　throw("Can't pop from an empty matrix stack.");

　　}

　　mvMatrix = mvMatrixStack.pop();

　　return mvMatrix;

　　}

　　function mvRotate(angle, v) {

　　var inRadians = angle * Math.PI / 180.0;

　　var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();

　　multMatrix(m);

　　}

HTML5教程
HTML5 入門：一個最簡單的HTML頁面（doctype、meta、Head、標簽的使用)
HTML5的<!doctype>聲明怎麼寫這是HTML 4.01的doctype：<
html5 利用canvas實現超級瑪麗簡單動畫
最近在學習html5，其中涉及到很關鍵的元素canvas-畫布，在網上下載了一些游戲源代碼，雖然能看
實現自己網站的圖片假水印功能
 --------Web.config----------------<config

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
HTML5移動應用開發第4章：Web Workers來加速您的移動Web應用 實例講解利用HTML5 Canvas API操作圖形旋轉的方法 HTML5+Canvas+CSS3實現齊天大聖孫悟空騰雲駕霧效果 玩轉HTML5移動頁面（優化篇） 10個便利的HTML5/CSS3框架 HTML頁面中添加Canvas標簽示例 html5怎麼使用canvas繪制一張圖片 京東H5廣告精選合集 用hoverclock插件實現HTML5時鐘 純HTML5+CSS3制作生日蛋糕(代碼易懂)
熱門推薦
HTML表格寬度和高度屬性WIDTH、HEIGHT HTML 5設計原理 12個不為大家熟知的HTML5設計小技巧 用canvas畫簡單的“我的世界”人物頭像 5個你不知道的HTML5的接口介紹 玩轉html5<canvas>畫圖 HTML5 audio標簽使用js進行播放控制實例 HTML5 視頻處理 、 音頻處理 使用HTML5的File實現base64和圖片的互轉
大家都在看
javascript面向對象之定義成員方法實例教程分析 JS使用正則表達式除去字符串中重復字符的方法 BBS形式的購物分享網站是互聯網發展的必然趨勢 用css3繪制你需要的幾何圖形 JavaScript教程：伸縮菜單的制作 margin CSS邊外距 屬性教程 HTML5技術教程 手指按下和手指抬起觸發事件 一款基jquery超炫的動畫導航菜單可響應單擊事件
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved