gl.TRIANGLE_FAN

Последнее обновление: 1.11.2015

gl.TRIANGLE_FAN создает набор треугольников по типу веера, которые имеют одну общую точку.

Также, как и в случае с gl.TRIANGLE_STRIP, общее количество треугольников будет равно count-2, где count - это и есть количество вершин в буфере вершин. То есть опять же чтобы построить три треугольника нам потребуется 3+2=5 вершин.

Создадим программу, использующую данный примитив:

<!DOCTYPE html>
<html>
<head>
<title>WebGL</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas3D" width="400" height="300">Ваш браузер не поддерживает элемент canvas</canvas>
<script id="shader-fs" type="x-shader/x-fragment">
  void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
</script>
<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
  }
</script>
<script type="text/javascript">
var gl;
var shaderProgram;
var vertexBuffer;
// установка шейдеров
function initShaders() {
	var fragmentShader = getShader(gl.FRAGMENT_SHADER, 'shader-fs');
	var vertexShader = getShader(gl.VERTEX_SHADER, 'shader-vs');
	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);
	 
	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
		alert("Не удалось установить шейдеры");
	}
	gl.useProgram(shaderProgram);
	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
}
// Функция создания шейдера
function getShader(type,id) {
	var source = document.getElementById(id).innerHTML;
	var shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
  
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		alert("Ошибка компиляции шейдера: " + gl.getShaderInfoLog(shader));
		gl.deleteShader(shader);   
		return null;
	}
	return shader;  
}
 
function initBuffers() {

	vertices =[ 0.0,  0.5,  0.0, //m0
       -0.5,  -0.4,  0.0, //m1
       -0.2,  -0.5,  0.0, //m2
       0.2,  -0.5,  0.0, //m3
	   0.5,  -0.4,  0.0, //m3
	   ];
 // установка буфера вершин
  vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  // размерность
  vertexBuffer.itemSize = 3;
  // указываем кол-во вершин - 5
  vertexBuffer.numberOfItems=5;
}
 
function draw() {    
	
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

	gl.clear(gl.COLOR_BUFFER_BIT);
  
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
                         vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexBuffer.numberOfItems);
}
 
window.onload=function(){

	var canvas = document.getElementById("canvas3D");
	try {
		gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
	}
	catch(e) {}
  
	  if (!gl) {
		alert("Ваш браузер не поддерживает WebGL");
	  }
	if(gl){
		gl.viewportWidth = canvas.width;
		gl.viewportHeight = canvas.height;
		
		initShaders();
		
		initBuffers();
		
		draw();  
	}
}
</script>
</body>
</html>

Мы определяем пять вершин, которые последовательно соединяются в 3 треугольника:

gl.TRIANGLE_FAN

Таким образом, первый треугольник образуется вершинами m0, m1, m2; второй - m0, m2, m3; а третий треугольник - m0, m3, m4. В итоге получается подобие веера, где имеется общая точка m0.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850