【WebGL】简单入门教程

最新推荐文章于 2024-06-02 08:30:00 发布
最新推荐文章于 2024-06-02 08:30:00 发布
阅读量2w 收藏 90
点赞数 39
分类专栏： web-基础语法与进阶 文章标签： WebGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shentian885/article/details/124109697
版权

第1章-介绍

WebGL 解决了用户在页面中绘制和渲染 3D 图形的功能，且使用户通过页面与三维图形交互成为可能，这项技术将在下一代开发用户易用直观界面中发挥重要的作用。在接下的几年，WebGL技术将广泛地应用于电子设备的移动终端，包括平板、手机设备，因此，WebGL 技术的学习显的特别重要。

涉及技术栈

  • HTML、HTML5
  • JavaScript
  • GLSL ES语言

第2章-初识WebGL

2.1 手动绘制一个图形在这里插入图片描述

实现的步骤
  1. 添加一个画布元素
  2. 获取到画布元素的基于webgl上下文环境对象
  3. 使用对象中的API实现图形绘制
代码
  <body>
    <canvas id="cvs" width="200" height="200" style="border: dashed 1px red">
      你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
      //获取画布元素
      var cvs = document.getElementById('cvs')
      //获取到元素的上下文环境对象
      var gl = cvs.getContext('webgl')

      //设置绘制图形填充的颜色
      gl.clearColor(1.0, 0.0, 0.0, 1.0)

      //调用缓存中值填充图形
      gl.clear(gl.COLOR_BUFFER_BIT)
    </script>
  </body>

2.2 使用着色器绘制图形

在这里插入图片描述

WebGL 中的坐标系统

在这里插入图片描述

在这里插入图片描述

着色器的介绍

着色器是使用 OpenGL ES Shading Language 语言编写的程序，负责记录像素点的位置和颜色，并由顶点着色器和片段着色器组成，通过用GLSL 编写这些着色器，并将代码文本传递给WebGL执行时编译，另外，顶点着色器和片段着色器的集合我们通常称之为着色器程序。

顶点着色器的功能是将输入顶点从原始坐标系转换到WebGL使用的缩放空间坐标系，每个轴的坐标范围从-1.0到1.0，顶点着色器对顶点坐标进行必要的转换后，保存在名称为gl_Position的特殊变量中备用。

​ 片段着色器在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次，它的功能是确定像素的颜色值，并保存在名称为gl_FragColor的特殊变量中，该颜色值将最终绘制到图形像素的对应位置中。

代码
  <body>
    <canvas id="cvs" width="200" height="200" style="border: dashed 1px red">
      你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
      //获取画布元素
      var cvs = document.getElementById('cvs')
      //获取到元素的上下文环境对象
      var gl = cvs.getContext('webgl')

      //顶点着色器变量
      var VSHADER_SOURCE =
        'void main() {' +
        //定义点的坐标并转换成变量保存
        'gl_Position = vec4(0.0, 0.0, 0.0, 1.0); ' +
        //设置缩放距离的直径
        'gl_PointSize = 10.0; ' +
        '} '

      //片段着色器变量
      var FSHADER_SOURCE =
        'void main() {' +
        //设置图形像素的颜色并保存
        'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
        '}'

      //新建一个用于装顶点字符串的着色器对象
      var vertShader = gl.createShader(gl.VERTEX_SHADER)
      //加载保存好的顶点代码字符串变量
      gl.shaderSource(vertShader, VSHADER_SOURCE)
      //编译顶点着色器
      gl.compileShader(vertShader)

      //新建一个用于装片段字符串的着色器对象
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
      //加载保存好的片段代码字符串变量
      gl.shaderSource(fragShader, FSHADER_SOURCE)
      //编译片段着色器
      gl.compileShader(fragShader)

      //新建一个程序
      var shaderProgram = gl.createProgram()

      //分别附加两个已编译好的着色器对象
      gl.attachShader(shaderProgram, vertShader)
      gl.attachShader(shaderProgram, fragShader)

      //链接两个附件加好的着色器程序
      gl.linkProgram(shaderProgram)
      //开启程序的使用
      gl.useProgram(shaderProgram)

      //绘制指定位置的图形
      gl.drawArrays(gl.POINTS, 0, 1)
    </script>
  </body>

