삼각형 스트립과 변형 삼각형을 함께 연결하는 방법은 무엇입니까?

var gl; 
 
var canvas; 
 
var shaderProgram; 
 
var triangleVertexBuffer; 
 
var triangleVertexColorBuffer; 
 
var stripElementBuffer; 
 
var stripVertexBuffer; 
 

 
//Declare new variables here 
 

 

 
function createGLContext(canvas) { 
 
    var names = ["webgl", "experimental-webgl"]; 
 
    var context = null; 
 
    for (var i=0; i < names.length; i++) { 
 
    try { 
 
     context = canvas.getContext(names[i]); 
 
    } catch(e) {} 
 
    if (context) { 
 
     break; 
 
    } 
 
    } 
 

 
    if (context) { 
 
    context.viewportWidth = canvas.width; 
 
    context.viewportHeight = canvas.height; 
 
    } else { 
 
    alert("Failed to create WebGL context!"); 
 
    } 
 
    return context; 
 
} 
 

 
function loadShaderFromDOM(id) { 
 
    var shaderScript = document.getElementById(id); 
 
    if (!shaderScript) { 
 
    return null; 
 
    } 
 
    var shaderSource = ""; 
 
    var currentChild = shaderScript.firstChild; 
 
    while (currentChild) { 
 
    if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE 
 
     shaderSource += currentChild.textContent; 
 
    } 
 
    currentChild = currentChild.nextSibling; 
 
    } 
 

 
    var shader; 
 

 
    if (shaderScript.type == "x-shader/x-fragment") { 
 
    shader = gl.createShader(gl.FRAGMENT_SHADER); 
 
    } else if (shaderScript.type == "x-shader/x-vertex") { 
 
    shader = gl.createShader(gl.VERTEX_SHADER); 
 
    } else { 
 
    return null; 
 
    } 
 

 
    gl.shaderSource(shader, shaderSource); 
 
    gl.compileShader(shader); 
 

 
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 
 
    alert(gl.getShaderInfoLog(shader)); 
 
    return null; 
 
    } 
 
    return shader; 
 
} 
 

 
function setupShaders() { 
 
    vertexShader = loadShaderFromDOM("shader-vs"); 
 
    fragmentShader = loadShaderFromDOM("shader-fs"); 
 
    shaderProgram = gl.createProgram(); 
 
    gl.attachShader(shaderProgram, vertexShader); 
 
    gl.attachShader(shaderProgram, fragmentShader); 
 
    gl.linkProgram(shaderProgram); 
 

 
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { 
 
    alert("Failed to setup shaders"); 
 
    } 
 

 
    gl.useProgram(shaderProgram); 
 

 
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
 
    shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); 
 
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); 
 
    // For the triangle we want to use per-vertex color so 
 
    // the vertexColorAttribute, aVertexColor, in the vertex shader 
 
    // is enabled. 
 
    // You must enable this attribute here or in draw method before the 
 
    //triangle is drawn 
 
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); 
 

 
} 
 

 
function setupBuffers() { 
 
    triangleVertexBuffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer); 
 
    var triangleVertices = [ 
 
    0.0, 0.5, 0.0, 
 
     -0.5, -0.5, 0.0, 
 
      0.5, -0.5, 0.0 
 
    ]; 
 

 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW); 
 
    triangleVertexBuffer.itemSize = 3; 
 
    triangleVertexBuffer.numberOfItems = 3; 
 

 
    // Triangle vertex colours 
 
    triangleVertexColorBuffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); 
 
    var colors = [ 
 
      1.0, 0.0, 0.0, 1.0, //v0 
 
      0.0, 1.0, 0.0, 1.0, //v1 
 
      0.0, 0.0, 1.0, 1.0 //v2 
 
     ]; 
 

 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 
 
    triangleVertexColorBuffer.itemSize = 4; 
 
    triangleVertexColorBuffer.numberOfItems = 3; 
 

 

 
    // Add new items: the followings are newly added items 
 

 
    //hexagon vertices 
 
    hexagonVertexBuffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer); 
 
    var hexagonVertices = [ 
 
     -0.3, 0.6, 0.0, //v0 
 
     -0.4, 0.8, 0.0, //v1 
 
     -0.6, 0.8, 0.0, //v2 
 
     -0.7, 0.6, 0.0, //v3 
 
     -0.6, 0.4, 0.0, //v4 
 
     -0.4, 0.4, 0.0, //v5 
 
     -0.3, 0.6, 0.0, //v6 
 
    \t \t \t \t \t ]; 
 

 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(hexagonVertices), gl.STATIC_DRAW); 
 
    hexagonVertexBuffer.itemSize = 3; 
 
    hexagonVertexBuffer.numberOfItems = 7; 
 

 

 
    //Triangle strip vertices. 
 
    stripVertexBuffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer); 
 
    var stripVertices = [ 
 
     -0.5, 0.2, 0.0, //v0 
 
     -0.4, 0.0, 0.0, //v1 
 
     -0.3, 0.2, 0.0, //v2 
 
     -0.2, 0.0, 0.0, //v3 
 
     -0.1, 0.2, 0.0, //v4 
 
     0.0, 0.0, 0.0, //v5 
 
     0.1, 0.2, 0.0, //v6 
 
     0.2, 0.0, 0.0, //v7 
 
     0.3, 0.2, 0.0, //v8 
 
     0.4, 0.0, 0.0, //v9 
 
     0.5, 0.2, 0.0, //v10 
 

 
     // Second strip 
 
     -0.5, -0.3, 0.0, //v11 
 
     -0.4, -0.5, 0.0, //v12 
 
     -0.3, -0.3, 0.0, //v13 
 
     -0.2, -0.5, 0.0, //v14 
 
     -0.1, -0.3, 0.0, //v15 
 
     0.0, -0.5, 0.0, //v16 
 
     0.1, -0.3, 0.0, //v17 
 
     0.2, -0.5, 0.0, //v18 
 
     0.3, -0.3, 0.0, //v19 
 
     0.4, -0.5, 0.0, //v20 
 
     0.5, -0.3, 0.0 //v21 
 
    ]; 
 

 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(stripVertices), gl.STATIC_DRAW); 
 
    stripVertexBuffer.itemSize = 3; 
 
    stripVertexBuffer.numberOfItems = 22; 
 

 
    // Strip vertex indices 
 
    stripElementBuffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer); 
 

 
    var indices = [ 
 
    0.0, 0.5, 0.0, 
 
     -0.5, -0.5, 0.0, 
 
      0.5, -0.5, 0.0 
 
// put correct indices here. Use degenerated triangles to link the 
 
    \t // strips together 
 
]; 
 

 
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 
 
    stripElementBuffer.numberOfItems = 25; 
 
} 
 

 
function draw() { 
 
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 

 
    // Draw triangle. No change is made to the last week's code here 
 
    // For the triangle we want to use per-vertex color so 
 
    // the vertexColorAttribute, aVertexColor, in the vertex shader 
 
    // is enabled 
 
    // gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); 
 

 
    // Make vertex buffer "triangleVertexBuffer" the current buffer 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer); 
 

 
    // Link the current buffer to the attribute "aVertexPosition" in 
 
    // the vertex shader 
 
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0); 
 

 
    // Make color buffer "triangleVertexColorBuffer" the current buffer 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); 
 
    // Link the current buffer to the attribute "aVertexColor" in 
 
    // the vertex shader 
 
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 
 
    gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems); 
 
    
 
    gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25); 
 

 

 

 
    // Draw the newly added items 
 

 

 

 
    } 
 

 
