相关疑难解决方法(0)

我需要获得更详细的信息，以便比较我的 Canvas、WebGL 和其他 Canvas、WebGL 的工作原理。

所以我在浏览器的开发者工具中找了一个Canvas、WebGL可以调试和调查的功能。虽然 Canvas 和 WebGL 是常用技术，但他们的调试工具并没有找到太多。

据其官网介绍，Firefox 于 2014 年推出了 Canvas 调试工具，WebKit 于 2018 年推出了 Canvas 调试工具。

• 画布调试 | 网页套件

• 在 Firefox 开发人员工具中引入 Canvas 调试器 - Mozilla Hacks - Web 开发人员博客

但是，最新版本的 Firefox 和 Chrome 没有这些功能。

我在 SO 上看到了很多线程，但它们要么是“安装旧浏览器”，要么是“使用其他人的扩展调试工具”。

• 如何检查画布框架
• HTML5 画布检查器？
• 镀铬帆布检查员 2015
• 在 Chrome 51 中，如何激活 Canvas Profiling 功能？
• WebGL 调试工具？
• Webgl 着色器调试器，变量检查
• 在 chrome 中调试 webgl

但是，我不想安装太旧的浏览器。此外，某人创建的扩展调试工具大多无人维护（例如：WebGL-Inspector）。

目前是否有任何 Canvas、WebGL 调试器或检查器可以与最新的浏览器（Firefox、Chrome）一起使用？

我通过这本书一步一步地学习了 WebGL 。我尝试通过使用缓冲区 ( gl.ARRAY_BUFFER) 而不是循环来绘制三个点（正如我之前在本书的其他示例中所做的那样）。

  var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
  if(!u_FragColor){
    console.log('Can\'t to get the "u_FragColor" variable.');
    return -1;
  }

  // gl.uniform1f(u_FragColor, 1.0); // <- this variant doesn't work! Why?
  gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0);

它工作正常，但我有一个关于gl_FragColor初始化的问题：为什么我不能替换

gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0);

在

gl.uniform1f(u_FragColor, 1.0);

? 我预计这是一样的。但是在这种情况下，我在控制台中收到错误消息：