WEBGL基础概念及代码

WEBGL基础概念及代码

"use strict";function createShader(gl,type,source){ var shader = gl.createShader(type);//创建着色器对象 gl.shaderSource(shader,source);//提供数据按 gl.compileShader(shader);//编译-》生成着色器 var success = gl.getShaderParameter(shader,gl.COMPILE_STATUS); if(success){ return shader; } console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader);}function createProgram(gl, vertexShader, fragmentShader) { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); var success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) { return program; } console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program);}function main(){ var canvas = document.getElementById("c"); var gl=canvas.getContext("webgl"); if(!gl){ return ; } /** * 初始化代码*///以下函数为创建着色器方法，输入参数，渲染上下文，着色器类型，数据源//利用以上方法创建着色器 var vertexShaderSource=document.getElementById("2d-vertex-shader").text; var fragmentShaderSource=document.getElementById("2d-fragment-shader").text; var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource); var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentShaderSource);//将两个着色器link到一个program着色程序上//调用上面的函数 var program = createProgram(gl, vertexShader, fragmentShader); var program=createProgram(gl,vertexShader,fragmentShader);//后面要给着色程序提供数据，先找到属性值的位置 var positionAttributeLocation = gl.getAttribLocation(program,"a_position");//此步骤应该在初始化时完成 var resolutionUniformLocation = gl.getUniformLocation(program,"u_resolution"); var colorUniformLocation = gl.getUniformLocation(program, "u_color");//属性值从缓冲获取数据，所以我们创建一个缓冲 var positionBuffer = gl.createBuffer();//绑定点操控全局范围的数据，可以想象成全局变量，下面操作是绑定点指向数据源。 gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//通过绑定点向缓冲中存放数据，这其实就是opengl中的VBO var positions = [ 10,20, 80,20, 10,30, 10,30, 80,20, 80,30, ]; gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);//这里WEBGL需要强类型数据，所以nwe Float32Array,通过讲数据绑定到绑定点，最终被传递到positionBuffer,后面的参数是数据使用方式 /** * 渲染代码*///画布：两个属性：1，实际像素个数。 2，画布的显示大小 //应该尽可能使用css设置画布大小//初始化代码只执行一次，渲染代码在每次需要渲染的时候执行 webglUtils.resizeCanvasToDisplaySize(gl.canvas);//通过gl.viewport将把gl_Position剪裁空间坐标对应到画布像素坐标 gl.viewport(0,0,gl.canvas.width,gl.canvas.height);//清空画布 gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT);//告诉webgl运行那个着色程序 gl.useProgram(program);//设置当前使用的周色程序//接下来告诉webgl从之前准备的缓冲中获取数据给着色器中的属性 gl.enableVertexAttribArray(positionAttributeLocation);//指定从缓冲中读取数据的方式//讲绑定点绑定到缓冲数据 gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//告诉属性怎么从positionBuffer中读取数据,因为已经绑定就是从ARRAY_BUFFER中 var size=2;//每次迭代运行提取两个数据单元 var type=gl.FLOAT; // 每个单位的数据类型是32位浮点型 var normalize=false; //不需要归一化数据 var stride = 0;//0=移动单位*每个单位的占用内存(sizeof(type)) //每次迭代运动多少内存到下一个数据开始点 var offset=0; //从缓冲起始位置开始读取 gl.vertexAttribPointer( positionAttributeLocation,size,type,normalize,stride,offset );//gl.vertexAtrribPointer是将属性绑定到当前ARRAY_BUFFER，所以就绑定到了positionBuffer上 //设置全局变量 分辨率 gl.uniform2f(resolutionUniformLocation,gl.canvas.width,gl.canvas.height);//运行GLSL着色程序 var primitiveType = gl.TRIANGLES; var offset=0; var count=6; gl.uniform4f(colorUniformLocation,0,0,0,1);//设置黑色 gl.drawArrays(primitiveType,offset,count); drawRandomRect50(); function drawRandomRect50(){ for(var ii=0;ii<50;++ii){ //创建一个随机矩阵 //并将写入位置缓冲 因为此时位置缓冲是我们绑定在ARRAY_BUFFER绑定点上的最后一个缓冲 setRectangle(gl,randomInt(300),randomInt(300),randomInt(300),randomInt(300)); //设置一个随机颜色 gl.uniform4f(colorUniformLocation,Math.random(),Math.random(),Math.random(),1); //绘制矩形 gl.drawArrays(gl.TRIANGLES,0,6); } function randomInt(range){ return Math.floor(Math.random()*range); } function setRectangle(gl,x,y,width,height){ var x1=x; var x2=x+width; var y1=y; var y2=y+height; //注意gl.bufferData(gl.ARRAY_BUFFER)将会影响到当前绑定的缓冲 //目前只有一个缓冲，如果我们有多个缓冲 //我们需要先将所需缓冲绑定到ARRAY_BUFFER gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([ x1,y1, x2,y1, x1,y2, x1,y2, x2,y1, x2,y2 ]),gl.STATIC_DRAW); } }}//一下例子绘制50个随机颜色矩形main();

结果：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。