第3章-绘制三角形

3.1 多点绘制的方法

在这里插入图片描述

  • 什么attribute 变量

它是一种存储限定符，表示定义一个attribute的全局变量，这种变量的数据将由外部向顶点着色器内传输，并保存顶点相关的数据，只有顶点着色器才能使用它。

  • 使用attribute 变量
  1. 在顶点着色器中，声明一个 attribute 变量。
  2. 将 attribute 变量赋值给 gl_Position 变量。
  3. 向 attribute 变量传输数据。
  • 使用缓存区关联attribute变量
  1. 创建缓存区对象
  2. 绑定缓存区对象
  3. 将数据写入对象
  4. 将缓存区对象分配给attribute变量
  5. 开启attribute变量

3.2 绘制三角形方法

 <body>
    <canvas id="cvs" width="200" height="200" style="border: dashed 1px red">
      你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
      //获取画布元素
      var cvs = document.getElementById('cvs')
      //获取到元素的上下文环境对象
      var gl = cvs.getContext('webgl')

      //顶点着色器变量
      var VSHADER_SOURCE =
        //使用存储限定符定义一个接受顶点坐标的变量
        'attribute vec4 a_Position;' +
        'void main() {' +
        //定义点的坐标并转换成变量保存
        'gl_Position = a_Position; ' +
        '} '

      //片段着色器变量
      var FSHADER_SOURCE =
        'void main() {' +
        //设置图形像素的颜色并保存
        'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
        '}'

      //新建一个用于装顶点字符串的着色器对象
      var vertShader = gl.createShader(gl.VERTEX_SHADER)
      //加载保存好的顶点代码字符串变量
      gl.shaderSource(vertShader, VSHADER_SOURCE)
      //编译顶点着色器
      gl.compileShader(vertShader)

      //新建一个用于装片段字符串的着色器对象
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
      //加载保存好的片段代码字符串变量
      gl.shaderSource(fragShader, FSHADER_SOURCE)
      //编译片段着色器
      gl.compileShader(fragShader)

      //新建一个程序
      var shaderProgram = gl.createProgram()

      //分别附加两个已编译好的着色器对象
      gl.attachShader(shaderProgram, vertShader)
      gl.attachShader(shaderProgram, fragShader)

      //链接两个附件加好的着色器程序
      gl.linkProgram(shaderProgram)
      //开启程序的使用
      gl.useProgram(shaderProgram)
      //定义一个类型数组保存顶点坐标值
      var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
      //先创建一个缓存对象
      var vertexBuffer = gl.createBuffer()
      //说明缓存对象保存的类型
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
      //写入坐标数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
      //获取到顶点着色器中变量
      var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
      //将坐标值赋值给变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //开启变量值的使用
      gl.enableVertexAttribArray(a_Position)

      //绘制指定位置的图形
      gl.drawArrays(gl.TRIANGLES, 0, 3)
    </script>
  </body>

第4章-WebGL动画

4.1 图形移动

在这里插入图片描述

  • 平移原理
    为了平移一个三角形，只需要对它的每个顶点进行移动，即每个顶点加上一个分量，得到一个新的坐标：
    X1=X+TX``Y1=Y+TY``Z1=Z+TZ

