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