手机端的网站怎么做的,门户型网站建设方案,全屋定制十大名牌欧派,自建企业网站模板下载我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写#xff0c;每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 #xff1a;空
上一章节中我们学习了如何使用varyting变量绘制图片#xff0c;本章节#xff0c;我们学习texParameter…我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 空
上一章节中我们学习了如何使用varyting变量绘制图片本章节我们学习texParameteri的使用
!DOCTYPE html
html langen
headmeta 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/canvasscript// let imgSrc https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u3740843900,2506868884fm15gp0.jpg.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_Sampler;//纹理varying vec2 v_TexCoord;//纹理坐标系下的坐标void main(){gl_FragColor texture2D(u_Sampler,v_TexCoord);}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_Sampler gl.getUniformLocation(program, u_Sampler);//顶点坐标与纹理坐标let vertexTexCoords new Float32Array([ -0.5,0.5,-0.3,1.7,-0.5,-0.5,-0.3,-0.2,0.5,0.5,1.7,1.7,0.5,-0.5,1.7,-0.2])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);//获取图片的素材 const loadFile (event) {var file event.target.files[0];var reader new FileReader();reader.onload function (event) {// 文件里的文本会在这里被打印出来 let img new Image();img.src event.target.result;img.onload () {let texture gl.createTexture(); showImage(texture,img)}};reader.readAsDataURL(file);};function showImage(texture, img) { document.body.appendChild(img)gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);//开始0号纹理通道gl.activeTexture(gl.TEXTURE0);//想目标绑定纹理对象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, 0) gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)}/script
/body/html
