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简易教程(一):第一个简单示例

    万次阅读 2019-08-04 21:40:33
    概述了这篇教程的目的,编写了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:05:21
    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视频教程

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

    千次阅读 2018-09-24 13:14:51
    更多WebGL教程关注郭隆邦技术博客 使用WebGL绘制一个点 为了让大家快速认识WebGL,先不讲解具体的知识点,我相信很多程序员希望通过一个麻雀虽小,但是五脏俱全的demo来认识一个新的技术领域。所以这里通过一个简单...

    更多WebGL教程关注郭隆邦技术博客

    使用WebGL绘制一个点

    为了让大家快速认识WebGL,先不讲解具体的知识点,我相信很多程序员希望通过一个麻雀虽小,但是五脏俱全的demo来认识一个新的技术领域。所以这里通过一个简单的案例来给大家展示WebGL技术,下面的代码完成的效果就是在canvas画布上绘制一个

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用WebGL绘制一个点</title>
    </head>
    <body>
    <!--canvas标签创建一个宽高均为500像素,背景为蓝色的矩形画布-->
    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
    
    </body>
    <!-- 顶点着色器源码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
    
      void main() {
        //给内置变量gl_PointSize赋值像素大小
        gl_PointSize=20.0;
        //顶点位置,位于坐标原点
        gl_Position =vec4(0.0,0.0,0.0,1.0);
      }
    
    </script>
    <!-- 片元着色器源码 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
    
      void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
    
    </script>
    
    <script>
        //通过getElementById()方法获取canvas画布
        var canvas=document.getElementById('webgl');
        //通过方法getContext()获取WebGL上下文
        var gl=canvas.getContext('webgl');
    
        //顶点着色器源码
        var vertexShaderSource = document.getElementById( 'vertexShader' ).innerText;
    
        //片元着色器源码
        var fragShaderSource = document.getElementById( 'fragmentShader' ).innerText;
    
        //初始化着色器
        var program = initShader(gl,vertexShaderSource,fragShaderSource);
        //开始绘制,显示器显示结果
        gl.drawArrays(gl.POINTS,0,1);
    
        //声明初始化着色器函数
        function initShader(gl,vertexShaderSource,fragmentShaderSource){
            //创建顶点着色器对象
            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            //创建片元着色器对象
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            //引入顶点、片元着色器源代码
            gl.shaderSource(vertexShader,vertexShaderSource);
            gl.shaderSource(fragmentShader,fragmentShaderSource);
            //编译顶点、片元着色器
            gl.compileShader(vertexShader);
            gl.compileShader(fragmentShader);
    
            //创建程序对象program
            var program = gl.createProgram();
            //附着顶点着色器和片元着色器到program
            gl.attachShader(program,vertexShader);
            gl.attachShader(program,fragmentShader);
            //链接program
            gl.linkProgram(program);
            //使用program
            gl.useProgram(program);
            //返回程序program对象
            return program;
        }
    </script>
    </html>
    
    
    

    代码结构

    整个代码是一个.html文件,里面包含JavaScript代码和着色器语言代码,通过JavaScript调用WebGL API来完成绘制操作。

    HMTL和JavaScript

    如果原来接触的是OpenGL,不了解WebGL,对浏览器的生态环境不了解,不了解前端知识,那么在学习WebGL之前,你应该先了解一下什么是HTML,什么是JavaScript语言。

    canvas

    canvas和div一样也是HTML的一个元素,只不过通过这个元素可实现三维场景的回执和渲染。通过canvas对象的getContext方法可以返回一个2D或3D环境

    canvas元素

    <!--canvas标签创建一个宽高均为500像素,背景为蓝色的矩形画布-->
    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
    
    

    返回3D绘图环境

    通过返回的gl对象可以调用WebGL API,所有的WebGL API就是gl对象的方法。比如
    gl.linkProgram()

        //通过getElementById()方法获取canvas画布
        var canvas=document.getElementById('webgl');
        //通过方法getContext()获取WebGL上下文
        var gl=canvas.getContext('webgl');
    

    返回2D环境

    返回2D环境,就是大家平常说的canvas,通过canvas对象可以返回webgl绘图环境,也可以返回2D绘环境,不过大家在表达的时候,2D绘图环境通常表达为canvas,而canvas返回的3D环境,使用WebGL去表述。

        var c=canvas.getContext('2d');
    

    着色器语言 GLSL

    顶点、片元着色器代码要通过着色器语言来编写,着色器语言在GPU中执行,而平时大家说的JavaScript、Python等语言都是在CPU中执行。在GPU中执行的着色器代码,需要先通过WebGL进行一定的处理然后传递到GPU才能执行,所以编写的着色器语言就是一段符合一定的规则的字符串。
    如果你现在还不能理解着色器语言的语法规则,也没有关系,作为初学者你现在只需要有一个印象,然后慢慢去学习。

    顶点着色器

    内置变量gl_PointSize设置了顶点渲染后的显示大小,内置变量gl_Position决定了渲染的位置,你可以去修改位置变量的值,比如vec4(0.0,0.0,0.0,1.0)变成vec4(0.5,0.0,0.0,1.0),你会发现渲染的点位置发生了变化。

        <!-- 顶点着色器源码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
    
      void main() {
        //给内置变量gl_PointSize赋值像素大小
        gl_PointSize=20.0;
        //顶点位置,位于坐标原点
        gl_Position =vec4(0.0,0.0,0.0,1.0);
      }
    
    </script>
    
    

    片元着色器

    内置变量gl_FragColor设置渲染结果的颜色值,vec4(1.0,0.0,0.0,1.0)表示红色,如果改成vec4(0.0,1.0,0.0,1.0),你会发现渲染结果是绿色,vec4的四个分量分别表示RGBA。

    <!-- 片元着色器源码 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
    
      void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
      </script>
    
    展开全文
  • 分享一些精彩的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(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 09:00:10
    注: canvas全屏的时候不要用 canvas.style.width 和canvas.style.height 给100%, 图像会失真; 直接 canvas.width = window.innerWidth; canvas.height = window.innerHeight; 或者 canvas.width = document....
  • 本专栏所有文章示例代码均可在我的gitee码云上获取,读者可...如果读者还对本专栏的文章内容和编程方式还不是很了解,建议先对前面的文章进行学习:博客专栏:webgl基础学习。前面的几节课,笔者为大家演示了WebGL如...
  • WebGL教程(电子书)

    千次阅读 2019-11-08 21:59:02
    WebGL教程(电子书) 最近准备编写一本WebGL快速入门的电子书教程,电子书编写完整后,会免费开源到我的个人技术博客,目前还在编写中,已经写好的会把电子书每一小节以文章的形式发布才CSDN上。 第一章、WebGL零基础...
  • Unity3D 官方教程:WebGL(一)

    万次阅读 2017-02-23 23:19:07
    Unity3D官方教程:WebGL 什么是 Unity WebGL? 创建一个Unity WebGL项目
  • 作者:窦金兰— 字节跳动IES前端工程师希望通过这篇文章,大家能够对 OpenGL/WebGL 有一个基础的认识~~OpenGL定义OpenGL 是一套规范,...
  • GLSL实现水面倒影

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

    千次阅读 2014-09-14 14:34:15
    在今年中,Web技术已经得到了巨大的发展,现在许多
  • (精华)2020年6月29日 WebGL 绘制点

    万次阅读 2020-06-29 00:07:23
    静态版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...title&g
  • WebGL

    2013-01-23 11:18:27
    WebGL    ---------- 是一种3D绘图标准,允许javascript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个javascript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,可以借助系统显卡来在浏览器里更...
  • (精华)2020年6月29日 WebGL 绘制波浪点

    万次阅读 2020-06-29 21:20:22
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="keywords" content=""/> <meta name="description" content="" /> <title>... ca
  • 基于HTML5 WebGL 3D仓储系统Demo,使用范围还很广!ht.js评论留言邮箱地址,看到留言会发送至邮箱
  • 为企事业单位的档案现代化管理,提供完整的解决方案,档案管理系统既可以自成系统,为用户提供完整的档案管理和网络查询功能,也可以与本单位的OA办公自动化和DPM设计过程管理,或者与MIS信息管理系统相结合,形成...
  • 基于 HTML5 WebGL 的 3D 仓储管理系统

    热门讨论 2017-11-28 22:45:52
    仓库管理可以说即不省力也不省事,而且使用范围还很广,数学中经常使用仓储系统来计算市场需求,物流中的动力学建模等等,所以仓储系统必不可少,在这个时间就是金钱的时代,能省时就能带来非常大的效益,所以我们...
  • WebGL学习系列-WebGL简介

    千次阅读 2017-02-16 00:08:51
    前言本篇简要介绍一下WebGL的历史以及用途。

空空如也

1 2 3 4 5 ... 20
收藏数 898,468
精华内容 359,387
关键字:

webgl