[英]Is there a limit to a JS array when building 3D shapes with WEBGL?
我一直在嘗試構建一個 3D 角色。 整個模型有大約 50 個立方體/長方體,但是形狀在第 35 個形狀后停止構建。 代碼已經很長了,但我不知道為什么其余的形狀不顯示。
js代碼如下:
var canvas;
var gl;
var total= 1188;
var vertex= [];
var vertexColors =[];
var indices =[];
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.0,0.0,1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
var iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
theta[axis] += 1.0;
gl.uniform3fv(thetaLoc, theta);
gl.drawElements( gl.TRIANGLES, total, gl.UNSIGNED_BYTE, 0 );
requestAnimFrame( render );
}
我試過更換瀏覽器並編輯我的代碼,但它似乎仍然不起作用。
您正在使用UNSIGNED_BYTE
索引。 UNSIGNED_BYTE
只能保存 0 到 255 之間的值,因此您不能使用超過 255 個頂點。
改變這一行
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
對此
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
和你的畫線
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_SHORT, 0 );
您將能夠使用高達 65535 的索引
要使用超過 65535 個頂點,您要么需要停止使用索引而是使用gl.drawArrays
或者您可以檢查並啟用OES_element_index_uint
擴展,然后使用Uint32Array
和gl.UNSIGNED_INT
並使用高達 4294967296 的索引(盡管可能沒有足夠40億個頂點的內存😉)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.