可视化基础（3）

最新推荐文章于 2024-07-24 16:53:23 发布

雍仲

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量109

点赞数

文章标签： html 可视化前端 webgl

本文链接：https://blog.csdn.net/weixin_45475077/article/details/109298575

版权

webGL

本篇只是让大家对于webGL 有个大致认知即可，了解他的大致流程；因为我们在项目中的开发都是基于各种封装好的框架如 three.js等

webGL 是一种绘图协议，本质基于的元素标签还是canvas；语言大部分还是我们前端的这些语言，只是添加了一个着色器语言GLSL ES,但是我们不了解这个没有关系，不影响我们后边的进行

基于webGL编写一个简单的例子

<!--html部分-->

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>认识webGL</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%
        }
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
 </head>
 <body>
  <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
  <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
 </body>
</html>

<!--同canvas2d绘图一样，创造一个绘画环境-->

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

<!--创造顶点着色器源码(着色器语言GLSL ES)-->  

//顶点着色器定义了顶点的渲染位置和点的渲染像素大小
  var vertexShaderSource = '' +
      'void main(){' +
      //给内置变量gl_PointSize赋值像素大小
      '   gl_PointSize=20.0;' +
      //顶点位置，位于坐标原点
      '   gl_Position =vec4(0.0,0.0,0.0,1.0);' +
      '}';
  //gl_PointSize、gl_Position都是内置变量，
  //给内置变量gl_Position赋值vec4(0.0,0.0,0.0,1.0)，也就是设置顶点位置坐标，vec4代表的是一种数据类型， 在这里可以理解为vec4()是一个可以构造出vec4类型数据的构造函数，前三个参数表示顶点坐标值xyz。

<!--创造片元着色器源码(着色器语言GLSL ES)-->
  //片元着色器定义了点的渲染结果像素的颜色值
  var fragShaderSource = '' +
      'void main(){' +
      //定义片元颜色
      '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
      '}';
  //gl_FragColor都是内置变量， 
  //给内置变量gl_FragColor赋值vec4(1.0,0.0,0.0,1.0)，也就是设置会在屏幕上显示的像素的颜色，vec4()构造函数 前三个参数，表示颜色RGB值，最后一个参数是透明度A。在WebGL着色器中颜色值使用[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;
  }

<!--绘制图形-->

 var program = initShader(gl,vertexShaderSource,fragShaderSource);
  //开始绘制，显示器显示结果
  gl.drawArrays(gl.POINTS,0,1);
  //gl.drawArrays()方法的作用就是通知GPU执行着色器代码，然后根据着色器代码在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>
  <script>
  //通过getElementById()方法获取canvas画布
  var canvas=document.getElementById('webgl');
  //通过方法getContext()获取WebGL上下文
  var gl=canvas.getContext('webgl');

  //顶点着色器源码
  var vertexShaderSource = '' +
      'void main(){' +
      //给内置变量gl_PointSize赋值像素大小
      '   gl_PointSize=20.0;' +
      //顶点位置，位于坐标原点
      '   gl_Position =vec4(0.0,0.0,0.0,1.0);' +
      '}';

  //片元着色器源码
  var fragShaderSource = '' +
      'void main(){' +
      //定义片元颜色
      '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
      '}';
  //声明初始化着色器函数
  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;
  }
  //初始化着色器
  var program = initShader(gl,vertexShaderSource,fragShaderSource);
  //开始绘制，显示器显示结果
  gl.drawArrays(gl.POINTS,0,1);

  
   </script>
 </body>
</html>

webGL教程 >>

雍仲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可视化基础（3）

webGL本篇只是让大家对于webGL 有个大致认知即可，了解他的大致流程；因为我们在项目中的开发都是基于各种封装好的框架如 three.js等webGL 是一种绘图协议，本质基于的元素标签还是canvas；语言大部分还是我们前端的这些语言，只是添加了一个着色器语言GLSL ES,但是我们不了解这个没有关系，不影响我们后边的进行基于webGL编写一个简单的例子<!DOCTYPE html><html lang="en"> &
复制链接

扫一扫