For quite some time, I've been attempting to pinpoint a bug that causes erratic behavior when both the scale and position of a square in the script below are dynamic. The purpose of this script is to have a square fade up and down while changing positions and scales across the screen. If either the scaling or positioning is fixed, or even both, then everything works as expected - the square fades at regular intervals in different positions or scales (or with both fixed). However, if both scaling and position are dynamic, then there are times when the square doesn't appear on the screen at all, and most of the time it barely shows up. What could be causing this strange behavior?
I've divided the snippet below into sections for dynamic and fixed scaling/positioning so you can experiment and see for yourself what's going on. Currently, I have them set to dynamic so you can observe the intermittent behavior I'm facing. Your insights after taking a look would be greatly appreciated!
UPDATE: In case you prefer working through it differently, here's a fiddle link for you to delve into as well.
var container, renderer, scene, camera;
var gridComposer, finalComposer;
var container = document.body;
var frustrumWidth, frustrumHeight;
var frustrumSize = 1000;
var aspect; // = window.innerWidth / window.innerHeight;
var zoom = 0.5;
var imageWidth, imageHeight;
var width, height;
// Light Spot
var spot;
// Rest of the JavaScript code continues...
init();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
<head>
<title>three.js webgl - row of stripes with orthographic camera</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
a { color: #ff0000 }
</style>
</head>
<body>
<div id="info">Row Test</div>
<!-- <div id="container"></div> -->
<script src="three_95.js"></script>
<script src="CopyShader.js"></script>
<script src="EffectComposer.js"></script>
<script src="RenderPass.js"></script>
<script src="ShaderPass.js"></script>
<script src="SubtractiveShader.js"></script>
<script type="x-shader/x-vertex" id="stripesvertexshader">
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="stripesfragmentshader">
void main() {
gl_FragColor = vec4( 1.0, 1.0, 1.0, 0.5 );
gl_FragColor = gl_FragColor
}
</script>
<!-- Custom Scripts -->
<script type="text/javascript" src="index.js"></script>
</body>