function startup() { 
 
    canvas = document.getElementById("myGLCanvas"); 
 
    gl = createGLContext(canvas); 
 
    setupShaders(); 
 
    setupBuffers(); 
 
    gl.clearColor(1.0, 1.0, 1.0, 1.0); 
 

 
    draw(); 
 
} 
 

 
startup();

<script id="shader-vs" type="x-shader/x-vertex"> 
 
    attribute vec3 aVertexPosition; 
 
    attribute vec4 aVertexColor; 
 
    varying vec4 vColor; 
 

 
    void main() { 
 
    vColor = aVertexColor; 
 
    gl_Position = vec4(aVertexPosition, 1.0); 
 
    } 
 
</script> 
 

 
<script id="shader-fs" type="x-shader/x-fragment"> 
 
    precision mediump float; 
 
    varying vec4 vColor; 
 

 
    void main() { 
 
    gl_FragColor = vColor; 
 
    } 
 
</script> 
 

 
<canvas id="myGLCanvas" width="250" height="250"></canvas>

얘들 아. 삼각형 스트립 그리기를 시도하지만이 접근 방법에 대한 단서가없는 WEBGL을 처음 사용합니다.

내가 무엇을 알고 : gl.TRIANGLE_STRIP 모드를 그릴 때

, 정점의 순서는 좌표 또는 버퍼의 인덱스가 중요합니다.
프로그래머가 삼각형을 지정하는 대신 WebGL은 삼각형을 자동으로 구성합니다.
그것은 정점 버퍼 또는 인덱스 버퍼를 조정하고 삼각형 구성하려면 다음 순서로 사용 읽 어떤 의미를하지 않는 코드에

