家居在线设计网站,wordpress游戏网站模板,wordpress post请求,网站建设推广案例我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 #xff1a;空 上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合
!DOCTYPE html
htm…我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 空 上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewporttitleDocument/titlestyle#canvas {width: 100vw;height: 100vw;border: 1px solid greenyellow;}/style
/headbody!!!!!需要指出的是要选择当前文件夹下的sky.jpg!!!!!!!-- input typefile acceptimage/* onchangeloadFile(event) --input typefile onchangeloadFile(event)canvas idcanvas/canvasscriptlet imgSrc https://p2.music.126.net/UrFqYFILx5wBDx-dsIz15A/109951163025047288.jpg?param256y256;let jpgImgSrc https://p1.music.126.net/LOTxqRjFm03VJEOHJbUqMw/109951165944804127.jpg?param256y256;// let jpgImgSrc https://img-blog.csdnimg.cn/361654c6611d49bebab085509bd6a244.jpeg;// let gifImagSrc https://img-blog.csdnimg.cn/04f072cdb3934051a505a54a4d6f46ed.gif;let vexterSource precision mediump float;attribute vec4 a_Position;attribute vec2 a_TexCoord;varying vec2 v_TexCoord;void main(){gl_Position a_Position;//顶点坐标v_TexCoord a_TexCoord;//纹理坐标系下的坐标}let fragmentSource precision mediump float;uniform sampler2D u_Sampler0;//纹理uniform sampler2D u_Sampler1;//纹理varying vec2 v_TexCoord;//纹理坐标系下的坐标void main(){vec4 color0 texture2D(u_Sampler0,v_TexCoord);vec4 color1 texture2D(u_Sampler1,v_TexCoord);gl_FragColor color0 * color1; } let canvas document.getElementById(canvas);let gl canvas.getContext(webgl);//创建顶点着色器let vertextShader gl.createShader(gl.VERTEX_SHADER);//给顶点着色器赋值gl.shaderSource(vertextShader, vexterSource);//编译顶点着色器gl.compileShader(vertextShader);//创建片元着色器let fragmentShader gl.createShader(gl.FRAGMENT_SHADER);//给片元着色器赋值gl.shaderSource(fragmentShader, fragmentSource)//编译片元着色器gl.compileShader(fragmentShader)//检测着色器创建是否正确if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {alert(gl.getShaderInfoLog(fragmentShader));}//创建程序let program gl.createProgram();//给程序赋值gl.attachShader(program, vertextShader);gl.attachShader(program, fragmentShader);//连接程序gl.linkProgram(program);//使用此着色器gl.useProgram(program);//变量的处理//获取顶点着色器中的变量a_Positionlet a_Position gl.getAttribLocation(program, a_Position);//获取顶点着色器中的变量a_TexCoordlet a_TexCoord gl.getAttribLocation(program, a_TexCoord);//获取片元着色器中的变量u_Samplerlet u_Sampler0 gl.getUniformLocation(program, u_Sampler0);//获取片元着色器中的变量u_Samplerlet u_Sampler1 gl.getUniformLocation(program, u_Sampler1);//顶点坐标与纹理坐标let vertexTexCoords new Float32Array([-0.5, 0.5, 0.0, 1.0,-0.5, -0.5, 0.0, 0.0,0.5, 0.5, 1.0, 1.0,0.5, -0.5, 1.0, 0.0,])let f32Seize vertexTexCoords.BYTES_PER_ELEMENT;//给定点设置坐标 几何图形与纹理的坐标let vertexBuffer gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//绑定数据gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);//给a_Position赋值gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, f32Seize * 4, 0);//使用此变量gl.enableVertexAttribArray(a_Position);//纹理坐标let texCoordBuffer gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);//绑定数据gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);//给a_TexCoord赋值gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f32Seize * 4, f32Seize * 2);//使用此变量gl.enableVertexAttribArray(a_TexCoord);gl.clearColor(0, 0, 0, 1.0);//获取图片的素材 getImage(imgSrc, u_Sampler1, gl.TEXTURE0, 0);getImage(jpgImgSrc, u_Sampler1, gl.TEXTURE1, 1);function getImage(imgYrl, u_Sampler, TEXTURE, num) {// 文件里的文本会在这里被打印出来 let img new Image();img.src imgYrl;img.crossOrigin img.onload () {let texture gl.createTexture();showImage(texture, img, u_Sampler, TEXTURE, num)document.body.appendChild(img)}}function showImage(texture, img, u_Sampler, TEXTURE, texUnit) {console.log(texture, img, u_Sampler, TEXTURE, texUnit)document.body.appendChild(img)gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);//开始0号纹理通道gl.activeTexture(TEXTURE); //想目标绑定纹理对象gl.bindTexture(gl.TEXTURE_2D, texture);//配置纹理的参数gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);//设置着色器参数gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);//设置纹理数据gl.uniform1i(u_Sampler, texUnit)gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)}/script
/body/html
