跑了个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 就是一片黑色,没有红色
下面的代码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);
threeJS会自动开启帧循环吗?,如果不会自动开启那就手动开启帧循环,因为真机环境必须逐帧调用