uniformMatrix3fvとエラーが出る

Question

pixi.jsとThree.jsを併用させたい

Three.jsの物をpixi.jsと一緒に表示させようとすると以下のエラーが出ます。

発生している問題・エラーメッセージ

WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
[.WebGL-0000021CCCB63AD0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
WebGL: too many errors, no more errors will be reported to the console for this context.

該当のソースコード

//pixi.js
var width = window.innerWidth;
var height = window.innerHeight;
var x = width/2;
var y = height/2;
var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(width, height,{
    resolution: window.devicePixelRatio,
    backgroundColor: 0x000000,
    antialias: true
});
document.getElementById("pixiview").appendChild(renderer.view);
window.onresize = function () {
    location.reload();
};

//moji
var word = "A";
var style = {font:'bold 40pt Arial', fill:'white'};
var hitmainobj = new PIXI.Text(word, style);
stage.addChild(hitmainobj);

function animate(){
	requestAnimationFrame(animate);
	box[0].rotation.x+=0.01;
	rendererThree.render(scene, camera);//1
	renderer.render(stage);//2
}

requestAnimationFrame(animate);
//three.js
var geometry=[];
var material=[];
var box=[];
// レンダラー
var rendererThree = new THREE.WebGLRenderer({
	canvas: document.querySelector('canvas')
});
rendererThree.setPixelRatio(window.devicePixelRatio);
rendererThree.setSize(width, height);
// シーン
var scene = new THREE.Scene();
// カメラ
var camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// object
geometry[0] = new THREE.TorusGeometry( 200, 30, 20, 100, Math.PI*2);
material[0] = new THREE.MeshBasicMaterial( { color: 0x008866, wireframe:true} );
box[0] = new THREE.Mesh(geometry[0], material[0]);
scene.add(box[0]);

試したこと

1と2を入れ替えるとThree.jsで作った図形は表示されますが、Aの文字が表示されません。

補足情報（FW/ツールのバージョンなど）

pixi.js v4.8.5
Three.js r101

Answer 1

<div id="pixiview" class="canvas-wrapper"><canvas></canvas></div>

.canvas-wrapper {
    position: relative;
}
.canvas-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

上記の書き方で出来ました。同じcanvas上に表示させてはいけないみたいですね。

Answer 2

<div id="pixiview" class="canvas-wrapper"><canvas></canvas></div>

.canvas-wrapper {
    position: relative;
}
.canvas-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

上記の書き方で出来ました。別々のcanvasに表示させないとダメみたいですね。お騒がせしました。