On iOS only, I noticed that my textured meshes do not show on the first render of my WebGL component, but show correctly on every subsequent render.
onContextCreate = (gl) => {
this.width = 4;
this.height = (metrics.height / metrics.width) * this.width;
this.camera = createCamera(this.width, this.height);
this.gl = gl;
this.renderer = createRenderer({ gl });
this.renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
const context = gl.getExtension('RN');
this.createScene();
const animate = () => {
requestAnimationFrame(animate);
this.renderer.render(this.scene, this.camera);
context.endFrame();
};
animate();
};
createScene = () => {
this.scene = new THREE.Scene();
this.background = meshes.createBackground((2000 / metrics.width) * this.width, this.height, this.gl, this.renderer);
this.plane = meshes.createPlane(this.gl, this.renderer);
this.scene.add(this.background);
this.scene.add(this.plane);
};
panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: this.touch,
});
render() {
return (
<WebGLView
{...this.panResponder.panHandlers}
style={{ width: metrics.width, height: metrics.height }}
onContextCreate={this.onContextCreate}
/>
);
}
export const loadThreeJSTexture = (gl, src, texture, renderer) => {
var properties = renderer.properties.get(texture);
gl
.getExtension('RN')
.loadTexture({ yflip: true, image: src })
.then(({ texture }) => {
properties.__webglTexture = texture;
properties.__webglInit = true;
texture.needsUpdate = true;
});
};
export const loadTexture = (gl, src, renderer) => {
const texture = new THREE.Texture();
const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, overdraw: 0.5 });
loadThreeJSTexture(gl, src, texture, renderer);
return material;
};
export const createBackground = (width, height, gl, renderer) => {
const blueBackground = new THREE.BoxGeometry(width, height, 0);
const material = loadTexture(gl, require('background.png'), renderer);
const mesh = new THREE.Mesh(blueBackground, material);
mesh.position.z = -40;
return mesh;
};
export const createPlane = (gl, renderer) => {
const geometry = new THREE.PlaneBufferGeometry(0.6, 1);
const material = loadTexture(gl, require('plane.png'), renderer);
const mesh = new THREE.Mesh(geometry, material);
return mesh;
};
export const createStar = (width, x, y) => {
const geometry = new THREE.CircleGeometry(width, 12);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = -1;
return mesh;
};
On the first render only, nothing appears but the red circle star.
Am I loading the textures incorrectly ?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
