博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Hello Point——WebGL
阅读量:5788 次
发布时间:2019-06-18

本文共 2180 字,大约阅读时间需要 7 分钟。

            
画一个点
function main(){    var canvas = document.getElementById('webgl');//获得canvas元素        var param = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];        var gl;    for (var i = 0; i < param.length; i++) {        gl = canvas.getContext(param[i]);//创建webgl context(得到画图区域)                if (gl) {            break;        }    }        if (!gl) {        console.log('浏览器不支持WEBGL!');    }        gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定颜色        gl.clear(gl.COLOR_BUFFER_BIT);//使用指定的颜色清空画图区域        //编写vertex shader,vertex shader指定特性(位置、大小、颜色等)    //gl_Position指定了点的位置,在三维空间,有XYZ三个轴的坐标,最后一个是透明度,0-1,1代表完全不透明,0则是完全透明    //vec4,是表示一个有四个参数的向量,在WebGL中均采用此类名称,vec表示vector类别,4表示接收四个参数    //每一个参数必须是float类型的,即要加小数点,WebGL采用严格类型,不能使用整型参数    //gl_PointSize 定义点的大小,同样是float类型    var vShaderSource = 'void main(){ \n' +    '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' +    '    gl_PointSize = 10.0; \n' +    '} \n';        //编写frament shader,可以理解成对每个像素进行处理    //gl_FragColor接收vec4类型的参数,即RGBA,RGB为三原色,最后代表透明度    var fShaderSource = 'void main(){ \n' +    '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' +    '} \n';        //其实这一段非常像C,编写源代码,编译,链接...    var vShader = gl.createShader(gl.VERTEX_SHADER);//创建shader    gl.shaderSource(vShader, vShaderSource);//把shader source关联到shader上    gl.compileShader(vShader);//编译shader    var vCompiled = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);        var fShader = gl.createShader(gl.FRAGMENT_SHADER);    gl.shaderSource(fShader, fShaderSource);    gl.compileShader(fShader);    var fCompiled = gl.getShaderParameter(fShader, gl.COMPILE_STATUS);        var program = gl.createProgram();    gl.attachShader(program, vShader);//将编译完的vertex shader和fragment shader关联到创建的program上    gl.attachShader(program, fShader);        gl.linkProgram(program);//链接program    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);        gl.useProgram(program);        gl.drawArrays(gl.POINTS, 0, 1);//第一个参数POINTS表示画点,第二个参数根据前面指定的gl_Position,从第0个元素开始,因为每个点需要三个坐标,即(0.0, 0.0, 0.0),第三个参数表示画一个}

其中红色加粗的均为WebGL中的方法,为了方便理解,并未对代码结构作规划,重点在于理解WebGL。

转载于:https://www.cnblogs.com/idealer3d/p/3513838.html

你可能感兴趣的文章
6倍性能差100TB容量,阿里云POLARDB咋实现?
查看>>
linux 安装 MySQLdb for python
查看>>
Sublime Text 2 技巧
查看>>
使用fscanf()函数从磁盘文件读取格式化数据
查看>>
参加婚礼
查看>>
h5 audio相关手册
查看>>
刚毕业从事java开发需要掌握的技术
查看>>
CSS Custom Properties 自定义属性
查看>>
vim
查看>>
MVVM计算器(下)
查看>>
C++中指针和引用的区别
查看>>
簡單分稀 iptables 記錄 udp 微軟 138 端口
查看>>
Java重写equals方法和hashCode方法
查看>>
Spark API编程动手实战-07-join操作深入实战
查看>>
H3C-路由策略
查看>>
centos 修改字符界面分辨率
查看>>
LNMP之Mysql主从复制(四)
查看>>
阅读Spring源代码(1)
查看>>
nagios一键安装脚本,nagios监控被监控主机上的应用服务mysql数据库
查看>>
grep 命令
查看>>