Просмотр исходного кода

use requestAnimationFrame and support start/stop.

Lucas Stadler лет назад: 12
Родитель
Сommit
fb7bd7bb86
1 измененных файлов с 30 добавлено и 11 удалено
  1. 30 11
      js/pixl/public/trixl.html

+ 30 - 11
js/pixl/public/trixl.html

262
		gl.vertexAttribPointer(program.vertexPosBuffer, 3, gl.FLOAT, false, 0, 0);
262
		gl.vertexAttribPointer(program.vertexPosBuffer, 3, gl.FLOAT, false, 0, 0);
263
263
264
		var angle = {x: 0, y: 0, z: 0};
264
		var angle = {x: 0, y: 0, z: 0};
265
		setInterval(function() {
266
			program.transform = gl.getUniformLocation(program, 'transform');
265
		program.transform = gl.getUniformLocation(program, 'transform');
266
		trixl.redraw = function() {
267
			var transform = matrix.multiplyMany4x4(
267
			var transform = matrix.multiplyMany4x4(
268
				matrix.rotateX(angle.x / 5),
269
				matrix.rotateY(angle.y / 5),
270
				matrix.rotateZ(angle.z / 5),
268
				//matrix.identity(4), matrix.identity(4) /*
269
				matrix.translate(-0.5, -0.5, -0.0),
270
				matrix.scale(0.5, 0.5, 0.5),
271
				matrix.rotateZ(angle.z / 4),
272
				//matrix.rotateY(angle.y / 10),
273
				matrix.rotateX(angle.x / 4),
271
				//matrix.translate(-0.5, -0.5, 0),
274
				//matrix.translate(-0.5, -0.5, 0),
272
				matrix.translate(-0.5, -0.5, -0.5),
273
				matrix.scale(0.5, 0.5, 0.5)
275
				//matrix.translate(-0.5, -0.5, -0.5),
276
				matrix.translate(-0.0, -0.0, -0.1)
277
				//matrix.perspective(Math.PI / 3, trixl.window.w / trixl.window.h, 0, 2000) //*/
274
			);
278
			);
275
			gl.uniformMatrix4fv(program.transform, false, matrix.transpose(transform, [4, 4]));
279
			trixl.debug_pos(matrix.multiply([1,1,1,1], [1, 4], transform, [4, 4]));
280
			gl.uniformMatrix4fv(program.transform, false, transform);
276
281
277
			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
282
			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
278
			gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);
283
			gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);
279
284
280
			angle.x += Math.PI / 10;
285
			angle.x += Math.PI / 10;
281
			angle.y += Math.PI / 30;
282
			angle.z += Math.PI / 50;
283
		}, 50);
286
			angle.y += Math.PI / 10;
287
			angle.z += Math.PI / 10;
288
		}
289
290
		trixl.step = function() {
291
			trixl.redraw();
292
			trixl.step.reqId = requestAnimationFrame(trixl.step);
293
		}
294
		trixl.start = function() {
295
			trixl.step.reqId = requestAnimationFrame(trixl.step);
296
		}
297
		trixl.stop = function() {
298
			cancelAnimationFrame(trixl.step.reqId);
299
			trixl.step.reqId = null;
300
		}
301
302
		trixl.start();
284
	</script>
303
	</script>
285
</body>
304
</body>
286
</html>
305
</html>