Javascript webgl-尝试创建我的第一个小方形框_Javascript_Canvas_Webgl

Javascript webgl-尝试创建我的第一个小方形框

javascript canvas webgl

Javascript webgl-尝试创建我的第一个小方形框,javascript,canvas,webgl,Javascript,Canvas,Webgl,我对webGL非常陌生，我尝试使用javascript在画布中显示一个简单的方形框。我不知道如何调试。如果有人能帮助我，那就太好了。谢谢 var-gl，着色器程序； initGL（）； createShaders（）； draw（）；函数initGL（）{ 让canvas=document.getElementById（“canvas”）； gl=canvas.getContext（“webgl”）；总图视口（0.0，0.0，canvas.width，canvas.height）； gl

我对webGL非常陌生，我尝试使用javascript在画布中显示一个简单的方形框。我不知道如何调试。如果有人能帮助我，那就太好了。谢谢

var-gl，
着色器程序；
initGL（）；
createShaders（）；
draw（）；
函数initGL（）{
让canvas=document.getElementById（“canvas”）；
gl=canvas.getContext（“webgl”）；
总图视口（0.0，0.0，canvas.width，canvas.height）；
gl.clearColor（0.0,1.0,1.0,1.0）；//r、g、b和alpha的颜色。这些都是从0到1的标准化值。
}
函数createShaders（）{
var vs=“”；
vs+=“无效主（无效）{”；
vs+=“gl_位置=vec4（0.0,0.0,0.0,1.0）”；
vs+=“gl_PointSize=10.0；”；
vs+=“}”；
var vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vs）；
gl.compileShader（顶点着色器）；
var fs=“”；
fs+=“无效主（无效）{”；
fs+=“gl_FragColor=vec4（0.0,0.0,0.0,1.0）”；//全不透明黑色
fs+=“}”；
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fs）；
gl.compileShader（碎片着色器）；
shaderProgram=gl.createProgram（）；
gl.attachShader（着色器程序、顶点着色器）；
gl.attachShader（着色器程序、碎片着色器）；
gl.linkProgram（着色器程序）；
gl.useProgram（shaderProgram）；
}
函数draw（）{
总账清除（总账颜色缓冲位）；
总图绘制阵列（总图点，0,1）；
}

请阅读一些

问题是您遇到了着色器编译器错误。如果打开JavaScript控制台，您可能会看到

第一条消息表示您的着色器程序不正确

无论您阅读的是哪本书/网站，都应该告诉您检查着色器编译错误，例如

      { 
        const success = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
        if (!success) {
           console.error(gl.getShaderInfoLog(vertexShader));
           return false;
        }
      }

      { 
        const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);
        if (!success) {
           console.error(gl.getProgramInfoLog(shaderProgram));
           return false;
        }
      }

还有像这样的程序链接错误

      { 
        const success = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
        if (!success) {
           console.error(gl.getShaderInfoLog(vertexShader));
           return false;
        }
      }

      { 
        const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);
        if (!success) {
           console.error(gl.getProgramInfoLog(shaderProgram));
           return false;
        }
      }

这会指出着色器有问题。您在这一行缺少一个分号

      gl_Position = vec4(0.0, 0.0, 0.0, 1.0)

请阅读一些更好的教程。还要考虑使用JavaScript。比串接字符串容易得多

在编译和链接着色器的函数中调用

gl.useProgram

，也是一种反模式。WebGL应用程序通常有多个着色器程序

var-gl，
着色器程序；
initGL（）；
createShaders（）；
draw（）；
函数initGL（）{
让canvas=document.getElementById（“canvas”）；
gl=canvas.getContext（“webgl”）；
总图视口（0.0，0.0，canvas.width，canvas.height）；
gl.clearColor（0.0,1.0,1.0,1.0）；//r、g、b和alpha的颜色。这些都是从0到1的标准化值。
}
函数createShaders（）{
var vs=`
真空总管（真空）{
gl_位置=vec4（0.0,0.0,0.0,1.0）；
gl_PointSize=10.0；
}`;
var vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vs）；
gl.compileShader（顶点着色器）；
{ 
const success=gl.getShaderParameter（vertexShader，gl.COMPILE_状态）；
如果（！成功）{
console.error（gl.getshaderingfolog（vertexShader））；
返回false；
}
}
var fs=`
真空总管（真空）{
gl_FragColor=vec4（0.0,0.0,0.0,1.0）；//全不透明黑色
}`;
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fs）；
gl.compileShader（碎片着色器）；
{ 
const success=gl.getShaderParameter（fragmentShader，gl.COMPILE\u状态）；
如果（！成功）{
console.error（gl.getshaderingfolog（fragmentShader））；
返回false；
}
}
shaderProgram=gl.createProgram（）；
gl.attachShader（着色器程序、顶点着色器）；
gl.attachShader（着色器程序、碎片着色器）；
gl.linkProgram（着色器程序）；
{ 
const success=gl.getProgramParameter（着色器程序、gl.LINK\u状态）；
如果（！成功）{
console.error（gl.getProgramInfoLog（shaderProgram））；
返回false；
}
}      
gl.useProgram（shaderProgram）；
return true；//这是错误的。您应该返回程序
}
函数draw（）{
总账清除（总账颜色缓冲位）；
总图绘制阵列（总图点，0,1）；
}