只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现，当然这这修改在顶点着色器上。

  • uniform类型变量
    用于保存和传输一致的数据，既可用于顶点，也可用于片断。
  <body>
    <canvas id="cvs" width="200" height="200" style="border: dashed 1px red">
      你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
      //获取画布元素
      var cvs = document.getElementById('cvs')
      //获取到元素的上下文环境对象
      var gl = cvs.getContext('webgl')

      //顶点着色器变量
      var VSHADER_SOURCE =
        //使用存储限定符定义一个接受顶点坐标的变量
        'attribute vec4 a_Position;' +
        //使用存储限定符定义一个接受一致偏移量的变量
        'uniform vec4 u_Translation;' +
        'void main() {' +
        //定义点的坐标并转换成变量保存
        'gl_Position = a_Position + u_Translation; ' +
        '} '

      //片段着色器变量
      var FSHADER_SOURCE =
        'void main() {' +
        //设置图形像素的颜色并保存
        'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
        '}'

      //新建一个用于装顶点字符串的着色器对象
      var vertShader = gl.createShader(gl.VERTEX_SHADER)
      //加载保存好的顶点代码字符串变量
      gl.shaderSource(vertShader, VSHADER_SOURCE)
      //编译顶点着色器
      gl.compileShader(vertShader)

      //新建一个用于装片段字符串的着色器对象
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
      //加载保存好的片段代码字符串变量
      gl.shaderSource(fragShader, FSHADER_SOURCE)
      //编译片段着色器
      gl.compileShader(fragShader)

      //新建一个程序
      var shaderProgram = gl.createProgram()

      //分别附加两个已编译好的着色器对象
      gl.attachShader(shaderProgram, vertShader)
      gl.attachShader(shaderProgram, fragShader)

      //链接两个附件加好的着色器程序
      gl.linkProgram(shaderProgram)
      //开启程序的使用
      gl.useProgram(shaderProgram)
      //定义一个类型数组保存顶点坐标值
      var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
      //先创建一个缓存对象
      var vertexBuffer = gl.createBuffer()
      //说明缓存对象保存的类型
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
      //写入坐标数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
      //获取到顶点着色器中变量
      var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
      //将坐标值赋值给变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //开启变量值的使用
      gl.enableVertexAttribArray(a_Position)

      //定义各坐标点的统一偏移量
      var Tx = 0.2,
        Ty = 0.3,
        Tz = 0.0
      //获取到顶点着色器中uniform变量
      var u_Translation = gl.getUniformLocation(shaderProgram, 'u_Translation')
      //将多个偏移量赋值值给uniform变量
      gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0)

      //绘制指定位置的图形
      gl.drawArrays(gl.TRIANGLES, 0, 3)
    </script>
  </body>

4.2 图形旋转

在这里插入图片描述

旋转原理
为了描述一个图形的旋转过程，必须指明以下内容：

  1. 旋转轴(围绕X和Y轴旋转)
  2. 旋转的方向(顺时针和逆时针)，负值是为顺时针，正值时为逆时针
  3. 旋转的角度(图形经过的角度)
    在这里插入图片描述
    在这里插入图片描述

4.3 图形缩放

在这里插入图片描述

  • 缩放的原理
    通过改变原有图形中的矩阵值，实现图形的拉大和缩下效果，因此，只需要修改原有图形的矩阵值即可。
    在这里插入图片描述

  • 动画实现

    需求：制作一个按旋转三角形的动画

    效果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MmKI0duN-1649683016895)(/Users/taoguorong/Documents/Snagit/页面高性能图形编程/01 笔记/img/2019-03-29_15-13-39_01.jpg)]

屏幕刷新频率
图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，一般是60Hz的屏幕每16.7ms刷新一次。
动画原理
图像被刷新时，引起以连贯的、平滑的方式进行过渡变化。
核心方法

  requestAnimationFrame(callback)
  //执行一个动画,并在下次绘制前调用callback回调函数更新该动画

第5章-WebGL颜色

5.1 操作步骤介绍

