// wxml<view class="container"> <!-- 加载地图容器 --> <canvas type="webgl" id="testMap" style="width: 100%; height: 100%;" disable-scroll bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas></view>Page({ data: {}, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { wx.createSelectorQuery().select('#testMap') .fields({ node: true, size: true }) .exec((res) => { let textCanvas = res[0].node; // 重点1 let gl = textCanvas.getContext('webgl'); // 重点2 const vsSource = ` attribute vec4 aVertexPosition; attribute vec2 aTextureCoord; varying highp vec2 vTextureCoord; void main(void) { gl_Position = aVertexPosition; vTextureCoord = aTextureCoord; }`; // Fragment shader source code const fsSource = ` varying highp vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x,1.0-vTextureCoord.y)); }`; // Initialize shaders function initShaderProgram(gl, vsSource, fsSource) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram)); return null; } return shaderProgram; } function loadShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } const shaderProgram = initShaderProgram(gl, vsSource, fsSource); const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'), textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'), }, uniformLocations: { uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'), }, }; // Initialize buffers const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); const positions = [ -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); const textureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); const textureCoordinates = [ 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW); // Load texture function loadTexture(gl, cb) { const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); const level = 0; const internalFormat = gl.RGBA; const srcFormat = gl.RGBA; const srcType = gl.UNSIGNED_BYTE; const image = textCanvas.createImage(); image.onload = function () { gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); cb(); }; image.src = 'data:image/png;base64,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'; return texture; } const texture = loadTexture(gl, () => { render(); }); // Draw the scene function drawScene(gl, programInfo, buffers, texture) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(programInfo.program); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); gl.uniform1i(programInfo.uniformLocations.uSampler, 0); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } function render() { drawScene(gl, programInfo, { position: positionBuffer, textureCoord: textureCoordBuffer }, texture); } render(); }) },})最后效果:
