收藏
回答

小游戏+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 就是一片黑色,没有红色

回答关注问题邀请回答
收藏

2 个回答

  • 猫先生
    猫先生
    2020-07-23

    下面的代码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);
    
    2020-07-23
    有用 1
    回复
  • Forever
    Forever
    2020-07-23

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

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