• 初识webGL

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas width="300" height="300">canvas>
    9.  
    10. <script>
    11.     let canvas = document.querySelector('canvas');
    12.     let gl = canvas.getContext('webgl');
    13.     //在 GLSL 中，attribute 表示声明变量，vec2 是变量的类型，它表示一个二维向量，position 是变量名。接下来我们将 buffer 的数据绑定给顶点着色器的 position 变量。
    14.     //着色器 顶点和图元构成
    15.     const vertex = `
    16.       attribute vec2 position;
    17.       varying vec3 color;
    18.       void main() {
    19.         gl_PointSize = 1.0;
    20.         color = vec3(0.5 + position * 0.5, 0.0);
    21.         gl_Position = vec4(position * 0.5, 1.0, 1.0);
    22.       }
    23.     `;
    24.     //片元
    25.     const fragment = `
    26.       precision mediump float;
    27.       varying vec3 color;
    28.       void main(){
    29.         gl_FragColor = vec4(color, 1.0);
    31.       }
    32.     `
    33.     //构建片元着色器
    34.     //传入顶点 传入图元
    35.     //着色器 分为两部分 一个顶点着色器  一个片元着色器
    36.     const vertexShader = gl.createShader(gl.VERTEX_SHADER)
    37.     gl.shaderSource(vertexShader, vertex);
    38.     gl.compileShader(vertexShader)
    39.  
    40.     const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
    41.     gl.shaderSource(fragmentShader,fragment)
    42.     gl.compileShader(fragmentShader)
    43.     // 关联着色器
    44.     let webGLProgram = gl.createProgram();
    45.     gl.attachShader(webGLProgram,vertexShader);
    46.     gl.attachShader(webGLProgram, fragmentShader);
    47.     gl.linkProgram(webGLProgram)
    48.     //使用webGLProgram程序
    49.     gl.useProgram(webGLProgram)
    50.  
    51.     //构建顶点数据
    52.     //webGL需要使用类型数组定义 默认格式:FloatArray
    53.     const points = new Float32Array([
    54.         -1,-1,
    55.         0, 1,
    56.         1, -1
    57.     ])
    58.     //将数据写入缓冲区 createBuffer bindBuffer bufferData
    59.     let webGLBuffer = gl.createBuffer();
    60.     gl.bindBuffer(gl.ARRAY_BUFFER, webGLBuffer);
    61.  
    62.     //webgl支持的图元类型有七种，分别是 gl.POINTS(点), gl.LINES(线段), gl.LINE_STRIP(线条), gl.LINE_LOOP(回路), gl.TRIANGLES(三角形), gl.TRIANGLE_STRIP(三角带), gl.TRIANGLE_FAN(三角扇)。
    63.     //要绘制空心三角形，gl.LINE_STRIP(线条)、gl.LINES(线段)、 gl.LINE_LOOP(回路)都可以实现
    64.  
    65.     gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)
    66.  
    67.     //将数据写道cpu
    68.     //获取顶点 着色器中的position变量的地址
    69.     const vPosition = gl.getAttribLocation(webGLProgram, 'position');
    70.     //给变量设置长度和类型
    71.     gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    72.     //激活这个变量
    73.     gl.enableVertexAttribArray(vPosition);
    74.     //最后一步数据绘图
    75.     gl.clear(gl.COLOR_BUFFER_BIT);
    76.     gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
    77. script>
    78.  
    79.  
    80. body>
    81. html>

  • 相关阅读:
    【Linux】分布式版本控制工具git
    《Go Web 编程》之第7章 Go Web服务
    Android的亮灯逻辑辨析
    vue2.x引入threejs
    Android 集成Flutter模块踩坑之路
    基于ssm的美妆购物平台管理系统（idea+spring+springmvc+mybatis+jsp）
    Ubuntu部署K8S
    React---基础
    Rust多线程编程
    Linux生产者消费者模型
  • 原文地址：https://blog.csdn.net/Jantelope/article/details/126343019