求教：webGL中文网怎么样_webgl吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：448贴子：
求教：webGL中文网怎么样收藏
rt，他是要收费的，主要看中了他的那个大型游戏和性能优化，吧友有用过的吗？这个钱花得值不值？真心求教！
冷暖辐射板节能,运营成本低,温度分布均匀,是高大空间建筑采暖的最佳选择!
我感觉不值
挺扯淡的。
为毛？我看的初级教程感觉挺好啊
还不如去看参考手册算了。
虽然网站是清华大学的学生开发的，但是水平也不咋样。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或WebGL数据制作流程及加载
随着科技的不断进步和客户需求不断提高，无插件客户端WebGL已慢慢成为主流。那么WebGL的数据如何制作?如何加载数据?接下来我会为大家一一解开这些迷惑。下面我将介绍WebGL的数据制作和加载的一个流程。
1、模型制作并导出
在3dsmax 里面建好模型，咱们在3dsmax里面建模有一定的要求，该链接里面的文档详细的记录了建模规范。在建好模型之后需要用到我们的超图max插件将模型导出为一个CAD数据集。
超图max插件导出示意图
导出参数设置
注：纹理路径：贴图需要和max文件放在一起，然后纹理路径设置其贴图路径即可。
数据源文件路径：这个需要在iDesktop里面新建一个数据源，然后关闭该数据源。在这里导入该数据源，新建一个数据集，输入名字即可。
2、生成缓存
在iDesktop中打开该数据源，并将刚刚生成的数据集添加到场景中，调整到合适相机下，保存场景。如下图：
保存完了之后在工作空间管理器的场景节点下就能看到保存了的场景名字;然后鼠标右键，生成场景缓存。
生成场景缓存
生成缓存参数设置
注：这里选择缓存类型时必须选择OSGB格式的缓存，其他默认即可。8.1.0的WebGL添加的数据为OSGB格式的，而以下版本则需要手动将OSGB转成S3M格式的。
3、发布服务
生成缓存之后现在我们就需要发布服务了。用上诉方式生成的场景缓存会自动生成一个工作空间，在发布服务的时候我们只需要选择该工作空间即可。
选择完工作空间，下一步选择三维服务
点击下一步即可完成服务的发布。
4、添加数据到WebGL
发布数据完了之后，在服务管理里面找到刚刚发布的服务，然后打开地址，在realspace下面点击datas，找到对应的三维数据集点击一下图层名，然后就会显示该图层的一些属性，这个时候需要再点击获取三维数据的配置文件。这个时候地址复制地址栏的地址。
现在获取到数据的地址，接下来我们就需要加载数据了。加载数据的方式有以下两种：
A、在产品安装包中找到S3MTiles.html，具体位置如下图：
用已有的工具编辑该html
将上面得到的地址复制给这个url，然后保存。在中输入http://localhost:8090/iserver/iClient/for3D/webgl/examples/S3MTiles.html即可看到模型
B、在iserver主页里面找到SuperMapEarth
然后弹出的页面中输入上面获取到的地址，输入名字，点击确定即可
以上就是简单介绍从数据制作到添加到WebGL中的过程。如在使用过程中遇到什么问题请及时联系。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
作者：佚名
字体：[ ] 来源：互联网 时间：01-31 10:58:21
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件,看到此处是不是感觉特别惊讶啊，WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件。WebGL同canvas 2D的API一样，都是通过脚本操纵对象，所以步骤也是基本相似：准备工作上下文，准备数据，在canvas中绘制对象并渲染。与2D不同的就是3D涉及的知识更多了，例如世界、光线、纹理、相机、矩阵等专业知识。WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容。
浏览器的支持由于微软有自己的图形发展计划，一直不支持WebGL，所以IE目前除了安装插件外，是无法运行WebGL的。其他的主流浏览器如Chrome、FireFox、Safari、Opera等，都装上最新的版本就可以了。除了浏览器要装最新的外，还要保证显卡的驱动也是最新的。装上这些以后，可以打开浏览器，输入下面的网址验证一下浏览器对WebGL的支持情况：http://webglreport.sourceforge.net/。
在正常安装以上浏览器之后还是不能运行WebGL，那你可以强制开启WebGL支持试一试。开启方法如下：Chrome浏览器我们需要为Chrome加入一些启动参数，以下具体操作步骤以Windows操作系统为例：找到Chrome浏览器的快捷方式，右键点击快捷方式，选择属性；在目标框内，chrome.exe后面的引号后面，加入以下内容：
--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files
点击确定后关闭Chrome，然后用此快捷方式启动Chrome浏览器。几个参数的含义如下：--enable-webgl的意思是开启WebGL支持；--ignore-gpu-blacklist的意思是忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL；--allow-file-access-from-files的意思是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不添加这个参数。
Firefox浏览器Firefox的用户请在浏览器的地址栏输入&about:config&，回车，然后在过滤器（filter）中搜索&webgl&，将webgl.force-enabled设置为true；将webgl.disabled设置为false；在过滤器（filter）中搜索&security.fileuri.strict_origin_policy&，将security.fileuri.strict_origin_policy设置为false；然后关闭目前开启的所有Firefox窗口，重新启动Firefox。前两个设置是强制开启WebGL支持，最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不设置此项。
Safari浏览器在菜单中找到&属性&&&高级&，选中&显示开发菜单&，然后到&开发&菜单，选中&开启WebGL&。
下面的代码只是简单总结一下相关的概念，它来源于参考中的中文教程，涉及较多的3D方面的知识。感兴趣的同学直接可以跳到实用参考中的中文教程中学习，比我这里讲解的要详细和准确的多。凑热闹的同学简单看看就可以了，不用深究每一行代码的含义。
准备工作这个不用说了，就是在页面上添加一个canvas元素作为渲染的容器。例如：代码如下:&bodyonload="start()"&&canvasid="glcanvas"width="640"height="480"&Yourbrowserdoesn'tappeartosupporttheHTML5canvaselement.&/canvas&&/body& 下面就是正式开始写脚本的时候了，首先看一下程序入口以及整体结构：代码如下:functionstart(){varcanvas=document.getElementById("glcanvas");initGL(canvas);initShaders();initBuffers();gl.clearColor(0.0,0.0,0.0,1.0);gl.enable(gl.DEPTH_TEST);drawScene();} 这里的几个方法代表了典型的WebGL的绘制步骤：步骤一：初始化WebGL工作环境 - initGL这个方法的代码如下：代码如下:functioninitGL(canvas){gl=try{//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");}catch(e){} //Ifwedon'thaveaGLcontext,giveupnowif(!gl){alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");}} 这个方法很简单，就是获取WebGL的绘制环境，需要把参数&webgl&传给canvas.getContext方法就行了，但是由于目前WebGL的标准没有最终定型，所以实验阶段用的参数都是&experimental-webgl&。当然你直接去调用canvas.getContext(&experimental-webgl&)也是可以的，等标准定下以后，你再修改一个代码。
步骤二：初始化着色器Shaders - initShaders着色器Shader概念比较简单，说白了就是显卡运算指令。构造3D场景需要进行大量的颜色、位置等等信息的计算，如果这些计算由软件执行的话，速度会很慢。所以把这些运算让显卡去计算，速度就很快；如何去执行这些计算，就是由着色器指定的。着色器代码是用一种叫做GLSL的着色器语言编写的，这个我们不去讲述这个语言了。着色器可以在html中定义，在代码中使用。当然了你在程序中用一个字符串去定义着色器也是一样的。下面先看定义的部分：代码如下:&scriptid="shader-fs"type="x-shader/x-fragment"&pvaryingvec4vCvoidmain(void){gl_FragColor=vC}&/script&&scriptid="shader-vs"type="x-shader/x-vertex"&attributevec3aVertexPattributevec4aVertexCuniformmat4uMVMuniformmat4uPMvaryingvec4vCvoidmain(void){gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);vColor=aVertexC}&/script& 这里有两个着色器：面着色器和顶点着色器。关于这两个着色器，这里有必要说明一下，计算机中的3D模型基本都是由点结合三角面片去描述的，顶点着色器就是去处理这些点的数据，而面着色器就是通过插值的方式，去处理三角面片上点的数据。上面定义的顶点着色器就定义了顶点的位置和颜色计算方式；而面着色器定义了插值点的颜色计算方式。实际的应用场景中，还会涉及到在着色器中处理光线等效果。定义了着色器，在程序中就可以查找到它们并可以去使用：代码如下:varshaderPfunctioninitShaders(){varfragmentShader=getShader(gl,"shader-fs");varvertexShader=getShader(gl,"shader-vs");shaderProgram=gl.createProgram();gl.attachShader(shaderProgram,vertexShader);gl.attachShader(shaderProgram,fragmentShader);gl.linkProgram(shaderProgram);if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){alert("Couldnotinitialiseshaders");}gl.useProgram(shaderProgram);shaderProgram.vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition");gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram,"aVertexColor");gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");} 着色器是有了，但是怎么让显卡去执行，Program就是这种桥梁，它是WebGL原生的二进制码，它的作用基本上就是让显卡运行着色器代码去渲染指定的模型数据。这里还用到一个辅助方法getShader，这个方法就是遍历html文档，查找着色器的定义，拿到定义后创建着色器，这里就不细说了：代码如下:functiongetShader(gl,id){varshaderScript,theSource,currentChild,shaderScript=document.getElementById(id);if(!shaderScript){}theSource="";currentChild=shaderScript.firstCwhile(currentChild){if(currentChild.nodeType==currentChild.TEXT_NODE){theSource+=currentChild.textC}currentChild=currentChild.nextS}if(shaderScript.type=="x-shader/x-fragment"){shader=gl.createShader(gl.FRAGMENT_SHADER);}elseif(shaderScript.type=="x-shader/x-vertex"){shader=gl.createShader(gl.VERTEX_SHADER);}else{//Unknownshadertype}gl.shaderSource(shader,theSource);//Compiletheshaderprogramgl.compileShader(shader);//Seeifitcompiledsuccessfullyif(!gl.getShaderParameter(PILE_STATUS)){alert("Anerroroccurredcompilingtheshaders:"+gl.getShaderInfoLog(shader));}} 步骤三：创建/加载模型数据 - initBuffers这些小例子中，模型数据基本都是直接生成的，实际的程序中，这些数据应该都是从模型加载得到的：代码如下:vartriangleVertexPositionBvartriangleVertexColorBfunctioninitBuffers(){triangleVertexPositionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);varvertices=[0.0,1.0,0.0,-1.0,-1.0,0.0,1.0,-1.0,0.0];gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);triangleVertexPositionBuffer.itemSize=3;triangleVertexPositionBuffer.numItems=3;triangleVertexColorBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);varcolors=[1.0,0.0,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,1.0,1.0];gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);triangleVertexColorBuffer.itemSize=4;triangleVertexColorBuffer.numItems=3;} 上面这段代码创建了三角形的顶点和顶点的颜色数据并放在缓冲区中。步骤四：渲染 - drawScene准备好了数据以后，交给WebGL去渲染就好了，这里调用的是gl.drawArrays方法。看代码：代码如下:functiondrawScene(){gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);pMatrix=okMat4Proj(45.0,gl.viewportWidth/gl.viewportHeight,0.1,100.0);mvMatrix=okMat4Trans(-1.5,0.0,-7.0);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);setMatrixUniforms();gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);} 这个函数首先设置了3D世界的背景为黑色，然后设置投影矩阵，设置待绘制对象的位置，然后根据缓冲中的顶点和颜色数据，绘制对象。这里还有一些生成投影矩阵和模型视图矩形的辅助方法(使用了Oak3D图形库中的矩阵辅助方法)与主题关系不大，这里就不详细解释了。基本上流程就是这么多了，更复杂的纹理，光线等都是在这些基础上加入一些WegGL的特性实现的，这个请参看后面的中文教程，里面有详细的例子。
怎么样？使用原生的WebGL开发是一种什么感受？不仅需要有深厚的3D知识，还需要知道各种实现细节。WebGL这样做是为了灵活的适应各种应用场景，但是对于大多数像我这样非专业人士来说，很多细节是不需要知道的。这样就催生了各种辅助开发的类库，例如这节用到的Oak3D库(为了演示WebGL开发，例子中只用到了矩阵辅助方法)。下一节会介绍一个用的比较多的Three.js图形库。
实用参考：中文教程：
开发中心：
大家感兴趣的内容
12345678910
最近更新的内容2014网页设计新趋势：3D WebGL的运用
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & 正文
Hi,我是优设小编
2014网页设计新趋势：3D WebGL的运用
saber zou：这么多年以来，网页似乎都停留在2D的世界。2012年末开始到整个2013年，涌现出非常多采用CSS 3D变形和Parallax（视觉差，通过鼠标滑动让网页上不同层次的内容以不同的速率位移而形成一种层次感）效果的网站，让这个2D的网络世界出现了丰富的层次和纵深感。但是真正的3D（除了flash实现的）似乎没有成为网页设计师的工具，不过这种情况应该会在2014年有所改变。
目前在HTML里实现无插件3D内容呈现的技术就是WebGL，这个技术其实并不复杂，但是之前由于缺乏浏览器的支持而一直没能被广发使用，这一切都可能改变，因为微软发布的IE11已经完美支持WebGL，加上Chrome和Firefox，可以说现在是时候在网页设计里加入3D元素了。
谈到WebGL 3D，大家可能第一个想到的就是网页游戏，但其实WebGL在网页设计中也大有可为，我觉得WebGL不仅仅可以运用在大型的全屏体验中，也完全可以作为页面元素和其他内容融合在一起，给用户一种新奇的酷炫的体验，我们来看一些例子。
11月底微软IE和亚洲动物基金组织合作的公益网站”月熊志”就采用了WebGL的技术，来宣传IE11在这方面的渲染能力。
这个由三本”书”组成的体验，第一本书的第一页就给大家呈现了一个3D的月熊世界，IE创造了一只动态的3D熊，用户可以拖动、旋转这个3D模型来了解更多关于这只熊的信息。这个3D的场景生动有趣，一草一木活灵活现，熊那股可爱劲儿也通过动作栩栩如生地反映出来，除了WebGL技术，很难通过别的方法实现这样的交互效果。
微软IE推出的另外一个WebGL体验，和红牛（RedBull）合作的网站Rampage对WebGL的运用也相当新颖。这是红牛每年都举办的极限单车比赛，网站通过3D WebGL技术再现了比赛环境，用户可以通过拖动或者点击3D环境上的节点来控制比赛视频的播放。网站不仅仅利用WebGL，也运用了很多CSS 3D Transform来让一些2D元素拥有立体的效果，比如视频。
下面这个网站设计也很好的结合了WebGL，网页设计师Steven Wittens在他的博客里加入了抽象的3D管道所组成的元素，当你打开网页的时候，这些管道会自动交织在一起，形成ACKO几个字母的形状。你还可点击右上方那个播放按钮来看管道的延伸过程。网页上的博文内容和3D的空间很好地结合在一起，充分展现了作者强大的设计开发能力。
一位法国的前端设计师和开发者Yann Kozon在他的个人作品网站中也加入WebGL的3D元素。首页是立体的多面体，并随着音乐有韵律的上下抖动，进入他的作品页你会发现左右作品都是一个个立体的金字塔，内容和立体效果很好地结合在一起。
为了说明3D元素怎样结合到平时的静态页面中，Web设计师GUILLAUME LECOLLINET（他的网站：http://littleworkshop.fr）做了一个WebGL的demo页面。页面上呈现了3个东西：第一个HTML5盾牌，鼠标悬停会进行翻转；第二个框线球会有落下弹起的重力效果；第三个就是美元符号，会跟随鼠标悬停位置呈现不一样角度的阴影。从这个demo当中我们可以看到简单的3D效果完全可以让页面变得生动有趣。
(建议采用IE11或者Chrome查看）
试想一下，我们现在很多网页的Logo都是图片，但是如果带有一些3D的效果，一定会特别有意思。可能你会问，这能给用户带来多大价值呢？可能实用性上确实没有多少，但很多时候，我们也要讨用户欢心，让用户展现笑容，所谓的”delight”的作用，增加用户好感度。同时，这也可以展现一个网页的性格和技术的前瞻性，这方面是设计师和开发者需要好好考虑的。
那怎么在页面中运用3D元素呢？下面跟大家介绍三个好用的工具：
1. Three.js （）
目前最好的WebGL library，也是浏览器支持最好最广泛的类库，IE11和Chrome对它的支持都很不错，上面介绍的案例都是运用ThreeJS创建的。
2. Blender （）
Blender是一个免费和开源的3D建模编辑应用，可以直接导出ThreeJS可用的代码。当然你也可以在其他3D建模工具如3DMax，然后导入到Blender从而生成ThreeJS可用的文件。
3. Voodoojs （）
这是一个全新的JS library让你创建2D和3D有机融合的网页。
工具虽好，一个不可回避的问题还是浏览器的支持，虽然IE都已经开始支持WebGL了，但很多用户的浏览器可能还不支持。我建议开发者采用渐进式的支持方法，即给不同的浏览器不同的版本，以确保最先进的浏览器用户获得最好体验，而低版本浏览器用户也能获得良好的效果。以上介绍的网站均对不支持WebGL的浏览器做了适配，拿”月熊志”为例，这个网站的3D场景在不支持WebGL的浏览器变成了360度连续帧的png图片，也能让用户左右滑动来获得模拟3D效果。
3D对于网页来说不再是高不可攀的技术，有了浏览器的支持和各种JS库，相信2014年会有更多网站加入3D的元素来丰富用户体验，相信这也是未来网页发展的新方向。
作者：saber zou
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。
设计微博：拥有粉丝量61万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
我们的团队
大家在关注