zoukankan      html  css  js  c++  java
  • WebGL通过getAttribLocation向顶点坐标器传递信息

    <canvas style="border: red solid 3px;" id='webgl' width='500' height='500'>不支持</canvas>
    <script>
        //顶点着色器程序
        var VSH =
            'attribute vec4 a_Position;
    ' +
            'attribute float a_PointSize;
    ' +
            'void main(){
    ' +
                'gl_Position = a_Position;
    ' + //坐标
                'gl_PointSize = a_PointSize;
    ' + //尺寸
            '}
    ';
    
        //片元着色器程序
        var FSH =
            'void main(){
    ' +
                'gl_FragColor = vec4(1.0,0.5,0.9,1.0);
    ' + //颜色
            '}
    ';
    
    
    
        var canvas = document.getElementById('webgl');
        var gl = getWebGLContext(canvas);
        initShaders(gl, VSH, FSH); //初始化着色器
    
        var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取attribute -> a_Position变量的存储地址
        gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);    //将顶点的位置传给attribute变量
    
        var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'); //获取attribute -> a_PointSize变量的存储地址
        gl.vertexAttrib1f(a_PointSize, 150.0);    //将顶点的位置传给attribute变量
    
        gl.clearColor(0.0, 0.0, 1.0, 1.0); //指定背景色
        gl.clear(gl.COLOR_BUFFER_BIT); //填充
        gl.drawArrays(gl.POINTS, 0, 1); //绘制一个点
        /*
            因为绘制的是单独的点,所以是gl.POINTS
            第二个参数为0,表示从第一个顶点画起
            第三个参数为1,表示在程序中只绘制了一个点
        */
    
    </script>
  • 相关阅读:
    day01的那些事
    Activity活动
    开始认真学习Android了
    《知其所以然》读书笔记
    网络编程——完成端口
    开发服务器端——工程配置
    完善自己的学习方法
    WSAAsyncSelect模型
    双缓冲绘图
    ListControl常用操作汇总
  • 原文地址:https://www.cnblogs.com/tongyuzhe/p/10452969.html
Copyright © 2011-2022 走看看