在这里插入图片描述

  • 颜色添加步骤
  1. 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color
  2. 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。
  3. 重新传入到顶点坐标和颜色值的类型化数组
  4. 将数组值传入缓存中并取出，赋值给顶点的两个变量
  5. 接收缓存值并绘制图形和颜色

  • vertexAttribPointer 方法

  • 参数说明
    第1个参数指定待分配attribute变量的存储位置
    第2个参数指定缓存区中每个顶点的分量个数（1~4）
    第3个参数类型有，无符号字节，短整数，无符号短整数，整型，无符号整型，浮点型
    第4个参数表示是否将非浮点型的数据归到[0,1][-1,1]区间
    第5个参数相邻两个顶点的字节数。默认为0
    第6个参数表示缓存区对象的偏移量（以字节为单位），attribute 变量从缓冲区中的何处开始存储

  • 案例实现

  1. 添加画布元素，并获取webGL对象，保存在变量中。
  2. 定义着色器内容，并进行附件编译。
  3. 使用缓存对象向顶点传入多个坐标数据。
  4. 根据坐标数据绘制图像。

5.2 着色器编译与图像绘制

  <body>
    <canvas id="cvs" width="200" height="200" style="border: dashed 1px red">
      你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
      //获取画布元素
      var cvs = document.getElementById('cvs')
      //获取到元素的上下文环境对象
      var gl = cvs.getContext('webgl')

      //顶点着色器变量
      var VSHADER_SOURCE =
        //使用存储限定符定义一个接受顶点坐标的变量
        'attribute vec4 a_Position;' +
        'attribute vec4 a_Color;' +
        'varying vec4 v_Color;' +
        'void main() {' +
        //定义点的坐标并转换成变量保存
        'gl_Position = a_Position; ' +
        'v_Color = a_Color; ' +
        '} '

      //片段着色器变量
      var FSHADER_SOURCE =
        'precision mediump float;' +
        'varying vec4 v_Color;' +
        'void main() {' +
        //设置图形像素的颜色并保存
        'gl_FragColor = v_Color ;' +
        '}'

      //新建一个用于装顶点字符串的着色器对象
      var vertShader = gl.createShader(gl.VERTEX_SHADER)
      //加载保存好的顶点代码字符串变量
      gl.shaderSource(vertShader, VSHADER_SOURCE)
      //编译顶点着色器
      gl.compileShader(vertShader)

      //新建一个用于装片段字符串的着色器对象
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
      //加载保存好的片段代码字符串变量
      gl.shaderSource(fragShader, FSHADER_SOURCE)
      //编译片段着色器
      gl.compileShader(fragShader)

      //新建一个程序
      var shaderProgram = gl.createProgram()

      //分别附加两个已编译好的着色器对象
      gl.attachShader(shaderProgram, vertShader)
      gl.attachShader(shaderProgram, fragShader)

      //链接两个附件加好的着色器程序
      gl.linkProgram(shaderProgram)
      //开启程序的使用
      gl.useProgram(shaderProgram)
      //定义一个类型数组保存顶点坐标值
      var vertices = new Float32Array([
        //  x,   y,   red, green, blue
        0.0, 0.5, 1.0, 0.0, 0.0, -0.5, -0.5, 0.0, 1.0, 0.0, 0.5, -0.5, 0.0, 0.0,
        1.0,
      ])
      //先创建一个缓存对象
      var vertexBuffer = gl.createBuffer()
      //说明缓存对象保存的类型
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
      //写入坐标数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
      //获取到数组中单个元素的字节数
      var FSIZE = vertices.BYTES_PER_ELEMENT

      //获取到顶点着色器中变量
      var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
      //将坐标值赋值给变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0)
      //开启变量值的使用
      gl.enableVertexAttribArray(a_Position)

      //获取到顶点着色器中变量
      var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color')
      //将坐标值赋值给变量
      gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2)
      //开启变量值的使用
      gl.enableVertexAttribArray(a_Color)

      //绘制指定位置的图形
      gl.drawArrays(gl.TRIANGLES, 0, 3)
    </script>
  </body>
