Javascript、WebGL、HTMLを使用して四角形を描く

こんにちは、Edward Angelのインタラクティブ3Dグラフィックスの紹介に従っています。再帰的な迷路を作ってみたいですが、まずは基本的な広場をする必要があります。私はsierpinskiガスケットの本のスクリプトでこのスクリプトをモデル化しました。私はこれで数時間を過ごしていて、私が間違っていることを見ることはできません。 HTMLページには1行しか表示されません。 IveはLINES LINE_LOOP POLYGONのような異なるタイプの頂点結合ツールを試しましたが、うまくいかないようです。私を助けてください私はImが狂って行くように感じる。それはJavaScriptのネイティブ配列を返しますがgl.bufferDataは、型指定された配列を必要とflattenの標準実装を想定しJavascript、WebGL、HTMLを使用して四角形を描く

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
<title>Maze Sierpinski Gasket</title> 


<script id="vertex-shader" type="x-shader/x-vertex"> 
attribute vec4 vPosition; 


void 
main() 
{ 
    gl_Position = vPosition; 
} 
</script> 

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

void 
main() 
{ 
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
} 
</script> 

<script type="text/javascript" src="../Common/webgl-utils.js"></script> 
<script type="text/javascript" src="../Common/initShaders.js"></script> 
<script type="text/javascript" src="../Common/MV.js"></script> 
<script> 
//goal: try and draw just a square. 

var canvas; 
var gl; 

var points = []; 



window.onload = function init() 
{ 
    canvas = document.getElementById("gl-canvas"); 

    gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { alert("WebGL isn't available"); } 

    //enter new script 

var vertices = [ 
    vec2(-1.0,-1.0), 
    vec2(-1.0,1.0), 
    vec2(1.0,1.0), 
    vec2(1.0,-1.0) 
]; 

square(vertices[0],vertices[1],vertices[2],vertices[3]); 

// 
    // Configure WebGL 
    // 
    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 1.0, 1.0, 1.0); 

    // Load shaders and initialize attribute buffers 

    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program); 

    // Load the data into the GPU 

    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW); 

    // Associate out shader variables with our data buffer 

    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition); 

    render(); 
}; 

function square(a,b,c,d) 
{ 
points.push(a); 
points.push(b); 
points.push(c); 
points.push(d); 
} 


function render(){ 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.drawArrays(gl.LINES, 0, points.length); 
} 

</script> 
</head> 

<body> 
<canvas id="gl-canvas" width="512" height="512"> 
Oops ... your browser doesn't support the HTML5 canvas element 
</canvas> 
</body> 
</html>

出典

2016-09-02 NaBaddaDanJah

アイブ氏の欠如を見つけました。 function square（a、b、c、d）の後に { points.push（a）; points.push（b）; points.push（c）; points.push（d）; } – NaBaddaDanJah

でもまだ仕事がありません – NaBaddaDanJah

私は[これらの記事]（http://webglfundamentals.org）を渡すと思っていました。 – gman

2の問題

：はここにスクリプトです。だから私は、ポイントのすべてのペアを描く
```
gl.bufferData(..., new Float32Array(flatten(...)), ... 
```
gl.LINESにそれを変更しました。あなたは2つの行を意味する4つの点を通過しているだけです。あなたはそれで正方形を得ることはありません。 gl.LINE_LOOPを使用して4つのポイントをすべて接続し、最後のものを最初のものに接続することができます。

また、コードを実行したときにJavaScriptコンソールでエラーが発生し、問題を見つけるのに役立ちました。 JavaScriptコンソールでエラーと警告を常に確認する必要があります。

//goal: try and draw just a square. 
 

 
var canvas; 
 
var gl; 
 

 
var points = []; 
 

 
function init() 
 
{ 
 
    canvas = document.getElementById("gl-canvas"); 
 

 
    gl = WebGLUtils.setupWebGL(canvas); 
 
    if (!gl) { alert("WebGL isn't available"); } 
 

 
    //enter new script 
 

 
var vertices = [ 
 
    vec2(-1.0,-1.0), 
 
    vec2(-1.0,1.0), 
 
    vec2(1.0,1.0), 
 
    vec2(1.0,-1.0) 
 
]; 
 

 
square(vertices[0],vertices[1],vertices[2],vertices[3]); 
 

 
// 
 
    // Configure WebGL 
 
    // 
 
    gl.viewport(0, 0, canvas.width, canvas.height); 
 
    gl.clearColor(1.0, 1.0, 1.0, 1.0); 
 

 
    // Load shaders and initialize attribute buffers 
 

 
    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
 
    gl.useProgram(program); 
 

 
    // Load the data into the GPU 
 

 
    var bufferId = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(flatten(points)), gl.STATIC_DRAW); 
 

 
    // Associate out shader variables with our data buffer 
 

 
    var vPosition = gl.getAttribLocation(program, "vPosition"); 
 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
 
    gl.enableVertexAttribArray(vPosition); 
 

 
    render(); 
 
}; 
 

 
function square(a,b,c,d) 
 
{ 
 
points.push(a); 
 
points.push(b); 
 
points.push(c); 
 
points.push(d); 
 
} 
 

 

 
function render(){ 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 
    gl.drawArrays(gl.LINE_LOOP, 0, points.length); 
 
} 
 

 
// ---------------[ missing functions ] --------- 
 

 
var WebGLUtils = { 
 
    setupWebGL: function(canvas) { 
 
    return canvas.getContext("webgl"); 
 
    }, 
 
}; 
 

 
function initShaders(gl, vs, fs) { 
 
    return twgl.createProgramFromScripts(gl, [vs, fs]); 
 
} 
 

 
function vec2(x, y) { 
 
    return [x, y]; 
 
} 
 

 
function flatten(arrayOfArrays) { 
 
    var flattened = arrayOfArrays.reduce(function(a, b) { 
 
    return a.concat(b); 
 
    }, []); 
 
    return flattened; 
 
} 
 
    
 
init();

<script id="vertex-shader" type="x-shader/x-vertex"> 
 
attribute vec4 vPosition; 
 

 

 
void 
 
main() 
 
{ 
 
    gl_Position = vPosition; 
 
} 
 
</script> 
 

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

 
void 
 
main() 
 
{ 
 
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
 
} 
 
</script> 
 

 
<script src="https://twgljs.org/dist/twgl.min.js"></script> 
 
<canvas id="gl-canvas" width="512" height="512"> 
 
Oops ... your browser doesn't support the HTML5 canvas element 
 
</canvas>

出典

2016-09-03 16:41:49 gman

私は間違いなくこれを見ていますが、コードスニペットを実行するとまだ正方形は生成されません。思想？ – NaBaddaDanJah

スクロールしましたか？あなたは何を見たの？ [これは私が見ているものです]（https://www.youtube.com/watch?v=DSjXt3pLuAg） – gman

記録のために、私はchrome、linuxの上と下の行を見ています。私は、 '1'の代わりに' .99'を使うか、 'lineWidth'> 1が正しくレンダリングするように、座標が端に直接置かれているために線が切り取られていると仮定しています。 –

Javascript、WebGL、HTMLを使用して四角形を描く

答えて

関連する問題