三角形ストリップと縮退三角形をリンクするにはどうすればよいですか？

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度描くことは意味がありません.2つの事を描くのは異なるデータを設定する必要があるからです。

さらに、2行目は単純に間違っている

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

あなたのJavaScriptコンソールを開いていた場合、あなたはいくつかの問題

があり

のようなエラー何かを見ているだろう

コードは、 gl.drawElementsからgl.drawElements

TypeパラメータのtypeパラメータにD値は、現在のELEMENT_ARRAY_BUFFERのデータの種類です。
第2パラメータはカウントです。
それはそれはしかし十分な理由ではありません。この
```
{ 
    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

三角形ストリップと縮退三角形をリンクするにはどうすればよいですか？

答えて

関連する問題