출처

2017-10-24 user5991026

이 2 개 라인을

gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems); 

gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);

그것은 일반적으로 만든다 두 가지를 그리기 위해 중간에 무언가를 변경하지 않고 두 번 그리기를 호출하는 의미는 서로 다른 데이터를 설정해야합니다. 당신은 당신이

과 같은 오류 뭔가를 본 것 자바 스크립트 콘솔 열었다 경우

또한, 2 라인은

gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);

그냥 일반 잘못 몇 가지 문제

가 있습니다

코드가 gl.drawElements-gl.drawElements

type 매개 변수 type 파라미터 D 값은 현재 ELEMENT_ARRAY_BUFFER 데이터의 유형이다.
두 번째 매개 변수는 개수입니다.

그것은 그것은 비록 충분하기 때문에되지 않습니다

{ 
    const primitive = gl.TRIANGLE_STRIP; 
    const count = stripElementBuffer.numberOfItems; 
    const offset = 0; 
    const indexType = gl.UNSIGNED_SHORT; 

    gl.drawElements(primitive, count, indexType, offset); 
}

고정과 같이해야한다 정점의 수 (stripVertexBuffer.numberOfItems)하지 인덱스의 수 (stripElementBuffer.numberOfItems)

를 전달하는 것

코드는 실제로 인덱스 버퍼에 인덱스를 넣지 않습니다. 그 코드

// Strip vertex indices 
    stripElementBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer); 

    var indices = [ 
    0.0, 0.5, 0.0, 
     -0.5, -0.5, 0.0, 
      0.5, -0.5, 0.0 
// put correct indices here. Use degenerated triangles to link the 
    // strips together 
]; 

    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 
    stripElementBuffer.numberOfItems = 25;

도 의미가 없습니다. 인덱스는 0에서 N까지의 부호없는 정수 값입니다. 여기서 N은 속성에 바인딩 된 정점 수보다 작은 값입니다. 또한 9 개의 값만 입력되지만 코드는 stripElementBuffer.numberOfItems을 25로 설정합니다.

그런 다음 코드는 스트립 정점을 사용하기위한 속성을 설정하지 않습니다.당신도 당신이 그 패턴을 따라 코드를 수정해야 퇴화 삼각형 스트립을 시도하기 전에 WebGL을이

for each thing you want to draw 
    gl.useProgram(theProgramYouWantToDrawWith); 

    // setup attributes 
    for each attribute 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithDataForAttribute); 
    gl.enableVertexAttribArray(attribLocation); 
    gl.vertexAttribPointer(attribLocation, ... how to get data out of buffer ...) 

    // if using indices setup the ELEMENT_ARRAY_BUFFER 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferWithIndices); 

    // setup textures 
    for each texture you're going to draw with 
    gl.activeTexture(gl.TEXTURE0 + unit); 
    gl.bindTexture(gl.TEXTURE_??, someTexture); 

    // setup uniforms 
    for each uniform 
    gl.uniformXXX(...) 

    // draw 
    gl.drawXXX (either gl.drawArrays or gl.drawElements)

같은 작품에

여러 가지를 그리려면. 또한 here's some other tutorials you might find helpful

출처

2017-10-24 06:19:38 gman

삼각형 스트립과 변형 삼각형을 함께 연결하는 방법은 무엇입니까?

답변

관련 문제