webgl_webgl编程指南 - CSDN
webgl 订阅
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。 展开全文
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
信息
外文名
Web Graphics Library
类    别
3D绘图标准
特    点
供硬件3D加速渲染
中文名
web图形库
结    合
JavaScript和OpenGL ES 2.0
WebGL设计
WebGL 1.0基于OpenGL ES 2.0,并提供了3D图形的API。它使用HTML5Canvas并允许利用文档对象模型接口。WebGL 2.0基于OpenGL ES 3.0,确保了提供许多选择性的WebGL 1.0扩展,并引入新的API。可利用部分Javascript实现自动存储器管理。 [1] 
收起全文
精华内容
参与话题
  • WebGL视频教程

    2020-06-04 08:45:36
    本课程主要对原生WebGL进行讲解,不需要你有特定的图形基础,稍微了解一点JavaScript编程及时即可。通过本课程学习你可以对WebGL渲染管线和着色器语言建立一个整体的认识,有了一定的WebGL基础,更容易理解three.js...
  • WebGL简易教程(一):第一个简单示例

    万次阅读 2020-01-20 16:59:16
    概述了这篇教程的目的,编写了WebGL的第一个示例。

    1. 概述

    不得不说现在三维图形渲染技术更新换代实在是太快,OpenGL很多资料还没来得及学习就已经有点落伍了。NeHe的学习教程还有之前用的《OpenGL编程指南》第七版(也就是红宝书)都非常好,可惜它们都是从固定管线开始讲起的;而现在可编程管线的技术已经是非常常见的基础技术了。后来我还看过《OpenGL编程指南》第八版(白皮书),这本教程是从可编程管线(着色器)开始讲起的,看的时候就觉得没有前面的基础打底,显得非常的晦涩,远不如红宝书易懂。羞愧的说,我已经多次入门失败了。

    这也正是我写这篇教程的原因,希望从繁杂的资料中总结真正有用的知识(当然也希望能帮助到你)。我觉得WebGL是学习OpenGL系列三维图形渲染技术很好的入门点。WebGL是OpenGL的浏览器版本,基本上可以认为是OpenGL的子集,能被WebGL保留而不剔除的技术,必须是三维图形渲染技术的精华。在这里给大家强烈推荐《WebGL编程指南》这本书,我这篇教程正是在这本书的基础之上总结出来的。

    在学习OpenGL/WebGL的时候,我还感觉到很多资料举得例子往往都太简单了,确实是一看就懂,但是在实际遇到的问题的时候却往往解决不了。我还是认为在实际中解决问题,更能加深对知识的理解。正好最近我在研究GIS中地形的绘制,那么我就通过一步一步绘制地形的示例,来总结WebGL的相关知识。如果你不懂GIS这些术语也不要紧,只需要知道我这里的最终目的是想绘制的是一个大地高程模型,是一个包含XYZ坐标的点集,表达了地形的情况。

    2. 示例:绘制一个点

    编写WebGL程序跟编写Web前端程序的步骤是一样的,包含HTML和JavaScript两个部分,通过浏览器进行调试。

    1) HelloPoint1.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Draw a point (1)</title>
      </head>
    
      <body onload="main()">
        <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
        </canvas>
    
        <script src="../lib/webgl-utils.js"></script>
        <script src="../lib/webgl-debug.js"></script>
        <script src="../lib/cuon-utils.js"></script>
        <script src="HelloPoint1.js"></script>
      </body>
    </html>
    

    这一段HTML非常简单,从实际表现上来说就是创建了一个画布<canvas>。<canvas>是HTML5引入的的一个绘制标签,可以在画布中绘制任意图形。WebGL正是通过<canvas>元素进行绘制的。
    除此之外,这段代码还通过<script>标签引入了几个外部JS文件。其中lib目录中的几个JS文件是一些通用的组件(来自《WebGL编程指南》的源码),可以先暂时不用关心其具体实现;最后一个导入的HelloPoint1.js正是我们编写的绘制模块。而在<body>标签中定义的onload事件属性绑定的正是HelloPoint1.js中的main()函数。

    2) HelloPoint1.js

    // 顶点着色器程序
    var VSHADER_SOURCE = 
      'void main() {\n' +
      '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
      '  gl_PointSize = 10.0;\n' +                    // Set the point size
      '}\n';
    
    // 片元着色器程序
    var FSHADER_SOURCE =
      'void main() {\n' +
      '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
      '}\n';
    
    function main() {
      // 获取 <canvas> 元素
      var canvas = document.getElementById('webgl');
    
      // 获取WebGL渲染上下文
      var gl = getWebGLContext(canvas);
      if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
      }
    
      // 初始化着色器
      if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
      }
    
      // 指定清空<canvas>的颜色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
    
      // 清空<canvas>
      gl.clear(gl.COLOR_BUFFER_BIT);
    
      // 绘制一个点
      gl.drawArrays(gl.POINTS, 0, 1);
    }
    

    这段JS代码的主要内容就是前面提到的main函数,一旦HTML被浏览器加载成功,这段脚本就会执行。在main函数中主要有一下几步:

    (1) 准备工作

    document.getElementById(‘webgl’):文档对象模型DOM的函数,获取到HTML页面的元素。

    getWebGLContext(canvas):获取WebGL渲染上下文,保存在gl变量中。因为不同浏览器获取函数不太一样,所以通过组件cuon-utils提供的函数来统一行为。

    (2) 着色器

    initShaders:初始化着色器。

    首先要知道什么是着色器。如果你只学习过固定管线或者其他的二维绘图组件(如GDI),就会非常困惑着色器是什么,为什么要用着色器。比如说在固定管线中,绘制点就是drawPoint,绘制线就drawLine。而在WebGL中,绘制工作则主要被分解成顶点着色器和片元着色器两个步骤了。

    在启动JS程序后,绘制工作首先进入的是顶点着色器,在顶点着色器中描述顶点特性(如位置、颜色等),顶点就是三维空间的点,比如三角形的三个顶点;然后进入到片元着色器,在片元着色器中逐片元处理像素(如光照、阴影、遮挡)。最后片元传入到颜色缓冲区,进行显示。渲染过程如下:
    WebGL渲染管线

    这个过程是一个类似水流的流向过程,所以这个过程被称为渲染管线(Pipeline)。并且,这个过程是需要我们去编程控制的,比如观察者的视角变化需要在顶点着色器去调控;光线对颜色的变化需要在片元着色器去调控等;因此,这个过程就是可编程管线。通过着色器程序,三维图像渲染就更加的灵活强大。

    在initShaders()函数中,传入了预先定义的JS字符串VSHADER_SOURCE和FSHADER_SOURCE。需要说明是,着色器程序是以字符串的形式嵌入到JS文件中运行的。这个函数同样是cuon-utils组件提供的,调用之后就告诉WebGL系统着色器已经建立好了并可以随时使用。

    (3) 顶点着色器

    顶点着色器的定义如下:

    // 顶点着色器程序
    var VSHADER_SOURCE = 
      'void main() {\n' +
      '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
      '  gl_PointSize = 10.0;\n' +                    // Set the point size
      '}\n';
    

    前面说到顶点着色器程序是嵌入在JS中的程序,所以虽然传入的是字符串,但其实本质是着色器描述语言(GLSL:OpenGL Shading Language)。既然是语言也就有自己的函数与变量定义。main()函数是每个着色器程序定义的入口。在main函数中,将顶点的坐标赋值给内置变量gl_Position,点的尺寸赋值给内置变量gl_PointSize。

    注意这里的gl_Position是必须赋值的,否则着色器不会正常工作。赋值的类型是vec4,也就是一个四维矢量。一般来说,描述点位只需要三维矢量就可以了,但是很多情况下需要四个分量的齐次坐标。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果第四个分量是1,那么就是普通的三维坐标;如果第四分量为0,就表示无穷远的点。

    (4) 片元着色器

    片元着色器的定义如下:

    // 片元着色器程序
    var FSHADER_SOURCE =
      'void main() {\n' +
      '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
      '}\n';
    

    如同顶点着色器一样,片元着色器将点的颜色赋值给gl_FragColor变量,gl_FragColor是片元着色器唯一的内置变量,控制像素在屏幕上的最终颜色。

    (5) 清空缓冲区

    gl.clearColor():设置清空的背景色。
    gl.clear(gl.COLOR_BUFFER_BIT): 清空颜色缓冲区。

    (6) 绘制操作

    gl.drawArrays(gl.POINTS, 0, 1):绘制一个点。
    顶点着色器只是指定了绘制的顶点,还需要指定顶点到底成点、成线还是成面,gl.drawArrays()就是这样一个函数,这里告诉WebGL系统应该绘制一个点。

    3. 结果

    最终的运行结果很简单,在Chrome打开HelloPoint1.html,页面显示了一个绘制一个点的窗口:
    WebGL示例显示结果

    4. 参考

    本来部分代码和插图来自《WebGL编程指南》。

    代码和数据地址

    上一篇
    目录
    下一篇

    展开全文
  • WebGL可以做什么?

    千次阅读 2018-03-09 22:48:54
    WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视、游戏、数据可视化、艺术、3D设计环境、3D空间建模、3D物体建模、绘制数学函数和创建物理模拟。因为是被设计成直接工作在显卡端的,...

    WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视游戏数据可视化艺术3D设计环境3D空间建模3D物体建模绘制数学函数创建物理模拟

    因为是被设计成直接工作在显卡端的,所以WebGL比目前其他的典型的web技术都要更加复杂。总的来说,它是相当的低等级的。这也正是它为什么能够如此迅速的完成大量的计算,并实现复杂的实时3D渲染的原因。

    你不需要完全理解WebGL内在的工作原理。因为有很多第三方WebGL图形库可以帮你完成一些复杂的操作。但是如果你想成为一个高级开发者,充分利用WebGL的各种高级特性,那建议你最好还是深入了解一下其中的内涵。

    在WebGL中编程,通常的目标都是想要渲染某种场景。这其中包括多重并发的绘制工作,称之为绘制调用(draw call),这些调用都是在GPU端通过一个叫做渲染管线(Rendering Pipeline)的处理流程来实现的。

    在WebGL中,和其他大多数实时3D图形系统一样,三角形是用于绘制模型的最基本的元素。因此,在WebGL中需要通过使用JavaScript来生成绘制信息,这些绘制信息包括指定在什么位置绘制三角形、如何绘制三角形、这些三角形的外观长的什么样子(颜色、形状、纹理等等)。然后将这些信息传递给到GPU端,GPU进行处理,最后再返回绘制结果。


    WebGL官网:http://www.hewebgl.com/

    基于WebGL的技术三维模型在线预览:http://www.yanhuangxueyuan.com/3D.html

    转载地址:http://blog.csdn.net/u010028980/article/details/8798527

    展开全文
  • 分享一些精彩的webGL示例

    万次阅读 2018-03-02 14:46:57
    WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染,这样 Web 开发人员就...

    WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解。

    1. Aquarium

    Image Source:www.webglsamples.org

    Created by Greggman and Human Engines. The aquarium runs almost entirely based on a clock.That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time.

    2. 3 Dreams of Black

    Image Source:www.ro.me

    A Semi-Intereactive film authored by Chris Milk. It was developed using technology developed by Google and other sources.

    It works with chrome mixing 2D and 3D computer graphics, showcasing the song “Black” by Danger Mouse and Daniel Luppi ,with Norah Jones and Jack White.

    3. Cube

    Image Source:www.playmapscube.com

    A WebGL innovative game inspired with Google maps technology. It consists of elements you see in Google Maps and analog labyrinth games combined with amazing controls that can break an experience.

    4. Chemdoodle

    Image Source:www.web.chemdoodle.com

    Chemdoodle is a scientific visualization which lets you pick one of a number of medicines and see a 3D display of its chemical structure on compatible browsers, developed by iChemLabs.

    5. Chrysaora

    Image Source:www.aleksandarrodic.com

    A dynamic Jellyfish WebGL demo built with Vladimir Vuki?evi?’s mjs matrix library. It showcases simulated skeletons, partial server-side simulation and synchronization with WebSocket, and camera facing a particle system and volumetric light effect.

    6. WebGL Bookcase

    Image Source:www.workshop.chromeexperiments.com

    Google Books’ new flashy interface styled after a helix. Within the spiral books are sorted by subject and clicking on any book takes you to the entry in Google Books.

    7. Just a Reflektor

    Image Source:www.justareflektor.com

    Just a Reflektor is a band Arcade Fire music video which was collaborated by Google. Using your mouse you can adjust various real-time filters and effects. This WebGL will require a webcam or simply your mouse.

    8. WebGL Earth

    Image Source:www.webglearth.com

    An open source software enabling exploration, zooming and “playing” with the 3D globe in a web browser. The project is sustained through the support and cooperation of the developer community.

    9. 3Dtin

    Image Source:www.3dtin.com

    3Dtin is an easy to use tool for creating shapes with a natural voxel-oriented 3D pixel approach, with the feature to export your project in 3D printing services.

    10. The Biodigital Human

    Image Source:www.biodigitalhuman.com

    The BioDigital Human is a virtual 3D body that brings to life thousands of medically accurate anatomy objects and health conditions, in an interactive Web-based platform.

    11. WebGL Rubik’s Cube

    Image Source:www.randelshofer.ch

    A Rubik’s Cube applets from Java to WebGL developed by Werner Randelshofer. Parts of the code are from the WebGL demo repository. Codes use in this WebGL are copyrighted by Apple Inc. and by Google Inc. and is used under permission.

    12. GLGE

    Image Source:www.glge.org

    A framework for making WebGL developed by by Paul Brunt. It is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.

    13. Ctrl+[P]aper

    Image Source:www.grouek.com

    Digital studio Grouek designed this Web GL website, that allows anyone to create its paper toy in 3 easy steps. Once you’re done, print the PDF, cut, fold and glue following instructions. In less time than you think, a beautiful, unique, self-created paper toy will proudly stand on your desktop.

    14. A holiday message

    Image Source:www.itsamessage.com

    Developed by @thespite and @mrdoob. It will first require you to put on your address before proceeding. Once entered you’ll see a beautiful 3D scene that has a holiday greetings on it, where as you can move along using your mouse to view the whole 3D models.

    15. Materials: Cars

    Image Source:www.alteredqualia.com

    With this WebGL you can choose to view 3D looks of Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 and Chevrolet Camaro in your browser. Pick your ride and enjoy the view. Guest what, you can even choose their colors.

    16. Quake 3

    Image Source:www.media.tojicode.com

    Developed by Brandon Jones, it is an impressive WebGL game demo complete with music. You can play it by just using your keyboard and mouse.

    17. WebGL Image Filter

    Image Source:www.evanw.github.io

    A WebGL graphic editor application by Evan Wondrasek ,with a smooth and fast interface. You can play around with filter effects like the brightness and contrast, similar to the features you see in Photoshop.

    18. From Dust

    Image Source:www.bing.com

    A WebGL game originally released a couple years ago on some traditional gaming platforms. Ubisoft has ported this game to WebGL and contains amusing and amazing effects and controls on it.

    19. Acko.net

    Image Source:www.acko.net

    A WebGL that offers 3D logo on the header with a basic setting of a site when scrolled down. It offers a possibility that WebGL can be used as a practical setting to a website or software application.

    20. WebGL Terrain

    Image Source:www.alteredqualia.com

    A WebGL demo with dynamic procedural terrain using 3d simplex nois. It features birds from ro.me and the background sound by Kevin Maclead.

    展开全文
  • 一.笔者自述   对于原生WebGL的学习,相信对于很多搞前端图形开发的小伙伴的痛点是花了很多时间,却收效甚微;...那为什么我们还要学习原生的WebGL,原生的WebGL对于我们来说意味着什么?接下来笔者就以自...

    一.笔者自述       

     对于原生WebGL的学习,相信对于很多搞前端图形开发的小伙伴的痛点是花了很多时间,却收效甚微;好在现在存在诸如Three.js、Babylon.js、cesium.js等功能强大和齐全的WebGL第三方库;有了这些第三方库,我们可以用更少的代码构建出绚丽多彩的网络3D应用;那为什么我们还要学习原生的WebGL,原生的WebGL对于我们来说意味着什么?接下来笔者就以自身的学习经历回答这两个问题:

     首先,笔者在学习WebGL是做科研课题的需要,刚开始的时候也是很茫然,不知道怎么学,学了一段时间Three.js,又觉得必须把原生的WebGL学一下,不然不明白Three.js到底是怎么实现的(强迫症患者哈),于是就学习一段时间的原生WebGL,后来发现用Three.js做科研课题更加合适,里面提供有各种各样的功能,不用自己再去写(ps:如果自己去写这些功能,我可能毕不了业。。。),于是乎我的Three.js越来越进步,用的越来越熟悉;然而,近期身为即将毕业找工作的我,发现很多岗位都要求具备原生的WebGL开发能力,特别是h5渲染引擎的开发,所以峰回路转,我再一次选择学习原生WebGL,于是便决定把自己的学习经历和一些例子分享给广大爱好WebGL开发的道友们,希望我们一起度过原生WebGL的这个劫。

    其次,学习原生的WebGL,意味着我们的底层开发能力更上一层楼,如果你再学习一下计算机图形学的相关知识,我们也可以自己动手开发自己的渲染引擎,是不是觉得很高大上?尤其当我们掌握了原生WebGL开发的相关知识,回过头来看哪些第三方库,一切疑惑自然解开了,正所谓“初听不知曲中意, 再听已是曲中人”,你理解了,就自然不会再疑惑它们究竟是怎么实现的。

    二.WebGL开发需要准备什么

    1.WebGL简介

    关于WebGL的介绍,笔者在很早以前写过一篇基础介绍的文章,可以供大家参考:关于WebGL的一些基础性介绍

    2.开发要求

     编程软件:这里笔者使用的是WebStorm(看个人习惯,不做强制性要求),由于开发原生WebGL会涉及到着色器的编程,Webstorm提供了一个方便着色器代码编写的插件:GLSL Support;安装好这个插件后,着色器代码的关键字将会带上颜色,与普通变量区分,如下图:

           

    要安装这个插件,你可以自己到官网下载然后手动添加到webstorm插件里面,也可以在webstorm的setting(

    设置)>Plugins(插件)里面搜索GLSL Support,安装即可。

    运行环境:对于WebGL的支持程度各大浏览器都不一样,市面上主流的l谷歌、火狐、opera、safari等了浏览器都支持,如下图所示,具体可在:https://caniuse.com/#feat=webgl获得相关信息。我们可以看到各大浏览器对WebGL的支持情况,谷歌浏览器是支持度最好的,火狐其次;笔者选择了谷歌浏览器,原因是谷歌浏览器调试代码超级方便,而且谷歌浏览器也提供了一个WebStorm调试插件JetBrains IDE Support,可以说给程序的调试带来了极大的方便,这个插件也很好安装,有两个方法:1、上百度搜查并下载,手动拖拽扩展到谷歌浏览器的“扩展程序”里面即可;2、在谷歌应用商店搜索安装(打开谷歌商店需要翻墙);等笔者闲暇时间,一定写一篇关于这个插件的调试详细教程分享给大家,请大家多关注我的博客。

     编程语言:HTML、CSS、JavaScript;其中最为重要的是JavaScript,它是WebGL载体语言,就像C++于OpenGL的重要性一样,所以一定要具备一定的javascript编程基础。

     

    3.着色器语言:glsl 

    关于着色器语言的介绍,可以参考:着色器介绍;而对于着色器的编写一般有三种形式,第一种是将着色器代码单独写在一个文件,顶点着色器可命名为vShader.glsl, 片元着色器可用命名为Shader.glsl;第二种是将着色器代码以定义字符串变量的形式写在javascript代码内;第三种是将着色器代码卸载HTML文档的<script> </script>中间,将其表示为脚本。本教程用的第三种方法,如下图:

    4.着色器编译

    关于着色器的编译可以参考:着色器介绍,笔者在这里不再讲详细,直接上本教程要用的着色器创建,编译,链接代码,读者可以根据注释理解哈,在后面的章节我将讲解这个shader.js文件如何用于创建着、编译和链接着色器:

    //shader.js
    //创建着色器
    function createShader(gl, type, source) {
        let shader = gl.createShader(type);//创建着色器
        gl.shaderSource(shader, source);//附加着色器源文件到Shader
        gl.compileShader(shader);//编译着色器
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);//判断着色器是是否编译成功
        if(success) {
            return shader;
        } else {
            console.log("着色器创建失败!");
        }
    
        console.log(gl.getShaderInfoLog(shader));//获取着色器信息
        gl.deleteShader(shader);//删除着色器
    }
    
    //链接着色器程序
    function createProgram(gl, vertexShader, fragmentShader) {
        let program = gl.createProgram();//生成程序对象
        gl.attachShader(program, vertexShader);//向程序对象分配着色器
        gl.attachShader(program, fragmentShader);//向程序对象分配着色器
        gl.linkProgram(program);//链接着色器
    
        let success = gl.getProgramParameter(program, gl.LINK_STATUS);//判断着色器是否链接成功
        if(success) {
            return program;
        } else {
            console.log("着色器链接失败!");
        }
    
        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
    }
    
    //初始化着色器
    function initShader(gl, vShaderText, fShaderText) {
        let vShader = createShader(gl, gl.VERTEX_SHADER, vShaderText);
        let fShader = createShader(gl, gl.FRAGMENT_SHADER, fShaderText);
    
        return createProgram(gl, vShader, fShader);
    }

    希望经过笔者在前面的这么多介绍,大家对WebGL有一个初步的认识,从下一节开始,将带领大家进行一些基础知识的学习和demo的开发。

    展开全文
  • WebGL(1.0)API

    千次阅读 2018-11-17 14:14:28
    WebGL (Web图形库) 是一种JavaScript API,用于在任何兼容的Web浏览器中呈现交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API,可以在HTML5 &lt;canvas&gt; 元素中...
  • webgl

    千次阅读 2019-05-23 15:11:28
    注: canvas全屏的时候不要用 canvas.style.width 和canvas.style.height 给100%, 图像会失真; 直接 canvas.width = window.innerWidth; canvas.height = window.innerHeight; 或者 canvas.width = document....
  • 作者:窦金兰— 字节跳动IES前端工程师希望通过这篇文章,大家能够对 OpenGL/WebGL 有一个基础的认识~~OpenGL定义OpenGL 是一套规范,...
  • Unity3D 官方教程:WebGL(一)

    万次阅读 2017-03-12 12:42:43
    Unity3D官方教程:WebGL 什么是 Unity WebGL? 创建一个Unity WebGL项目
  • GLSL实现水面倒影

    千次阅读 2014-12-24 10:25:31
    使用两相机,一个master相机, 主要负责场景的渲染, 另一个rtt相机, 和master相机建立为镜面投影相机,用于在和master相机的纵向镜像投影,从而获取master投影场景的逆场景, 渲染到纹理,进行镜面贴图,实现水面...
  • WebGL初学系列之一】WebGl基础知识

    千次阅读 2014-09-14 14:34:16
    在今年中,Web技术已经得到了巨大的发展,现在许多
  • 查看浏览器是否支持webgl的方法

    万次阅读 2018-10-16 15:18:55
    1、直接在浏览器里访问https://get.webgl.org/,如果浏览器支持webgl的话会看到如图
  • chrome谷歌浏览器开启webgl

    万次阅读 2020-04-28 11:40:01
    方法一:右键单击谷歌浏览器的桌面快捷方式,在目标里面加上," --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files” ,注意有空格符的地方一定要加空格符,直接复制本文章的也可以。然后点击...
  • 在搜狗浏览器中启用WebGL

    万次阅读 2012-08-04 15:20:28
    搜狗浏览器3.2版本已支持WebGL,搜狗浏览器的“兼容”模式下是不支持WebGL的,要想在搜狗浏览器中启用WebGL,需要将“兼容”模式切换为“高速”模式即可,如下图所示:
  • Unity3D的WebGL开发(一)发布设置

    万次阅读 多人点赞 2016-11-03 15:24:14
    一.一般发布设置分以下五大类:(menu: Edit > Project Settings > Player) 1**Resolution and Presentation:** 设置分辨率和显示(如显示方向) 2 **Icon:**APP图标 3 Splash Image: 载入图片 ...
  • WebGL 支持情况检测与已支持浏览器版本汇总
  • HTML5原生WebGL开发系列教程

    千次阅读 2017-05-02 19:17:54
    原生WebGL简单Demo4. 在WebGL中使用drawElements绘图5. WebGL不同几何图形的渲染方式6. 使用自定义glTranslate与glRotate7. 原生WebGL+ArcGIS JS API绘制旋转的地球8. WebGL矩阵、Camera基础操作9. WebGL使用一张...
  • WebGL和canvas渲染方式

    千次阅读 2019-04-18 15:06:14
    Laya引擎支持WebGL和canvas两种渲染方式,可以在引擎初始化时选择渲染方式 Laya.init(width,height,WebGL);//WebGL模式 Laya.init(width,height);//canvas默认为canvas模式 canvas是一个H5标签,作用是在网页上...
  • Chrome无法打开WebGL的解决方法

    万次阅读 2018-12-03 16:14:48
    在用Chrome打开WebGL时无法打开的解决办法
  • 第一种:打开cmd,切换到Chorme的安装目录,敲入chrome.exe –enable -webgl,回车就会打开一个chrome浏览器窗口; 第二种:找到Chrome浏览器的快捷方式,如果没有就创建一个快捷方式(右键点击chrome.exe,选择...
1 2 3 4 5 ... 20
收藏数 25,952
精华内容 10,380
关键字:

webgl