WebGLU: упрощаем работу с WebGL

 
 
… 
$W.initialize(); 
 

• $W.GL.POINTS - каждая вершина отображается точкой,
• $W.GL.LINES - каждая пара из вершин 2n-1 и 2n соединяется линией,
• $W.GL.LINE_LOOP - все вершины по порядку соединяются отрезками с замыканием на первую вершину,
• $W.GL.LINE_STRIP - все вершины соединяются отрезками без замыкания,
• $W.GL.TRIANGLES - каждая тройка вершин (по порядку) образует треугольник,
• $W.GL.TRIANGLE_STRIP - вершины по порядку соединяются треугольниками,
• $W.GL.TRIANGLE_FAN - вершины соединяются треугольниками вокруг общей — первой — вершины;

 
var originLines = new $W.Object($W.GL.LINES); 
originLines.vertexCount = 6; 
originLines.fillArray("vertex", 
	[[0,0,0], [3,0,0], [0,0,0], [0,3,0], [0,0,0], [0,0,3]]); 
with ($W.constants.colors){ 
  originLines.fillArray("color", 
	[ RED,     RED,      GREEN,   GREEN,    BLUE,    BLUE]); 
} 

• "vertex" - координаты вершин,
• "color" - цвета вершин,
• "normal" - нормали к вершинам,
• "texCoord" - координаты текстуры в данной вершине,
• "wglu_elements" - индексы координат вершин (для сложных объектов).

 
var lights = new $W.Material({path:$W.paths.materials + "light.json"}); 

 
{ 
    name: "light", 
    program: { 
        name: "light", 
        shaders: [ 
            {name:"light_vs", path:$W.paths.shaders+"light.vert"}, 
            {name:"light_fs", path:$W.paths.shaders+"light.frag"} 
        ] 
    } 
} 

 
lights.setUniformAction('color', function(uniform, object, material){ 
	$W.GL.uniform4fv(uniform.location, object.color); }); 

 
function drawCylinder(R, H, n, flags){ 
	var v = [], norm = []; 
	var C = new $W.Object($W.GL.TRIANGLE_STRIP, flags); 
	C.vertexCount = n * 2+2; 
	for(var i = -1; i < n; i++){ 
		var a = _2PI/n*i; 
		var cc = Math.cos(a), ss = Math.sin(a); 
		v = v.concat([R*cc, R*ss,0.]); 
		v = v.concat([R*cc, R*ss,H]); 
		norm = norm.concat([-cc, -ss, 0.]); 
		norm = norm.concat([-cc, -ss, 0.]); 
	} 
	C.fillArray("vertex", v); 
	C.fillArray("normal", norm); 
	return C; 
} 

 
function drawCircle(R, n, w, flags){ 
	var v = []; 
	var C = new $W.Object($W.GL.LINE_LOOP, flags); 
	C.vertexCount = n; 
	for(var i = 0; i < n; i++){ 
		var a = _2PI/n*i; 
		v = v.concat([R*Math.cos(a), R*Math.sin(a),0.]); 
	} 
	C.fillArray("vertex", v); 
	if(typeof(w) != "undefined") C.WD = w; 
	else C.WD = 1.; 
	C.draw = function(){ // переопределяем для возможности изменения ширины линии 
		var oldw = $W.GL.getParameter($W.GL.LINE_WIDTH); 
		$W.GL.lineWidth(this.WD); 
		this.drawAt( 
			this.animatedPosition().elements, 
			this.animatedRotation().matrix(), 
			this.animatedScale().elements 
		); 
		$W.GL.lineWidth(oldw); 
	}; 
	return C; 
} 

 
  result_Color = mat_emission 
  		+ lmodel_ambient * mat_ambient 
  		Sum_i(D * S * [l_ambient * mat_ambient + max{dot(L,n),0}*l_diffuse*mat_diffuse 
  			+ max{dot(s,n),0}^mat_shininess * l_specular * mat_specular 
  			) 

• result_Color - итоговый цвет вершины,
• mat_X - свойства материала,
• l_X - свойства i-го источника света
• X:
  • emission - излучаемый свет (т.е. материал - источник света),
  • lmodel_ambient - общий рассеянный свет модели освещения (не зависит от источников, т.е. это - фоновый свет)
  • ambient - фоновый свет (цвет материала вне источников света, рассеянная световая составляющая i-го источника света)
• D - коэффициент ослабления света, D = 1/(kc + kl*d + kq*d^2),
  • d - расстояние от источника до вершины,
  • kc - постоянный коэффициент ослабления ("серый фильтр"),
  • kl - линейный коэффициент ослабления,
  • kq - квадратичный коэффициент ослабления,
• S - эффект прожектора, вычисляется так:
  = 1, если источник света - не прожектор (бесконечно удаленный параллельный пучок),
  = 0, если источник - прожектор, но вершина вне конуса излучения,
  = max{dot(v,dd),0}^GL_SPOT_EXPONENT в остальных случаях, здесь v - нормированный вектор от прожектора (GL_POSITION) к вершине, dd (GL_SPOT_DIRECTION) - ориентация прожектора
• L = -v (нормированный вектор от вершины к источнику),
• n - нормаль к вершине,
• diffuse - рассеянный свет, не зависит от угла падения/отражения,
• s - нормированный вектор, равный сумме L и вектора от вершины к глазу,
• shininess - степень блеска (от 0 до 128, чем больше, тем более "блестящей" является поверхность),
• specular - цвет зеркального компонента.

	light = { 
		position: [0.,2.,1.5], 
		target:   [0.,0.,-2.], 
		color:    [1.,.5,0.,1.], 
		fieldAngle: 60., 
		exponent: 5., 
		distanceFalloffRatio: .02 
	};