My scene has two areas. The first area takes the whole window and the second one takes a small rect in the right bottom corner. Also there are two cameras on the scene: perspective and orthographic(you can see this camera with help of THREE.CameraHelper). The first area is rendered using the perspective camera and the second area is rendered using orthographic camera. To split the window I use the scissor test. In the scene origin I have a plane with a green texture
The plane should be visible from the perspective camera and invisible from the orthographic camera. The texture is generated dynamically. Here is a demo
var NUM_OF_ROWS = 50;
var NUM_OF_COLS = 50;
var scene;
var renderer;
var camera;
var cameraControl;
var orthographicCamera;
var orthographicCameraHelper;
var cameraRig;
var sphere;
var plane;
var WIDTH = 395;
var HEIGHT = 193;
document.addEventListener('DOMContentLoaded', onLoad, false);
window.addEventListener('resize', onResize, false);
function onResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onLoad()
{
initScene();
initRenderer();
initCamera();
initAxis();
buildGrid();
//createTexture();
document.body.appendChild(renderer.domElement);
render();
}
function buildGrid()
{
var material = new THREE.LineBasicMaterial({color: 'green'});
var lineList = [];
var vertexList = [];
for(var i = 0; i <= NUM_OF_ROWS; i++)
{
var geometry = new THREE.Geometry();
vertexList[i] = [];
for(var j = 0; j <= NUM_OF_COLS; j++)
{
var y = getRandomArbitrary(0, 0.5);
vertexList[i][j] = new THREE.Vector3(i, y, j);
geometry.vertices.push(vertexList[i][j]);
}
lineList.push(new THREE.Line(geometry, material));
}
for(var j = 0; j <= NUM_OF_COLS; j++)
{
var geometry = new THREE.Geometry();
for(var i = 0; i <= NUM_OF_ROWS; i++)
{
geometry.vertices.push(vertexList[i][j]);
}
lineList.push(new THREE.Line(geometry, material));
}
lineList.forEach(function(line)
{
scene.add(line);
});
buildDrills(vertexList);
}
function buildDrills(vertexList)
{
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({color: 0xffffff});
for(var i = 0; i <= NUM_OF_ROWS; i++)
{
for(var j = 0; j <= NUM_OF_COLS; j++)
{
if(getRandomInt(0, 100) > 80)
{
var vertexPos = vertexList[i][j];
geometry.vertices.push(vertexPos,
new THREE.Vector3(getRandomArbitrary(vertexPos.x - 0.5, vertexPos.x + 0.5),
-getRandomArbitrary(1, 2.5),
getRandomArbitrary(vertexPos.z - 0.5, vertexPos.z + 0.5)));
}
}
}
scene.add(new THREE.Line(geometry, material, THREE.LinePieces));
}
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomArbitrary(min, max)
{
return Math.random() * (max - min) + min;
}
function render()
{
orthographicCameraHelper.update();
createTestPlane();
plane.visible = false;
renderer.enableScissorTest(false);
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
renderer.clear();
renderer.render(scene, camera);
plane.visible = true;
renderer.enableScissorTest(true);
renderer.setScissor(window.innerWidth - WIDTH, 0, WIDTH, HEIGHT);
renderer.setViewport(window.innerWidth - WIDTH, 0, WIDTH, HEIGHT);
renderer.clear();
renderer.render(scene, orthographicCamera);
requestAnimationFrame(render);
cameraControl.update();
}
function createTestPlane()
{
plane && scene.remove(plane);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = WIDTH;
canvas.height = HEIGHT;
context.fillStyle = '#69a865';
context.fillRect(0, 0, WIDTH, HEIGHT);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
var geometry = new THREE.PlaneBufferGeometry(WIDTH, HEIGHT);
var material = new THREE.MeshBasicMaterial({map: texture});
plane = new THREE.Mesh(geometry, material);
scene.add(plane);
}
function initAxis()
{
var axisHelper = new THREE.AxisHelper(100);
scene.add(axisHelper);
}
function initScene()
{
scene = new THREE.Scene();
}
function initRenderer()
{
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
}
function initCamera()
{
var ANGLE_OF_VIEW = 45;
var ASPECT_RATIO = window.innerWidth / window.innerHeight;
var NEAR_CLIPPING_PLANE = 0.1;
var FAR_CLIPPING_PLANE = 1000;
camera = new THREE.PerspectiveCamera(ANGLE_OF_VIEW, ASPECT_RATIO, NEAR_CLIPPING_PLANE, FAR_CLIPPING_PLANE);
camera.position.x = 120;
camera.position.y = 60;
camera.position.z = 180;
camera.lookAt(scene.position);
cameraControl = new THREE.TrackballControls(camera);
var left = -25;
var right = 25;
var top = 10;
var bottom = -10;
var near = 0;
var far = 10;
orthographicCamera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
orthographicCameraHelper = new THREE.CameraHelper(orthographicCamera);
orthographicCamera.position.set(25, 0, 5);
scene.add(orthographicCameraHelper);
}<script src="//popov.skyboxua.com/threejs-demo/bower_components/three.js/three.js"></script>
<script src="//popov.skyboxua.com/threejs-demo/app/js/TrackballControls.js"></script>When I run this demo in Google Chrome I don't see the texture in the second area. It's just black. I tried on Windows Google Chrome version 45.0.2454.85 m and on Mac OS Google Chrome version 45.0.2454.85 (64-bit).
I noticed that to display the texture correctly I need to disable the scissor test or don't hide the plane. Also the texture appears when I resize the window. I suppose it's a Chrome's issue because it works in other browsers and worked in Chrome two weeks ago(probably it was updated).
Does someone have a similar problem? Are there any workarounds?
