WebGL编程笔记3：纹理图片texture - Rain Man - 博客园

gl_FragColor = texture2D(u_texture, vec2(outUv.x, outUv.y));. } `; let canvas = document.getElementById( 'myCanvas' );. let webgl = canvas. 首页 新闻 博问 专区 闪存 班级 我的博客 我的园子 账号设置 简洁模式... 退出登录 注册 登录 RainMan 怀仁怀朴，唯真唯实。

WebGL编程笔记3：纹理图片texture HTML部分 JavaScript部分 以下两点若不注意texture2D有可能取不到值，一片黑色。

老的显卡只支持图片尺寸为2的n次幂的纹理图片。

TEXTURE_MAG_FILTER和TEXTURE_MIN_FILTER参数需要制定。

  constvertex=` attributevec3v3Position; uniformmat4u_matrix; attributevec2inUv; varyingvec2outUv; voidmain(){ gl_Position=u_matrix*vec4(v3Position,1.0); outUv=inUv; } `; //texture2D(u_texture,vec2(outUv.x,outUv.y)); //texture2D(u_texture,outUv; //从纹理texture中根据outUv坐标取色素rgba constfragment=` precisionmediumpfloat; uniformsampler2Du_texture; varyingvec2outUv; voidmain(){ gl_FragColor=texture2D(u_texture,vec2(outUv.x,outUv.y)); } `; letcanvas=document.getElementById('myCanvas'); letwebgl=canvas.getContext('webgl'); constdata_position=newFloat32Array([ //xyzuv 30,30,0,0.0,0.0, 330,30,0,2.0,0.0, 330,330,0,2.0,2.0, 30,30,0,0.0,0.0, 330,330,0,2.0,2.0, 30,330,0,0.0,2.0 ]); constdata_mat4=glMatrix.mat4.ortho([],0,canvas.clientWidth,canvas.clientHeight,0,-10,10); //第一步：编译程序 letprogram=createProgram(webgl,vertex,fragment); //第二步：建立buffer letbuffer_position=bindBufferWidthData(webgl,webgl.ARRAY_BUFFER,data_position);//创建数据缓冲区 //第三步：变量绑定 letv3Position=bindVertexAttributePointer(webgl,program,"v3Position",3,20,0);//绑定顶点输入变量v3Position的指针和取数方式 letinUv=bindVertexAttributePointer(webgl,program,"inUv",2,20,12);//绑定顶点输入变量inUv坐标的指针和取数方式 letmatrix=setUniformMatrix(webgl,program,'u_matrix',data_mat4);//设置全局变量u_matrix的值 letimg=newImage(); img.onload=ImageLoaded; img.src='/static/imgs/sky.png'; functionImageLoaded(){ vartexture=webgl.createTexture(); webgl.activeTexture(webgl.TEXTURE1);//webgl有32个问题里图片，激活第二个纹理图片，一般使用第一个webgl.TEXTURE0 webgl.bindTexture(webgl.TEXTURE_2D,texture);//设置webgl的TEXTURE1为TEXTURE_2D，实例为创建的texture变量 //设置纹理图片的参数 webgl.texImage2D(webgl.TEXTURE_2D,0,webgl.RGBA,webgl.RGBA,webgl.UNSIGNED_BYTE,img); //图片的真实大小为256*256，实际绘制时的区域有可能大于图片实际尺寸，也有可能小于图片实际尺寸 //用于定义大于或小于真实尺寸时的图片算法，NEAREST效率高，LINEAR效率低但效果好，图片较小时看不出差别 webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MAG_FILTER,webgl.NEAREST); webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MIN_FILTER,webgl.NEAREST); //一般UV坐标或ST坐标处于0到1之间，有时也会超过1，超过1时的显示方式 //gl.REPEAT平铺 //gl.MIRRORED_REPEAT镜像（倒影）平铺 //gl.CLAMP_TO_EDGE使用边缘颜色填充 webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_WRAP_S,webgl.REPEAT);//横向 webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_WRAP_T,webgl.REPEAT);//纵向 letu_texture=webgl.getUniformLocation(program,"u_texture");//获取全局变量u_texture webgl.uniform1i(u_texture,1);//将全局变量赋值为webgl的第二个纹理图片 clearCanvas(webgl); webgl.drawArrays(webgl.TRIANGLES,0,6); }; 　　 函数 /** *编译shader源码并与webgl绑定，返回program对象 *@param{*}webgl *@param{*}vertex *@param{*}fragment */ functioncreateProgram(webgl,vertex,fragment){ //创建程序 letshader_vertex=webgl.createShader(webgl.VERTEX_SHADER); letshader_fragment=webgl.createShader(webgl.FRAGMENT_SHADER); webgl.shaderSource(shader_vertex,vertex); webgl.shaderSource(shader_fragment,fragment); //编译源码 webgl.compileShader(shader_vertex); webgl.compileShader(shader_fragment); if(webgl.getShaderParameter(shader_vertex,webgl.COMPILE_STATUS)===false){ console.error('CompileShaderError:shader_vertex,'+webgl.getShaderInfoLog(shader_vertex)); } if(webgl.getShaderParameter(shader_fragment,webgl.COMPILE_STATUS)===false){ console.error('CompileShaderError:shader_fragment,'+webgl.getShaderInfoLog(shader_fragment)); } //创建执行程序 letprogram=webgl.createProgram(); webgl.attachShader(program,shader_vertex); webgl.attachShader(program,shader_fragment); //连接context和program webgl.linkProgram(program); if(webgl.getProgramParameter(program,webgl.LINK_STATUS)===false){ console.error(webgl.getProgramInfoLog(program)); } webgl.useProgram(program); returnprogram; } /** *向webgl添加buffer并传入data *@param{*}webgl *@param{*}target数据类型，gl.ARRAY_BUFFER *@param{*}data */ functionbindBufferWidthData(webgl,target,data){ letbuffer=webgl.creat WebGL编程笔记3：纹理图片texture-RainMan-博客园 首页 新闻 博问 专区 闪存 班级 我的博客 我的园子 账号设置 简洁模式... 退出登录 注册 登录 RainMan 怀仁怀朴，唯真唯实。

WebGL编程笔记3：纹理图片texture HTML部分 JavaScript部分 以下两点若不注意texture2D有可能取不到值，一片黑色。

老的显卡只支持图片尺寸为2的n次幂的纹理图片。

TEXTURE_MAG_FILTER和TEXTURE_MIN_FILTER参数需要制定。

  constvertex=` attributevec3v3Position; uniformmat4u_matrix; attributevec2inUv; varyingvec2outUv; voidmain(){ gl_Position=u_matrix*vec4(v3Position,1.0); outUv=inUv; } `; //texture2D(u_texture,vec2(outUv.x,outUv.y)); //texture2D(u_texture,outUv; //从纹理texture中根据outUv坐标取色素rgba constfragment=` precisionmediumpfloat; uniformsampler2Du_texture; varyingvec2outUv; voidmain(){ gl_FragColor=texture2D(u_texture,vec2(outUv.x,outUv.y)); } `; letcanvas=document.getElementById('myCanvas'); letwebgl=canvas.getContext('webgl'); constdata_position=newFloat32Array([ //xyzuv 30,30,0,0.0,0.0, 330,30,0,2.0,0.0, 330,330,0,2.0,2.0, 30,30,0,0.0,0.0, 330,330,0,2.0,2.0, 30,330,0,0.0,2.0 ]); constdata_mat4=glMatrix.mat4.ortho([],0,canvas.clientWidth,canvas.clientHeight,0,-10,10); //第一步：编译程序 letprogram=createProgram(webgl,vertex,fragment); //第二步：建立buffer letbuffer_position=bindBufferWidthData(webgl,webgl.ARRAY_BUFFER,data_position);//创建数据缓冲区 //第三步：变量绑定 letv3Position=bindVertexAttributePointer(webgl,program,"v3Position",3,20,0);//绑定顶点输入变量v3Position的指针和取数方式 letinUv=bindVertexAttributePointer(webgl,program,"inUv",2,20,12);//绑定顶点输入变量inUv坐标的指针和取数方式 letmatrix=setUniformMatrix(webgl,program,'u_matrix',data_mat4);//设置全局变量u_matrix的值 letimg=newImage(); img.onload=ImageLoaded; img.src='/static/imgs/sky.png'; functionImageLoaded(){ vartexture=webgl.createTexture(); webgl.activeTexture(webgl.TEXTURE1);//webgl有32个问题里图片，激活第二个纹理图片，一般使用第一个webgl.TEXTURE0 webgl.bindTexture(webgl.TEXTURE_2D,texture);//设置webgl的TEXTURE1为TEXTURE_2D，实例为创建的texture变量 //设置纹理图片的参数 webgl.texImage2D(webgl.TEXTURE_2D,0,webgl.RGBA,webgl.RGBA,webgl.UNSIGNED_BYTE,img); //图片的真实大小为256*256，实际绘制时的区域有可能大于图片实际尺寸，也有可能小于图片实际尺寸 //用于定义大于或小于真实尺寸时的图片算法，NEAREST效率高，LINEAR效率低但效果好，图片较小时看不出差别 webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MAG_FILTER,webgl.NEAREST); webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MIN_FILTER,webgl.NEAREST); //一般UV坐标或ST坐标处于0到1之间，有时也会超过1，超过1时的显示方式 //gl.REPEAT平铺 //gl.MIRRORED_REPEAT镜像（倒影）平铺 //gl.CLAMP_TO_EDGE使用边缘颜色填充 webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_WRAP_S,webgl.REPEAT);//横向 webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_WRAP_T,webgl.REPEAT);//纵向 letu_texture=webgl.getUniformLocation(program,"u_texture");//获取全局变量u_texture webgl.uniform1i(u_texture,1);//将全局变量赋值为webgl的第二个纹理图片 clearCanvas(webgl); webgl.drawArrays(webgl.TRIANGLES,0,6); }; 　　 函数 /** *编译shader源码并与webgl绑定，返回program对象 *@param{*}webgl *@param{*}vertex *@param{*}fragment */ functioncreateProgram(webgl,vertex,fragment){ //创建程序 letshader_vertex=webgl.createShader(webgl.VERTEX_SHADER); letshader_fragment=webgl.createShader(webgl.FRAGMENT_SHADER); webgl.shaderSource(shader_vertex,vertex); webgl.shaderSource(shader_fragment,fragment); //编译源码 webgl.compileShader(shader_vertex); webgl.compileShader(shader_fragment); if(webgl.getShaderParameter(shader_vertex,webgl.COMPILE_STATUS)===false){ console.error('CompileShaderError:shader_vertex,'+webgl.getShaderInfoLog(shader_vertex)); } if(webgl.getShaderParameter(shader_fragment,webgl.COMPILE_STATUS)===false){ console.error('CompileShaderError:shader_fragment,'+webgl.getShaderInfoLog(shader_fragment)); } //创建执行程序 letprogram=webgl.createProgram(); webgl.attachShader(program,shader_vertex); webgl.attachShader(program,shader_fragment); //连接context和program webgl.linkProgram(program); if(webgl.getProgramParameter(program,webgl.LINK_STATUS)===false){ console.error(webgl.getProgramInfoLog(program)); } webgl.useProgram(program); returnprogram; } /** *向webgl添加buffer并传入data *@param{*}webgl *@param{*}target数据类型，gl.ARRAY_BUFFER *@param{*}data */ functionbindBufferWidthData(webgl,target,data){ letbuffer=webgl.createBuffer(); webgl.bindBuffer(target,buffer); webgl.bufferData(target,data,webgl.STATIC_DRAW);//内存数据传入显存 } /** *建立JS变量和顶点输入变量的引用，返回JS变量 *@param{*}webgl *@param{*}program *@param{String}varNameShader中的变量名 *@param{Number}varSize变量维度 *@param{Number}stride每段数据长度 *@param{Number}offset每段中的偏移量 */ functionbindVertexAttributePointer(webgl,program,varName,varSize,stride,offset){ varpointer=webgl.getAttribLocation(program,varName); webgl.vertexAttribPointer(pointer,varSize,webgl.FLOAT,false,stride,offset); webgl.enableVertexAttribArray(pointer); returnpointer; } /** *向Shader传入mat4类型的全局变量 *@param{*}webgl *@param{*}program *@param{String}varName变量名称 *@param{mat4}data变量值 */ functionsetUniformMatrix(webgl,program,varName,data){ letmatrix=webgl.getUniformLocation(program,'u_matrix'); webgl.uniformMatrix4fv(matrix,false,data);//rgba returnmatrix; } functionclearCanvas(webgl){ webgl.clearColor(0.7,0.7,0.7,1); webgl.clear(webgl.COLOR_BUFFER_BIT); } 　　 posted@ 2020-03-2916:56  RainMan  阅读(1633)  评论(0)  编辑  收藏  举报 刷新评论刷新页面返回顶部 Copyright©2022RainMan Poweredby.NET6onKubernetes 友情链接：北京航宇中瑞测控技术有限公司