javascript - Webgl 没有渲染我的圈子-6ren

javascript - Webgl 没有渲染我的圈子

转载作者：可可西里更新时间：2023-11-01 13:22:08

我正在尝试学习如何使用 Webgl，并且已经学会了如何绘制三 Angular 形、正方形和直线。我在 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>

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

最佳答案

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

你必须使用 vertices.push(origin[0], origin[1]); 而不是 vertices.push(origin); (对于 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 示例:

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>

关于javascript - Webgl 没有渲染我的圈子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45275273/

文章推荐： html - 2017年视频直播

文章推荐： php - imagecreatefromstring 更改图像颜色

文章推荐： windows - 如何在 Windows 计算机上安装 GNAT (GNU Ada)？

文章推荐： html - 使用 CSS Flexbox 时水平滚动中断

webgl - "webgl"和 "experimental-webgl"的区别
一些网站说你应该通过以下方式初始化 webgl: var gl = c.getContext("webgl") || c.getContext("experimental-webgl"); if (!
webgl - 最大纹理数 WebGL
我一直在寻找有关 WebGL 的信息以及可以分配用于渲染的最大纹理数/内存量。这显然是特定于硬件/设备的，因此我正在寻找一种智能处理纹理的方法。我目前有 512x512 RGBA8 格式的纹理。一个
webgl - WebGL:异步操作？
我想知道是否可以利用WebGL进行任何异步调用？我研究了Spec v1和Spec v2，他们什么都没提及。在V2中，有一种WebGL查询机制，我认为这不是我想要的。在网络上进行搜索并没有确定的定义
webgl - WebGL 中超出缓冲区范围的常见原因是什么
我正在参与一个 webgl 项目。当我调用 gl.DrawElements 时，会显示错误“范围超出缓冲区范围”。我肯定确保我传递了正确的缓冲区长度或偏移量。但是，仍然显示错误。我认为有几个原因
webgl - WebGL 中的最大纹理数？
我知道 WebGL 中有 8 个纹理的限制。我的问题是，8 是全局限制还是每个着色器/程序明智的？如果它是每个着色器/程序明智的限制，这是否意味着，一旦我将纹理加载到一个着色器的制服上，我就可以开
webgl - WebGL 中透明纹理的奇怪渲染行为
我一直在使用 Haxe + Away3D 编写一个小型行星生成器，并将其部署到 HTML5/WebGL。但是在渲染云时我遇到了一个奇怪的问题。我有行星网格，然后云网格在相同位置稍大一些。我正在使用柏
webgl - 如何快速学习 WebGL？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
webgl - WebGL 如何在深度缓冲区中设置值？
在 OpenGL 中，深度缓冲区值是根据场景的近和远裁剪平面计算的。 (引用:Getting the true z value from the depth buffer) 这在 WebGL 中是如何
webgl - 我可以在 webgl 片段着色器中使用多少个纹理？
简单的问题，但我无法在任何地方的规范中找到答案。我可能在某处遗漏了明显的答案。我可以在 WebGL 片段着色器中同时使用多少个纹理？如果它是可变的，那么假设 PC 使用的合理数字是多少？ (对移动不
webgl - 使用 WebGL 渲染全屏四边形
我有一个渲染场景的帧缓冲区，现在我想将它渲染到“全屏”四边形。如何设置我的相机以及我应该在我的顶点着色器中放置什么以便将帧缓冲区的纹理渲染到整个屏幕。我试过像这样创建一个全屏四边形 var gl =
webgl - 在 WebGL 中绘制许多形状
我正在阅读 here 的教程。 var gl; function initGL() { // Get A WebGL context var canvas = document.getEle
webgl - 学习 WebGL 的最佳方式是什么
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
webgl - 在 WebGL 中调试
我正在学习 WebGL，我能感觉到我的速度很慢，因为我很难调试我的代码。是否有任何扩展或工具可以帮助我知道缓冲区、属性指针、矩阵等的值。我在谷歌上搜索并了解了 chrome 扩展程序 spector
webgl - 了解 WebGL 状态
我可以在某处找到任何文档来记录 WebGL 调用所需的先决条件吗？我已经对 WebGL 基础有了相当深入的了解，但现在我正在创建自己的“框架”，并且我正在更深入地了解。例如， enableVert
webgl - 我应该学习哪个 WebGL 框架？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 7年前关闭。 Improve t
webgl - 从 webgl 中获取数据
我有兴趣在 webgl 中执行一些密集计算，所以它在 GPU 上运行。大多数文档都讨论了如何渲染图形。我正在完成非常简单的任务:对于给定的图像，将其转换为灰度，并找到局部最大值的坐标(比其邻居更亮
webgl - 如何修改此 WebGL 片段着色器以增加高光的亮度并减少
我目前在 WebGL 中使用这个片段着色器来对照片纹理应用高光/阴影调整。着色器本身是直接从优秀的 GPUImage 中拉出来的适用于 iOS 的库。 uniform sampler2D input
webgl - 如何在 webgl 中设置时间统一
我是 webgl 的新手。我正在尝试设置时间统一，因此我可以随着时间的推移更改片段着色器的输出。我认为这实现起来相当简单，但我正在努力。我知道这两种方法可能涉及: https://developer.
webgl - 是否可以在同一页面上有两个 WebGL 上下文？
我正在尝试使用两个 Canvas 并排绘制相同的 WebGL 场景。是否可以？到目前为止，我还没有走运。思路如下: 我加载几何我设置了两个gl上下文，每幅 Canvas 一个我调用 drawEl
webgl - 在 WebGL 中渲染球体时遇到问题
我正在学习 WebGL 并尝试显示一个球体。没有纹理，只有每个顶点着色，但我在 Opera 和 Chrome 中收到以下错误消息:“[.WebGLRenderingContext]GL 错误:GL_I

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Webgl 没有渲染我的圈子