小沈曰
关注
  • 39
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
WebGL系列教程：WebGL基础知识
xiangzhihong8的专栏
08-03 847
使用顶点绘制的 2D 或 3D 模型称为网格,网格中的每个面都称为多边形，多边形由 3 个或更多顶点组成。要在 WebGL 渲染上下文中绘制模型，就必须使用 JavaScript 数组定义顶点和索引。例如，如果我们想创建一个位于坐标 {(5,5), (-5,5), (-5,-5)} 上的三角形，如下图。为了更好地理解指数，请考虑更复杂的模型，如 square，我们可以将正方形表示为一组两个三角形。
Webgl学习系列-Webgl 入门
wjsn520的博客
03-28 438
第二章 Webgl 入门。
WebGL 入门
liubangbo的专栏
07-06 3167
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
WebGL实例讲解及基础教程，应用Three.js框架，CSS动画实例，JS动画实例。
最新发布
wandertp的博客
06-02 991
本文讲解WebGL与Three.js框架的区别，通过具体实例展现Three.js框架的魅力。通过CSS代码实现动画效果，展现动态网页实例。
WebGL简介
qq_53280805的博客
01-15 1816
webGL简介
WebGL系列教程 — 绘制点（版本2、版本3、版本4、版本5）
qq_38334677的博客
03-03 763
WebGL是一种用于在Web浏览器中绘制3D图形的API，它允许开发者使用JavaScript和OpenGL ES 2.0来创建高性能的3D图形应用程序。WebGL是HTML5标准的一部分，可以在所有现代的桌面和移动浏览器中运行，包括Chrome、Firefox、Safari、Edge和Opera。WebGL提供了一种在Web浏览器中创建交互式3D图形的方法。它是一个基于着色器的渲染引擎，可以直接在Web浏览器中渲染3D图形，而无需使用任何插件或附加组件。
WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了
Python_0011的博客
09-04 8666
于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。
WebGL入门指南源代码
04-13
这个“WebGL入门指南源代码”包含了《WebGL编程指南》一书中的实践示例，旨在帮助读者深入理解WebGL的基础概念和技术。 在学习WebGL时，首先要了解的是它如何在HTML5的Canvas元素上工作。通过JavaScript调用WebGL...
Three.js快速入门教程
10-21
此外，还有一些优秀的教程和书籍，如《Three.js入门指南》、《Three.js开发指南》和《Learning Three.js》等，可以作为学习资源。 要注意的是，Three.js的更新频繁，不同版本间的API可能存在差异。因此，在查阅资料...
Unity3D入门教程中文版
08-02
本教程是专为初学者设计的中文版入门指南，旨在帮助新手快速掌握Unity3D的基本概念和操作流程。 首先，我们要了解Unity3D的核心概念。Unity引擎采用组件式架构，这意味着每个游戏对象（GameObject）都是由多个组件...
webgl-abc:WebGL 入门和实践
05-13
在"WebGL 入门和实践"的学习过程中，你将接触到以下几个关键知识点： 1. **基础概念**：首先，你需要理解WebGL的基础架构，包括渲染上下文、顶点、着色器、缓冲区和纹理等概念。WebGL的工作原理是通过JavaScript...
入门教程
02-10
【入门教程】是一个针对JavaScript编程语言中的WebGL2技术的基础教学资源。WebGL2是一种在浏览器环境中实现3D图形渲染的API，它基于OpenGL ES 3.0标准，允许开发者在网页上创建交互式的三维图形，无需任何插件。本...
glVertexAttribPointer 到底该怎么用？
低俗公子
05-05 7131
从一些OPENGL教程中学习到这个函数的一些用法，下面给出一个最简单的绘制三角形的例子： 点击这里 查看源代码   教程地址： http://www.learnopengl.com/ create program... create shader... complie shader... attach shader link program.. delete shader...
webgl基础篇视频教程-坚如磐石
11-19
webgl入门视频课程从基础开始介绍webgl技术,介绍基本的webgl渲染管线,各种常用的缓冲区的作用,以及用法,结合程序实例做到全方位的讲解；精讲三维的理论,针对三维理论中的三个矩阵变换一个坐标变换深入讲解.针对webgl核心技术逐个讲解；针对可编程管线,理论结合实践,让学员深刻的体验到shader的作用；重点围绕webgl的核心技术进行实践。
AttribPointerVertex() 与 glVertexAttribIPointer()
宁静致远...
12-01 1480
AttribPointerVertex() 与 glVertexAttribIPointer(), I 表示整形 在编程过程中遇到的一个小问题, 代码如下： GLuint index[3]{ 0, 1, 2 }; //省略... glEnableVertexAttribArray(indexN); glVertexAttribPointer(indexN, 1, GL_FLOAT,...
WebGL编程指南一：入门
Zmikoo学习之路
07-11 1778
前言 WebGL被设计出来的目的，就是在网页上创建三维的应用和用户体验，它是内嵌在浏览器中的，你不必安装插件和库就可以直接使用它。它允许Javascript在网页上显示和操作三维图形。WebGL程序由HTMLT和JavaScript文件组成。WebGL页面包含三种语言：HTML5,JavaScript,和GLSL ES,而通常GLSLES是以字符创的形式写在JavaScript中的，所以实际上We...
推荐几本对于学习WebGL有帮助的书籍
bottleplug的博客
02-23 5498
本人是今年准备毕业的大四学生，算是快进入社会的编程小白一枚，大学期间自己在网上搜集资料自学完了有关于WebGL的相关基础课程，现在在这里分享一下我学习用到的书籍，希望帮助到许多想学但又不知道如何下手的人，大家一起进步。1.首先对于有一定javascript基础的人可以看《[JavaScript权威指南(第六版)].(美)David.Flanagan》，写的很细，而且不是很难。熟读之后自己的能力会有...
WebGL学习系列-第一个程序
yanyan19880509的专栏
02-18 1311
本篇学习第一个WebGL程序——画一个点，通过此程序来理解WebGL程序的结构，这是所有后续知识的开端。画一个点先看一下效果图： 为了画这么一个点，在WebGL可不太简单，它会涉及到WebGL上下文以及着色器的概念，不要着急，咱们慢慢来理解。WebGL上下文学过Canvas的同学应该都知道，想要在浏览器中使用Canvas画图，需要先取得一个上下文，就像创建一个场景一样，有了场景才可以绘制。在W
electron教程 + WEBGL
09-02
当然，我可以帮你找到一些关于 Electron 和 WebGL 的教程。以下是一些资源供你参考： 1. Electron 官方文档：Electron 提供了详细的文档，介绍了如何使用 Electron 创建跨平台的桌面应用程序。你可以在官方网站上找到各种教程和示例代码：https://www.electronjs.org/docs 2. Electron 入门教程：这个教程介绍了如何使用 Electron 构建一个简单的桌面应用程序，并包含了一些基本的概念和示例代码：https://www.electronjs.org/docs/tutorial/first-app 3. WebGL 官方文档：WebGL 是用于在浏览器中渲染 2D 和 3D 图形的 API。你可以在官方文档中了解 WebGL 的基本原理、使用方法以及示例代码：https://developer＊＊＊ 开发者网络（MDN）提供了一个 WebGL 入门教程，涵盖了 WebGL 的基本知识、常见问题和实例演示：https://＊＊＊5. Three.js：如果你想更轻松地使用 WebGL，可以考虑使用 Three.js，它是一个基于 WebGL 的 JavaScript 库，简化了 WebGL 的复杂性。你可以在官方网站上找到文档、示例和教程：https://threejs.org/docs/index.html 希望这些资源能够帮助到你！如果你有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小沈曰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值