Webgl没有渲染我的圈子

Webgl没有渲染我的圈子

本文介绍了Webgl没有渲染我的圈子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试学习如何使用Webgl,并且已经学习了如何绘制三角形,正方形和直线.我在webgl中创建圈子时遇到问题.

I am trying to learn how to use Webgl and have already learned how to draw triangles,squares,and lines. I am having problems with creating my circle in webgl.

 var InitDemo = function(){
    	var canvas = document.getElementById('circle-surface');
    	var gl = canvas.getContext('webgl');

    	//define geomtry
    	var vertices = [];
    	var origin = [0,0];
    	vertices.push(origin);
    	for(var i = 0; i <= 360; i+=1){
    		var j = i*Math.PI/180;
    		var vert = [Math.sin(j),Math.cos(j)];
    		vertices.push(vert);
    	}
    	console.log('the vertices are: '+vertices);
    	var vertBuffer = gl.createBuffer();
    	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
    	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    	//shaders
    	var vertSrc = 'attribute vec2 coordinates;'+
    				'void main(){' +
    				'	gl_Position = vec4(coordinates,0.0,1.0);'+
    				'}';
    	var vertShader = gl.createShader(gl.VERTEX_SHADER);
    	gl.shaderSource(vertShader, vertSrc);
    	gl.compileShader(vertShader);
    	if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
    		console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
    		return;
    	}

    	var fragSrc = 'void main(){'+
    					'	gl_FragColor = vec4(1.0,0.0,1.0,1.0);'+
    					'}';
    	var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    	gl.shaderSource(fragShader, fragSrc);
    	gl.compileShader(fragShader);
    	if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
    		console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
    		return;
    	}

    	var shaderProg = gl.createProgram();
    	gl.attachShader(shaderProg, vertShader);
    	gl.attachShader(shaderProg, fragShader);
    	gl.linkProgram(shaderProg);
    	gl.useProgram(shaderProg);
    	if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
    		console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProg));
    		return;
    	}
    	gl.validateProgram(shaderProg);
    	if (!gl.getProgramParameter(shaderProg, gl.VALIDATE_STATUS)) {
    		console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProg));
    		return;
    	}

    	//associate shader and buffer

    	var coord = gl.getAttribLocation(shaderProg, 'coordinates');
    	gl.vertexAttribPointer(coord, 2, gl.FLOAT, gl.FALSE, 2*Float32Array.BYTES_PER_ELEMENT, 0);
    	gl.enableVertexAttribArray(coord);
    	//Draw
    	gl.clearColor(0.0, 0.0, 0.2, 1.0);
    	gl.clear(gl.COLOR_BUFFER_BIT);
    	gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/2);


    }

 
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Circle Demo</title>
    	<link rel="stylesheet" type="text/css" href="tutorial.css">
    </head>
    <body onload="InitDemo();">
    	<canvas id = "circle-surface" width="800px" height="600px"></canvas>
    	<script src = "CircleApp.js"></script>
    </body>
    </html>

我在控制台上没有收到任何错误,但由于某种原因,它没有显示我想要的圆圈.

I am not receiving any error on console but for some reason it isn't displaying the circle I want.

推荐答案

您的错误不是OGL部分的错误,而是设置顶点数组时的错误.您已经为顶点缓冲区生成了二维数组,而不是线性的一维数组.

Your mistake is not a mistake in the OGL part, but an error when setting up your vertex arrays. You have generated a 2-dimensional array for your vertex buffer instead of a linear 1-dimensional array.

您必须使用 vertices.push(origin [0],origin [1]); 代替 vertices.push(origin); (与相同)> vert ).

You have to use vertices.push(origin[0], origin[1]); instead of vertices.push(origin); (same for vert).

您的代码应如下所示:

var vertices = [];
var origin = [0,0];
vertices.push( origin[0], origin[1] );     <-------------------------
for(var i = 0; i <= 360; i+=1){
    var j = i*Math.PI/180;
    var vert = [Math.sin(j),Math.cos(j)];
    vertices.push( vert[0], vert[1] );     <-------------------------
}

更正后的WebGL示例:

The corrected WebGL examples :

var InitDemo = function(){

    	var canvas = document.getElementById('circle-surface');
    	var gl = canvas.getContext('webgl');

    	//define geomtry
    	var vertices = [];
    	var origin = [0,0];
      vertices.push( origin[0], origin[1] );

      for(var i = 0; i <= 360; i+=1){
          var j = i*Math.PI/180;
          var vert = [Math.sin(j),Math.cos(j)];
          vertices.push( vert[0], vert[1] );
      }

    	console.log('the vertices are: '+vertices);
    	var vertBuffer = gl.createBuffer();
    	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
    	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    	//shaders
    	var vertSrc = 'attribute vec2 coordinates;'+
    				'void main(){' +
    				'	gl_Position = vec4(coordinates,0.0,1.0);'+
    				'}';
    	var vertShader = gl.createShader(gl.VERTEX_SHADER);
    	gl.shaderSource(vertShader, vertSrc);
    	gl.compileShader(vertShader);
    	if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
    		console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
    		return;
    	}

    	var fragSrc = 'void main(){'+
    					'	gl_FragColor = vec4(1.0,0.0,1.0,1.0);'+
    					'}';
    	var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    	gl.shaderSource(fragShader, fragSrc);
    	gl.compileShader(fragShader);
    	if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
    		console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
    		return;
    	}

    	var shaderProg = gl.createProgram();
    	gl.attachShader(shaderProg, vertShader);
    	gl.attachShader(shaderProg, fragShader);
    	gl.linkProgram(shaderProg);
    	gl.useProgram(shaderProg);

    	if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
    		console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProg));
    		return;
    	}
    	gl.validateProgram(shaderProg);
    	if (!gl.getProgramParameter(shaderProg, gl.VALIDATE_STATUS)) {
    		console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProg));
    		return;
    	}

    	//associate shader and buffer

    	var coord = gl.getAttribLocation(shaderProg, 'coordinates');
    	gl.vertexAttribPointer(coord, 2, gl.FLOAT, gl.FALSE, 2*Float32Array.BYTES_PER_ELEMENT, 0);
    	gl.enableVertexAttribArray(coord);
    	//Draw
    	gl.clearColor(0.0, 0.0, 0.2, 1.0);
    	gl.clear(gl.COLOR_BUFFER_BIT);
    	gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/2);
}

InitDemo();
<canvas id = "circle-surface" width="800px" height="600px"></canvas>

这篇关于Webgl没有渲染我的圈子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-05 04:39