- 真机拿不到纹理? 模拟器没问题
有大神能看看吗 , 没有框架, 一共150行 "use strict"; var log = console.log var glCanvas, glContext, glShader, glPositionData, glTexture var loadShader = function (shaderSource, shaderType) { const shader = glContext.createShader(shaderType); glContext.shaderSource(shader, shaderSource); glContext.compileShader(shader); return shader; } var createProgram = function (vs, fs) { var program = glContext.createProgram(); glContext.attachShader(program, loadShader(vs, glContext.VERTEX_SHADER)) glContext.attachShader(program, loadShader(fs, glContext.FRAGMENT_SHADER)) glContext.linkProgram(program); return program; } var glInit = function () { var canvas = wx.createCanvas(); var gl = canvas.getContext("webgl"); glCanvas = canvas glContext = gl glShader = createProgram(` attribute vec2 p,t; varying vec2 v; void main() { gl_Position = vec4(p * vec2(1, -1), 0, 1); v=t; }`, ` precision mediump float; varying vec2 v; uniform sampler2D s; void main() { gl_FragColor=texture2D(s,v); }`); const glVertexData = new ArrayBuffer(6 * 16); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, glVertexData.byteLength, gl.DYNAMIC_DRAW); glPositionData = new Float32Array(glVertexData); let offset = 0; const initVertexAttribArray = (name, type, typeSize, size, normalize = 0) => { const location = gl.getAttribLocation(glShader, name); gl.enableVertexAttribArray(location); gl.vertexAttribPointer(location, size, type, normalize, 16, offset); offset += size * typeSize; } initVertexAttribArray('p', gl.FLOAT, 4, 2); // position initVertexAttribArray('t', gl.FLOAT, 4, 2); // texture coords } glInit(); function glCreateTexture(image) { var gl = glContext const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); return texture; } var img_1 function load_img() { var img = wx.createImage() img.addEventListener('load', () => { glTexture = glCreateTexture(img) }) img.src = 'graphics/Ninja Frog.png' img_1 = img } load_img() function glDraw(x = 0, y = 0, w = img_1.width, h = img_1.height, uv0X = 0, uv0Y = 0, uv1X = 1, uv1Y = 1) { //world space to clip space x = x / glCanvas.width * 2 - 1 y = y / glCanvas.height * 2 - 1 w = w / glCanvas.width * 2 h = h / glCanvas.height * 2 let offset = 0 // vertex 0 glPositionData[offset++] = x; glPositionData[offset++] = y; glPositionData[offset++] = uv0X; glPositionData[offset++] = uv0Y; // vertex 1 glPositionData[offset++] = x + w; glPositionData[offset++] = y + h; glPositionData[offset++] = uv1X; glPositionData[offset++] = uv1Y; // vertex 2 glPositionData[offset++] = x; glPositionData[offset++] = y + h; glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y; // vertex 0 glPositionData[offset++] = x; glPositionData[offset++] = y; glPositionData[offset++] = uv0X; glPositionData[offset++] = uv0Y; // vertex 1 glPositionData[offset++] = x + w; glPositionData[offset++] = y + h; glPositionData[offset++] = uv1X; glPositionData[offset++] = uv1Y; // vertex 3 glPositionData[offset++] = x + w; glPositionData[offset++] = y; glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y; var gl = glContext gl.bufferData(gl.ARRAY_BUFFER, glPositionData, gl.DYNAMIC_DRAW); gl.drawArrays(gl.TRIANGLES, 0, 6); } var frame = 0; var state = 0 var tick = function () { frame ++; if (state === 0) { if (glTexture) { glContext.bindTexture(glContext.TEXTURE_2D, glTexture); glContext.useProgram(glShader); state = 1 log(frame, 'texture created', glTexture) } } else if (state === 1) { glContext.viewport(0, 0, glCanvas.width, glCanvas.height); glContext.clear(glContext.COLOR_BUFFER_BIT); glDraw(frame%100) } requestAnimationFrame(tick) } requestAnimationFrame(tick)
2023-05-14 - webgl 真机预览画不出来? 模拟器没问题
没有框架,大概400行, 谁能帮忙看看, https://developers.weixin.qq.com/s/YXAlF6mR71IX texImage2D API 现在用的是 WEBGL2 的 ,1的也试过问题一样。
2023-05-10 - webgl 真机预览画不出来? 模拟器没问题
没有框架,大概400行, 谁能帮忙看看, https://developers.weixin.qq.com/s/YXAlF6mR71IX texImage2D API 现在用的是 WEBGL2 的 ,1的也试过问题一样。
2023-05-10