通过姓名查询个人信息户口查询网上查询
点击联系发帖人
时间：2018-02-18 22:51
热销排行榜
1.2.3.4.5.6.7.8.9.10.
最近浏览的其他商品
浏览更多同类商品
【 】??????????
HTML5与WebGL编程
图灵程序设计丛书
978-7-115-42133-3
人民邮电出版社
出版日期：
读者对象：
￥56.90&&&
立刻节省：￥22.10
现在有货,只剩下6本
所属分类：
本书介绍如何使用HTML5相关技术，如CSS3和新兴的Web图形标准WebGL，来创建具有高性能、震撼视觉效果的3D Web应用。书中内容分为两部分――基础知识和应用开发技术，不但提供了全面的理论介绍，还包括从简单3D产品可视化到沉浸式游戏及交互训练系统的实践，适合转向3D开发的Web开发人员阅读。?探索HML5 API及创建3D Web图形的相关技术，包括WebGL、Canvas和CSS?使用流行的JavaScript 3D渲染和动画库Three.js及Tween.js?研究3D内容创作流程，创建杀手级3D内容的建模和动画工具?介绍构建3D应用的游戏引擎和框架，包括作者的Vizi框架?使用示例及支持代码，创建有多个物体和复杂交互的3D场景?分析移动浏览器中的WebGL 3D应用会遇到的问题
本书全面讲解了使用HTML5和WebGL开发3D应用的Web技术，理论与实践相结合，涵盖桌面和移动两端。全书分两部分：基础知识和应用开发。在详细介绍开发相关理论、工具、框架和库的基础上，作者通过3D产品浏览器、游戏和交互培训系统等案例，生动讲解了3D应用开发的全过程。本书适合中高级Web及页游开发人员阅读。
作者:[美]帕里西（Tony Parisi） 译者:潘征Tony ParisiWeb 3D标准的先驱、企业家、CTO、架构师。VRML和X3D语言的联合作者，这两者已经成为Web 3D图形的ISO标准。另著有《WebGL入门指南》。潘征网名此方，目前就职于百度FEX前端研发团队，专注前端复杂应用研发。
目录前言 xi第一部分 基础知识第1章 绪论 21.1 HTML5：新型的视觉媒介 41.1.1 浏览器平台 41.1.2 浏览器支持情况 61.2 3D图形的基础知识 61.2.1 什么是3D 61.2.2 3D坐标系 71.2.3 网格、多边形与顶点 81.2.4 材质、纹理与光源 91.2.5 变换与矩阵 91.2.6 相机、透视、视口与投影 101.2.7 着色器 11第2章 WebGL：实时3D渲染 132.1 WebGL基础 142.2 WebGL API 152.3 WebGL应用剖析 162.4 一个简单的WebGL示例 162.4.1 Canvas 元素和WebGL 绘图上下文 172.4.2 视口 182.4.3 缓冲、缓冲数组和类型化数组 182.4.4 矩阵 192.4.5 着色器 202.4.6 绘制图元 222.5 创建3D几何体 232.6 添加动画 272.7 使用纹理映射 282.8 小结 34第3 章 Three.js――一款JavaScript 3D引擎 353.1 使用Three.js创建的代表性项目 353.2 Three.js概览 383.2.1 初始化Three.js 403.2.2 Three.js工程结构 403.3 一个简单的Three.js程序 413.3.1 创建渲染器 433.3.2 创建场景 433.3.3 运行循环的实现 453.3.4 为场景添加光照 463.4 小结 48第4章 Three.js中的图形和渲染 494.1 几何图形和网格 494.1.1 预置的几何形状类型 494.1.2 路径、形状和挤出 504.1.3 几何形状基础类 524.1.4 用于优化网格渲染的BufferGeometry 554.1.5 从建模软件包中导入网格数据 564.2 场景图和空间变换的层级结构 574.2.1 利用场景图来管理复杂场景 574.2.2 Three.js 中的场景图 574.2.3 平移、旋转和缩放的表示 614.3 材质 614.3.1 标准网格材质 614.3.2 使用多重纹理增添逼真效果 634.4 光源 674.5 阴影 694.6 着色器 734.6.1 ShaderMaterial类：编写你自己的着色器代码 744.6.2 在Three.js 中使用GLSL着色器代码 754.7 渲染 784.7.1 后处理和多道渲染 794.7.2 延迟渲染 804.8 小结 80第5章 3D动画 815.1 使用requestAnimationFrame()来驱动动画 825.1.1 在你的应用中使用requestAnimationFrame() 835.1.2 requestAnimationFrame()和性能 845.1.3 基于帧的动画和基于时间的动画 855.2 使用程序更新属性的方式来构建动画 855.3 使用补间来进行动画过渡 875.3.1 插值 875.3.2 Tween.js库 885.3.3 缓动 905.4 使用关键帧来实现复杂动画 915.4.1 Keyframe.js――一个简单的帧动画通用库 925.4.2 使用关键帧创建关节动画 945.5 使用曲线和路径创建平滑自然的运动 965.6 使用变形目标来创建人物和面部动画 995.7 使用蒙皮来构建角色动画 1005.8 使用着色器来进行动画 1045.9 小结 109第6章 CSS3：高级页面效果 1106.1 CSS变换 1126.1.1 使用3D变换 1136.1.2 添加透视 1156.1.3 创建变换层级 1176.1.4 控制背面渲染 1196.1.5 CSS变换属性汇总 1226.2 CSS过渡 1226.3 CSS动画 1276.4 挑战CSS的极限 1306.4.1 渲染3D物体 1306.4.2 渲染3D环境 1326.4.3 使用CSS自定义滤镜来实现高级着色器效果 1346.4.4 用Three.js来渲染CSS 3D 1356.5 小结 135第7章 Canvas：通用2D绘图 1377.1 Canvas基础 1377.1.1 Canvas元素和2D绘图上下文 1387.1.2 Canvas API的功能 1397.2 使用Canvas API来渲染3D 1447.3 基于Canvas渲染的3D库 1477.3.1 K3D 1477.3.2 Three.js的Canvas渲染 1487.4 小结 153第二部分 应用开发技术第8 章 3D内容制作流程 1568.1 3D内容创建过程 1568.1.1 建模1578.1.2 纹理映射 1578.1.3 动画 1588.1.4 技术美工 1598.2 3D建模和动画工具 1608.2.1 传统3D软件 1608.2.2 基于浏览器的集成环境 1648.2.3 3D内容仓库和现成素材 1678.3 3D文件格式 1688.3.1 模型格式 1688.3.2 动画格式 1708.3.3 全功能的场景格式 1718.4 加载3D内容到WebGL应用中 1788.4.1 Three.js JSON格式 1798.4.2 Three.js的二进制格式 1848.4.3 使用Three.js来加载COLLADA场景 1858.4.4 使用Three.js来加载gITF场景 1888.5 小结 189第9章 3D引擎和框架 1909.1 3D框架概念 1919.1.1 什么是框架 1919.1.2 WebGL框架需求 1929.2 WebGL框架概况 1949.2.1 游戏引擎 1949.2.2 展示框架 1969.3 Vizi：一个基于组件的用于可视化Web应用的框架 1989.3.1 背景和设计理念 1999.3.2 Vizi架构 2009.3.3 Vizi入门 2019.3.4 一个Vizi应用示例 2029.4 小结 207第10章 开发一个简单的3D应用 20910.1 设计应用 21110.2 创建3D 内容 21210.2.1 导出Maya场景到COLLADA 21310.2.2 将COLLADA文件转换glTF格式 21410.3 预览和测试3D内容 21410.3.1 基于Vizi的预览工具 21410.3.2 Vizi查看器类 21610.3.3 Vizi加载类 21710.4 将3D集成到应用中 22010.5 开发3D行为和交互 22310.5.1 Vizi 场景图API方法：findNode()和map() 22310.5.2 使用Vizi.FadeBehavior来动画透明度 22510.5.3 使用Vizi.RotateBehavior来自动旋转内容 22710.5.4 使用Vizi.Picker来实现鼠标悬停时显示信息 22710.5.5 使用用户界面来控制动画 22910.5.6 使用颜色选择器来改变颜色 23010.6 小结 232第11章 开发一个3D环境 23311.1 创建环境素材 23511.2 预览和测试环境 23611.2.1 以第一人称模式预览场景 23711.2.2 检查场景图 23711.2.3 检查对象属性 24011.2.4 显示边界框 24211.2.5 预览多个对象 24411.2.6 使用预览工具来查找场景中的其他问题 24611.3 使用skybox创建一个3D背景 24711.3.1 3D skybox 24711.3.2 Vizi skybox对象 24811.4 集成3D内容到应用中 25011.4.1 加载和初始化场景 25011.4.2 加载和初始化车模型 25311.5 实现第一人称导航 25511.5.1 相机控制器 25611.5.2 第一人称控制器中的数学 25711.5.3 鼠标视角 25811.5.4 简单碰撞检测 25911.6 使用多个相机 26011.7 创建定时的动画过渡 26211.8 对象行为脚本 26311.8.1 基于Vizi.Script实现自定义组件 26411.8.2 驾驶车的控制器脚本 26411.9 给环境添加声音 27011.10 渲染动态纹理 27211.11 小结 276第12章 开发移动3D应用 27812.1 移动3D平台 27812.2 为移动浏览器开发 28012.2.1 增加触摸支持 28112.2.2 在桌面版Chrome上调试移动功能 28512.3 创建Web应用 28712.3.1 Web应用开发和测试工具 28712.3.2 打包成Web应用来发布 28812.4 开发原生/HTML5混合应用 28912.4.1 CocoonJS：一种为移动设备构建HTML游戏及应用的技术 29012.4.2 使用CocoonJS 组装应用 29212.4.3 WebGL混合开发：问题 29812.5 移动3D性能 29812.6 小结 300附录 资源 301作者介绍 311封面介绍 311
客服专线：010- 客服邮箱：
Copyright & 北发图书网 2007,
All Rights Reserved
北京北发电子商务股份有限公司 版权所有您还可以使用以下方式登录
当前位置：&>&&>&&>& > 在支持HTML5的浏览器上运行WebGL程序的方法
在支持HTML5的浏览器上运行WebGL程序的方法
& 前提条件和预期结果 目前只有少数的浏览器支持 WebGL ，请看我的另外一篇文章：Can I use WebGL?. 下面的例子是在 Windows 下的 Chrome 16/23 以及 Android 下的 Firefox 17
进行测试。如果你使用的是非兼容浏览器访问则会弹出一个警告。 图1：包含 Hello world 文本的动画的 WebGL 立方体 在兼容 HTML5 的浏览器上，你将会看到如下图所示的带动画效果的立方体： 图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.htmXML/HTML Code复制内容到剪贴板
&title&WebGL - Hello World!&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&script src=&sylvester.js& type=&text/javascript&&&/script&
&script src=&glUtils.js& type=&text/javascript&&&/script&
&script src=&webgl-demo.js& type=&text/javascript&&&/script&
&!-- Fragment shader program --&
&script id=&shader-fs& type=&x-shader/x-fragment&&
varying highp vec2 vTextureC
varying highp vec3 vL
uniform sampler2D uS
void main(void) {
highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
&!-- Vertex shader program --&
&script id=&shader-vs& type=&x-shader/x-vertex&&
attribute highp vec3 aVertexN
attribute highp vec3 aVertexP
attribute highp vec2 aTextureC
uniform highp mat4 uNormalM
uniform highp mat4 uMVM
uniform highp mat4 uPM
varying highp vec2 vTextureC
varying highp vec3 vL
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureC
// Apply lighting effect
highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLighting = ambientLight + (directionalLightColor * directional);
&body onload=&start()&&
&canvas id=&glcanvas& width=&640& height=&480&&
Your browser doesn't appear to support the HTML5 &code&&canvas&&/code& element.
&/html& // File #02: webgl-demo.js XML/HTML Code复制内容到剪贴板 var cubeVerticesB var cubeVerticesTextureCoordB var cubeVerticesIndexB var cubeVerticesIndexB var cubeRotation = 0.0; var lastCubeUpdateTime = 0; var cubeI var cubeT var mvM var shaderP var vertexPositionA var vertexNormalA var textureCoordA var perspectiveM // // 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 // In 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 = 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
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 // 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) } // 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 - lastCubeUpdateT cubeRotation += (30 * delta) / 1000.0; } lastCubeUpdateTime = currentT } // // 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) { } // Walk through the source element's children, building the // shader source string. var theSource = &&; var currentChild = shaderScript.firstC while(currentChild) { if (currentChild.nodeType == 3) { theSource += currentChild.textC } currentChildcurrentChild = currentChild.nextS } // Now figure out what type of shader script we have, // based on its MIME type. 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 { // 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)); } } // // 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 mvM } 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); }
欢迎转载：
推荐： }
1.2.3.4.5.6.7.8.9.10.
最近浏览的其他商品
浏览更多同类商品
【 】??????????
HTML5与WebGL编程
图灵程序设计丛书
978-7-115-42133-3
人民邮电出版社
出版日期：
读者对象：
￥56.90&&&
立刻节省：￥22.10
现在有货,只剩下6本
所属分类：
本书介绍如何使用HTML5相关技术，如CSS3和新兴的Web图形标准WebGL，来创建具有高性能、震撼视觉效果的3D Web应用。书中内容分为两部分――基础知识和应用开发技术，不但提供了全面的理论介绍，还包括从简单3D产品可视化到沉浸式游戏及交互训练系统的实践，适合转向3D开发的Web开发人员阅读。?探索HML5 API及创建3D Web图形的相关技术，包括WebGL、Canvas和CSS?使用流行的JavaScript 3D渲染和动画库Three.js及Tween.js?研究3D内容创作流程，创建杀手级3D内容的建模和动画工具?介绍构建3D应用的游戏引擎和框架，包括作者的Vizi框架?使用示例及支持代码，创建有多个物体和复杂交互的3D场景?分析移动浏览器中的WebGL 3D应用会遇到的问题
本书全面讲解了使用HTML5和WebGL开发3D应用的Web技术，理论与实践相结合，涵盖桌面和移动两端。全书分两部分：基础知识和应用开发。在详细介绍开发相关理论、工具、框架和库的基础上，作者通过3D产品浏览器、游戏和交互培训系统等案例，生动讲解了3D应用开发的全过程。本书适合中高级Web及页游开发人员阅读。
作者:[美]帕里西（Tony Parisi） 译者:潘征Tony ParisiWeb 3D标准的先驱、企业家、CTO、架构师。VRML和X3D语言的联合作者，这两者已经成为Web 3D图形的ISO标准。另著有《WebGL入门指南》。潘征网名此方，目前就职于百度FEX前端研发团队，专注前端复杂应用研发。
目录前言 xi第一部分 基础知识第1章 绪论 21.1 HTML5：新型的视觉媒介 41.1.1 浏览器平台 41.1.2 浏览器支持情况 61.2 3D图形的基础知识 61.2.1 什么是3D 61.2.2 3D坐标系 71.2.3 网格、多边形与顶点 81.2.4 材质、纹理与光源 91.2.5 变换与矩阵 91.2.6 相机、透视、视口与投影 101.2.7 着色器 11第2章 WebGL：实时3D渲染 132.1 WebGL基础 142.2 WebGL API 152.3 WebGL应用剖析 162.4 一个简单的WebGL示例 162.4.1 Canvas 元素和WebGL 绘图上下文 172.4.2 视口 182.4.3 缓冲、缓冲数组和类型化数组 182.4.4 矩阵 192.4.5 着色器 202.4.6 绘制图元 222.5 创建3D几何体 232.6 添加动画 272.7 使用纹理映射 282.8 小结 34第3 章 Three.js――一款JavaScript 3D引擎 353.1 使用Three.js创建的代表性项目 353.2 Three.js概览 383.2.1 初始化Three.js 403.2.2 Three.js工程结构 403.3 一个简单的Three.js程序 413.3.1 创建渲染器 433.3.2 创建场景 433.3.3 运行循环的实现 453.3.4 为场景添加光照 463.4 小结 48第4章 Three.js中的图形和渲染 494.1 几何图形和网格 494.1.1 预置的几何形状类型 494.1.2 路径、形状和挤出 504.1.3 几何形状基础类 524.1.4 用于优化网格渲染的BufferGeometry 554.1.5 从建模软件包中导入网格数据 564.2 场景图和空间变换的层级结构 574.2.1 利用场景图来管理复杂场景 574.2.2 Three.js 中的场景图 574.2.3 平移、旋转和缩放的表示 614.3 材质 614.3.1 标准网格材质 614.3.2 使用多重纹理增添逼真效果 634.4 光源 674.5 阴影 694.6 着色器 734.6.1 ShaderMaterial类：编写你自己的着色器代码 744.6.2 在Three.js 中使用GLSL着色器代码 754.7 渲染 784.7.1 后处理和多道渲染 794.7.2 延迟渲染 804.8 小结 80第5章 3D动画 815.1 使用requestAnimationFrame()来驱动动画 825.1.1 在你的应用中使用requestAnimationFrame() 835.1.2 requestAnimationFrame()和性能 845.1.3 基于帧的动画和基于时间的动画 855.2 使用程序更新属性的方式来构建动画 855.3 使用补间来进行动画过渡 875.3.1 插值 875.3.2 Tween.js库 885.3.3 缓动 905.4 使用关键帧来实现复杂动画 915.4.1 Keyframe.js――一个简单的帧动画通用库 925.4.2 使用关键帧创建关节动画 945.5 使用曲线和路径创建平滑自然的运动 965.6 使用变形目标来创建人物和面部动画 995.7 使用蒙皮来构建角色动画 1005.8 使用着色器来进行动画 1045.9 小结 109第6章 CSS3：高级页面效果 1106.1 CSS变换 1126.1.1 使用3D变换 1136.1.2 添加透视 1156.1.3 创建变换层级 1176.1.4 控制背面渲染 1196.1.5 CSS变换属性汇总 1226.2 CSS过渡 1226.3 CSS动画 1276.4 挑战CSS的极限 1306.4.1 渲染3D物体 1306.4.2 渲染3D环境 1326.4.3 使用CSS自定义滤镜来实现高级着色器效果 1346.4.4 用Three.js来渲染CSS 3D 1356.5 小结 135第7章 Canvas：通用2D绘图 1377.1 Canvas基础 1377.1.1 Canvas元素和2D绘图上下文 1387.1.2 Canvas API的功能 1397.2 使用Canvas API来渲染3D 1447.3 基于Canvas渲染的3D库 1477.3.1 K3D 1477.3.2 Three.js的Canvas渲染 1487.4 小结 153第二部分 应用开发技术第8 章 3D内容制作流程 1568.1 3D内容创建过程 1568.1.1 建模1578.1.2 纹理映射 1578.1.3 动画 1588.1.4 技术美工 1598.2 3D建模和动画工具 1608.2.1 传统3D软件 1608.2.2 基于浏览器的集成环境 1648.2.3 3D内容仓库和现成素材 1678.3 3D文件格式 1688.3.1 模型格式 1688.3.2 动画格式 1708.3.3 全功能的场景格式 1718.4 加载3D内容到WebGL应用中 1788.4.1 Three.js JSON格式 1798.4.2 Three.js的二进制格式 1848.4.3 使用Three.js来加载COLLADA场景 1858.4.4 使用Three.js来加载gITF场景 1888.5 小结 189第9章 3D引擎和框架 1909.1 3D框架概念 1919.1.1 什么是框架 1919.1.2 WebGL框架需求 1929.2 WebGL框架概况 1949.2.1 游戏引擎 1949.2.2 展示框架 1969.3 Vizi：一个基于组件的用于可视化Web应用的框架 1989.3.1 背景和设计理念 1999.3.2 Vizi架构 2009.3.3 Vizi入门 2019.3.4 一个Vizi应用示例 2029.4 小结 207第10章 开发一个简单的3D应用 20910.1 设计应用 21110.2 创建3D 内容 21210.2.1 导出Maya场景到COLLADA 21310.2.2 将COLLADA文件转换glTF格式 21410.3 预览和测试3D内容 21410.3.1 基于Vizi的预览工具 21410.3.2 Vizi查看器类 21610.3.3 Vizi加载类 21710.4 将3D集成到应用中 22010.5 开发3D行为和交互 22310.5.1 Vizi 场景图API方法：findNode()和map() 22310.5.2 使用Vizi.FadeBehavior来动画透明度 22510.5.3 使用Vizi.RotateBehavior来自动旋转内容 22710.5.4 使用Vizi.Picker来实现鼠标悬停时显示信息 22710.5.5 使用用户界面来控制动画 22910.5.6 使用颜色选择器来改变颜色 23010.6 小结 232第11章 开发一个3D环境 23311.1 创建环境素材 23511.2 预览和测试环境 23611.2.1 以第一人称模式预览场景 23711.2.2 检查场景图 23711.2.3 检查对象属性 24011.2.4 显示边界框 24211.2.5 预览多个对象 24411.2.6 使用预览工具来查找场景中的其他问题 24611.3 使用skybox创建一个3D背景 24711.3.1 3D skybox 24711.3.2 Vizi skybox对象 24811.4 集成3D内容到应用中 25011.4.1 加载和初始化场景 25011.4.2 加载和初始化车模型 25311.5 实现第一人称导航 25511.5.1 相机控制器 25611.5.2 第一人称控制器中的数学 25711.5.3 鼠标视角 25811.5.4 简单碰撞检测 25911.6 使用多个相机 26011.7 创建定时的动画过渡 26211.8 对象行为脚本 26311.8.1 基于Vizi.Script实现自定义组件 26411.8.2 驾驶车的控制器脚本 26411.9 给环境添加声音 27011.10 渲染动态纹理 27211.11 小结 276第12章 开发移动3D应用 27812.1 移动3D平台 27812.2 为移动浏览器开发 28012.2.1 增加触摸支持 28112.2.2 在桌面版Chrome上调试移动功能 28512.3 创建Web应用 28712.3.1 Web应用开发和测试工具 28712.3.2 打包成Web应用来发布 28812.4 开发原生/HTML5混合应用 28912.4.1 CocoonJS：一种为移动设备构建HTML游戏及应用的技术 29012.4.2 使用CocoonJS 组装应用 29212.4.3 WebGL混合开发：问题 29812.5 移动3D性能 29812.6 小结 300附录 资源 301作者介绍 311封面介绍 311
客服专线：010- 客服邮箱：
Copyright & 北发图书网 2007,
All Rights Reserved
北京北发电子商务股份有限公司 版权所有您还可以使用以下方式登录
当前位置：&>&&>&&>& > 在支持HTML5的浏览器上运行WebGL程序的方法
在支持HTML5的浏览器上运行WebGL程序的方法
& 前提条件和预期结果 目前只有少数的浏览器支持 WebGL ，请看我的另外一篇文章：Can I use WebGL?. 下面的例子是在 Windows 下的 Chrome 16/23 以及 Android 下的 Firefox 17
进行测试。如果你使用的是非兼容浏览器访问则会弹出一个警告。 图1：包含 Hello world 文本的动画的 WebGL 立方体 在兼容 HTML5 的浏览器上，你将会看到如下图所示的带动画效果的立方体： 图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.htmXML/HTML Code复制内容到剪贴板
&title&WebGL - Hello World!&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&script src=&sylvester.js& type=&text/javascript&&&/script&
&script src=&glUtils.js& type=&text/javascript&&&/script&
&script src=&webgl-demo.js& type=&text/javascript&&&/script&
&!-- Fragment shader program --&
&script id=&shader-fs& type=&x-shader/x-fragment&&
varying highp vec2 vTextureC
varying highp vec3 vL
uniform sampler2D uS
void main(void) {
highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
&!-- Vertex shader program --&
&script id=&shader-vs& type=&x-shader/x-vertex&&
attribute highp vec3 aVertexN
attribute highp vec3 aVertexP
attribute highp vec2 aTextureC
uniform highp mat4 uNormalM
uniform highp mat4 uMVM
uniform highp mat4 uPM
varying highp vec2 vTextureC
varying highp vec3 vL
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureC
// Apply lighting effect
highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLighting = ambientLight + (directionalLightColor * directional);
&body onload=&start()&&
&canvas id=&glcanvas& width=&640& height=&480&&
Your browser doesn't appear to support the HTML5 &code&&canvas&&/code& element.
&/html& // File #02: webgl-demo.js XML/HTML Code复制内容到剪贴板 var cubeVerticesB var cubeVerticesTextureCoordB var cubeVerticesIndexB var cubeVerticesIndexB var cubeRotation = 0.0; var lastCubeUpdateTime = 0; var cubeI var cubeT var mvM var shaderP var vertexPositionA var vertexNormalA var textureCoordA var perspectiveM // // 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 // In 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 = 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
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 // 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) } // 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 - lastCubeUpdateT cubeRotation += (30 * delta) / 1000.0; } lastCubeUpdateTime = currentT } // // 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) { } // Walk through the source element's children, building the // shader source string. var theSource = &&; var currentChild = shaderScript.firstC while(currentChild) { if (currentChild.nodeType == 3) { theSource += currentChild.textC } currentChildcurrentChild = currentChild.nextS } // Now figure out what type of shader script we have, // based on its MIME type. 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 { // 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)); } } // // 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 mvM } 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); }
欢迎转载：
推荐： }
我要回帖
更多推荐
- ·支付宝扫描商品能验真假吗能扫码辨别真伪吗？
- ·儿童助听器验配在验配时注意什么？一起帮解答
- ·有哪位老板买过亿堡的坚果品牌十大排名原料吗？跟别的品牌有区别吗
- ·空气能温差多少比较合适热泵以节能著称，实际使用过程中真的节能省钱么？
- ·在颂商法律优化未完成，微信支付宝被法院冻结了怎么解冻冻结怎么办？
- ·达尔优的达尔优机械键盘驱动和雷柏的达尔优机械键盘驱动相比哪个比较好
- ·乐视高清乐视体感摄像头怎么用在X60上面不能用啊，为什么求解答
- ·诺基亚失败案例7录制视频失败怎么回事
- ·求天赋异禀7百度云资源百度云资源、谢谢
- ·新人求助，轴承外圈与孔配合公差卡住了
- ·哺乳乳晕里面有硬块疼右上芳能摸到可左右移动的硬块是否严重
- ·实用旅游小贴士 实用家里的宽带多少兆才够用
- ·重装机兵3迷失自我4有一个npc问我是来抢缪特的吗什么
- ·荷兰佛山高防服务器器为什么很受欢迎
- ·手机网络远程监控软件是如何安装的？
- ·过年的时候微信可以加个抢红包的微信群吗
- ·努比亚my布拉格布拉格S 全网通最低价格多少钱
- ·过年不短信微信网络群发短信平台拜年的人是不是很不好
- ·iphone 可不可以同时用蓝牙耳机音质比有线差和有线耳机
- ·哪个大神可以用会用小米路由HD建饥荒大神视频服务器
- ·通过姓名查询个人信息户口查询网上查询
- ·微信群微信红包怎么抢最大样抢最大
- ·小米售后检测要钱吗能远程检测吗
- ·QQ上面有没有微信摇一摇抽奖
- ·苹果iphone设置个性铃声个性功能有哪些
- ·捡了一个捡到的小米手机刷机机了可以用吗.现在是锁着的
- ·搜狐新闻是怎么赚钱的，搜狐新闻赚钱能能微信提现的赚钱游戏吗
- ·求超级恋人百度云资源网盘资源
- ·oppor829t手机刷机 能刷小米系统么
- ·救命呀，为什么我的小iphone4越狱方法以后一直无限重
- ·2K的戴尔显示器样机能买么能玩吗
- ·微信春节红包包活动有微信吗
- ·王者荣耀ios转移号流程怎么算第
- ·为什么新买的苹果6sp哪个系统最好是最新系统？
- ·为什么我的语音包队友吃鸡听不见队友声音，只能自己听
