• webGL编程指南 第五章 MultiAttributeSize

    我会持续更新关于wegl的编程指南中的代码。

    当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

    git代码地址 ：git

    本章节中我我们学习使用buffer传递数据

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.  
    13.     <canvas id='canvas'>canvas>
    14.     <script>
    15.         let canvas = document.getElementById('canvas');
    16.         let gl = canvas.getContext('webgl');
    17.         //顶点着色器
    18.         let vertexShaderSource = `
    19.             attribute vec2 a_Position;
    20.             attribute float a_PointSize;
    21.             void main(){
    22.                 gl_Position = vec4(a_Position,0.0,1.0) ;
    23.                 gl_PointSize = a_PointSize;
    24.             }
    25.         `
    26.         //片元着色器
    27.         let fragmentShaderSouce = `
    28.             precision mediump float;
    29.             void main(){
    30.                 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    31.             }
    32.         `
    33.         //  创建顶点着色器
    34.         let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    35.         gl.shaderSource(vertexShader, vertexShaderSource)
    36.         gl.compileShader(vertexShader)
    37.         //创建片元着色器
    38.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    39.         gl.shaderSource(fragmentShader, fragmentShaderSouce)
    40.         gl.compileShader(fragmentShader)
    41.         //创建渲染程序
    42.         let program = gl.createProgram();
    43.         gl.attachShader(program, vertexShader);
    44.         gl.attachShader(program, fragmentShader);
    45.         gl.linkProgram(program);
    46.         //使用当前渲染程序
    47.         gl.useProgram(program)
    48.  
    49.  
    50.         //检查片元着色器的是否正确
    51.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    52.             throw gl.getProgramInfoLog(program);
    53.         }
    54.         //三角形的坐标
    55.         let positonArray = new Float32Array([
    56.             0.5, 0.5,
    57.             -0.5, -0.5, 
    58.             0.5, -0.5, 
    59.             -0.5, 0.5])
    60.         //每个坐标点但的大小
    61.         let sizeArray = new Float32Array([10.0, 20.0, 30.0,40.0])
    62.         //位置坐标变量
    63.         let a_Position = gl.getAttribLocation(program, 'a_Position');
    64.         //点的大小
    65.         let a_PointSize = gl.getAttribLocation(program, 'a_PointSize')
    66.  
    67.         //创建坐标的buffer
    68.         let buffer = gl.createBuffer();
    69.         //绑定buffer
    70.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    71.         //将三角形的坐标数据放入缓冲区
    72.         gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW) 
    73.         // a_Position 赋值
    74.         gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    75.         // 使能顶点位置
    76.         gl.enableVertexAttribArray(a_Position);
    77.  
    78.         //创建顶点大小的buffer
    79.         let pointSizeBuffer = gl.createBuffer();
    80.         //绑定buffer
    81.         gl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer);
    82.         // 将点的大小数据放入缓冲区
    83.         gl.bufferData(gl.ARRAY_BUFFER,sizeArray,gl.STATIC_DRAW);
    84.         // a_PointSize 赋值
    85.         gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0)
    86.         // 使能顶点大小
    87.         gl.enableVertexAttribArray(a_PointSize);
    88.         //绘制
    89.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    90.         gl.clear(gl.COLOR_BUFFER_BIT);
    91.         //绘制点  从第0个开始，绘制4次
    92.         gl.drawArrays(gl.POINTS, 0, 4)
    93.  
    94.     script>
    95. body>
    96.  
    97. html>

  • 相关阅读:
    flask框架添加异步任务处理模型任务
    Java 19新特性：Structured Concurrency (结构化并发编程)
    【Hierarchical Coverage Path Planning in Complex 3D Environments】
    深眸科技以需求定制AI视觉解决方案，全面赋能产品外观缺陷检测
    CSS3病毒病原体图形特效
    国庆北京游玩攻略
    推荐系统笔记（十一）：使用coo_matrix函数遇到的坑
    云原生技术实践：Kubernetes集群的部署与运维
    Linux远程连接服务器题
    JAVA重写与多态
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/134078283