小游戏+threejs或者webgl 不兼容iphone吗

小游戏 企业微信 微信支付 小程序 文章 2020-07-30 17:30 1132 0 全屏看文

AI助手支持GPT4.0

小游戏+threejs或者webgl 不兼容iphone吗

跑了个threejs的demo,就画一个圆点儿,android和模拟器和浏览器都可以,就iphone不行。就几行代码:

var gl = canvas.getContext('webgl');var VSHADER_SOURCE = 'void main() {n' +   '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);n' +   '  gl_PointSize = 20.0;n' + '}n'var FSHADER_SOURCE =   'void main() {n' +   '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);n' +'}n';var program = gl.createProgram();// 创建顶点着色器var vShader = gl.createShader(gl.VERTEX_SHADER);// 创建片元着色器var fShader = gl.createShader(gl.FRAGMENT_SHADER);// shader容器与着色器绑定gl.shaderSource(vShader, VSHADER_SOURCE);gl.shaderSource(fShader, FSHADER_SOURCE);// 将GLSE语言编译成浏览器可用代码gl.compileShader(vShader);gl.compileShader(fShader);// 将着色器添加到程序上gl.attachShader(program, vShader);gl.attachShader(program, fShader);// 链接程序,在链接操作执行以后,可以任意修改shader的源代码,//对shader重新编译不会影响整个程序,除非重新链接程序gl.linkProgram(program);// 加载并使用链接好的程序gl.useProgram(program);gl.clearColor(0.0,0.0,0.0,1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.POINTS, 0 ,1);


在我的iphone7 系统是ios13.x 就是一片黑色,没有红色

Run a threejs demo and draw a dot. Android and emulator and browser are OK, but iPhone is not. Just a few lines of code: VAR GL = canvas.getContext ('webgl');var VSHADER_ SOURCE = 'void main() {n' +   '  gl_ Position = vec4(0.0, 0.0, 0.0, 1.0);n' +   '  gl_ PointSize = 20.0;n' + '}n'; var FSHADER_ SOURCE =   'void main() {n' +   '  gl_ FragColor = vec4(1.0, 0.0, 0.0, 1.0);n' +'}n';var program =  gl.createProgram (); / / create vertex shader var vshader = gl.createShader ( gl.VERTEX_ Shader); / / create slice shaders var fshader = gl.createShader ( gl.FRAGMENT_ Shader); / / the shader container is bound to the shader gl.shaderSource (vShader, VSHADER_ SOURCE); gl.shaderSource (fShader, FSHADER_ Source); / / compile GLSE into browser code gl.compileShader (vShader); gl.compileShader (fshader); / / add the shader to the program gl.attachShader (program, vShader); gl.attachShader (program, fShader); //After the link operation is executed, you can modify the source code of the shader at will, / / recompiling the shader will not affect the whole program, unless the program is relinked gl.linkProgram (program); / / load and use the linked program gl.useProgram (program); gl.clearColor (0.0,0.0,0.0,1.0); gl.clear ( gl.COLOR_ BUFFER_ BIT); gl.drawArrays ( gl.POINTS In my iPhone 7 system, IOS 13. X is black, not red

回答:

Forever:

threeJS会自动开启帧循环吗?,如果不会自动开启那就手动开启帧循环,因为真机环境必须逐帧调用

猫先生:最近有挺多开发者反馈: 使用gl直接首屏渲染,在开发者工具和Android上表现ok,但是在IOS上表现异常(往往是黑屏);原理上的差异是什么?
猫先生:目前表现ok的往往需要gl.createBuffer,然后往里面填充数据才可以
猫先生:

下面的代码ok:

var gl = wx.createCanvas().getContext('webgl');var VSHADER_SOURCE ="attribute vec4 a_Position;" +"void main() {" +    //设置坐标"gl_Position = a_Position; " +'  gl_PointSize = 20.0;n' +"} "; var FSHADER_SOURCE =   'void main() {n' +   '  gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);n' +'}n';var program = gl.createProgram();// 创建顶点着色器var vShader = gl.createShader(gl.VERTEX_SHADER);// 创建片元着色器var fShader = gl.createShader(gl.FRAGMENT_SHADER);// shader容器与着色器绑定gl.shaderSource(vShader, VSHADER_SOURCE);gl.shaderSource(fShader, FSHADER_SOURCE);// 将GLSE语言编译成浏览器可用代码gl.compileShader(vShader);gl.compileShader(fShader);// 将着色器添加到程序上gl.attachShader(program, vShader);gl.attachShader(program, fShader);// 链接程序,在链接操作执行以后,可以任意修改shader的源代码,//对shader重新编译不会影响整个程序,除非重新链接程序gl.linkProgram(program);// 加载并使用链接好的程序gl.useProgram(program);var vertices = new Float32Array([  0.0, 0.0]);var vertexBuffer = gl.createBuffer(); //将缓冲区对象绑定到目标 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); //向缓冲区写入数据 gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW); //获取坐标点 var a_Position = gl.getAttribLocation(program, 'a_Position'); //将缓冲区对象分配给a_Position变量 gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);     //连接a_Position变量与分配给它的缓冲区对象     gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0,0.0,0.0,1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.POINTS, 0 ,1);

-EOF-

AI助手支持GPT4.0