javascript - 从 javascript 到片段着色器的单色

Question

我试图在每次代码执行时生成随机颜色并将其传递给片段着色器(以绘制三 Angular 形)。阅读其他帖子后，我认为最有效的解决方案似乎是:

• 在片段着色器中设置统一变量
• 将其链接到 JavaScript 变量
• 使用提供数据的uniform4f写入片段着色器

尝试构建此结构时，我的代码片段不显示三 Angular 形，而仅显示背景。如果我采取去掉所有处理颜色的线，三 Angular 形再次出现。

 var can = document.getElementById('cont'); 
var gl = can.getContext('experimental-webgl');
gl.clearColor(0.0, 0.1, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

red = Math.random();
green = Math.random();
blue = Math.random();
alpha = Math.random();
var vertices = [-1,-1,1,-1,0,0.5];
var colorData = [red,green,blue,alpha];

//Create color buffer
var cbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,cbo);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colorData),gl.STATIC_DRAW);

//Create vertex buffer    
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);


//Shaders
var vshaderCode = 'attribute vec2 pos;' + 'void main() {gl_Position = vec4 (pos,0.,1.);}';

var fshaderCode = 'precision mediump float;' + 'uniform vec4 uColor' + 'void main() {gl_FragColor = uColor;}';


function getShader(shaderSource,type) {
var shad = gl.createShader(type);
gl.shaderSource(shad,shaderSource);
gl.compileShader(shad);  
return shad;
}

var vertexShader = getShader (vshaderCode,gl.VERTEX_SHADER);
var fragmentShader = getShader (fshaderCode,gl.FRAGMENT_SHADER);

//Create the program to link shaders

var prog = gl.createProgram();
gl.attachShader(prog,vertexShader);
gl.attachShader(prog,fragmentShader);
gl.linkProgram(prog);

var _position = gl.getAttribLocation(prog, "pos");
var u_ColorLocation = gl.getUniformLocation(prog, "uColor");

//Draw
gl.enableVertexAttribArray(_position);
gl.useProgram(prog);
gl.vertexAttribPointer(_position, 2, gl.FLOAT, false, 0,0);
gl.uniform4f(u_ColorLocation, colorData);
gl.drawArrays(gl.TRIANGLES, 0, 3);

控制台显示 gl.uniform4f(u_ColorLocation, colorData); 需要五个参数。我不清楚这一点。

即使我将该行更改为类似 gl.uniform4f(u_colorLocation, 0, 0, 1, 1); 的程序也不会链接。

如何将我的值从 javascript 传递到 GPU 上的片段，以便我的三 Angular 形只有一种颜色，由 javascript 变量驱动？

Answer 1

您缺少一个 ;在您的 fshaderCode 着色器上，因此它无法编译。

读取着色器的 COMPILE_STATUS 可以帮助您确定是否存在任何语法问题。

if (!gl.getShaderParameter(shad, gl.COMPILE_STATUS)) {
    console.log("COMPILE_STATUS", gl.getShaderInfoLog(shad));
}

更新了代码以显示随机颜色三 Angular 形

var can = document.getElementById('cont'); 
var gl = can.getContext('experimental-webgl');
gl.clearColor(0.0, 0.1, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

red = Math.random();
green = Math.random();
blue = Math.random();
alpha = Math.random();
var vertices = [-1,-1,1,-1,0,0.5];
var colorData = [red,green,blue,alpha];

//Create color buffer
var cbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,cbo);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colorData),gl.STATIC_DRAW);

//Create vertex buffer    
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);


//Shaders
var vshaderCode = 'attribute vec2 pos;' + 'void main()' + '{gl_Position = vec4 (pos,0.,1.);' + '}';

var fshaderCode = 'precision mediump float;' + 'uniform vec4 uColor;' + 'void main() {gl_FragColor = uColor;}';


function getShader(shaderSource,type) {
var shad = gl.createShader(type);
gl.shaderSource(shad,shaderSource);
gl.compileShader(shad);
  
if (!gl.getShaderParameter(shad, gl.COMPILE_STATUS)) {
    console.log("COMPILE_STATUS", gl.getShaderInfoLog(shad));
}
  
return shad;
}

var vertexShader = getShader (vshaderCode,gl.VERTEX_SHADER);
var fragmentShader = getShader (fshaderCode,gl.FRAGMENT_SHADER);

//Create the program to link shaders

var prog = gl.createProgram();
gl.attachShader(prog,vertexShader);
gl.attachShader(prog,fragmentShader);
gl.linkProgram(prog);

var _position = gl.getAttribLocation(prog, "pos");
var u_ColorLocation = gl.getUniformLocation(prog, "uColor");

//Draw

var r = Math.random(), g= Math.random(), b = Math.random();

gl.enableVertexAttribArray(_position);
gl.useProgram(prog);
gl.vertexAttribPointer(_position, 2, gl.FLOAT, false, 0,0);
gl.uniform4f(u_ColorLocation, r, g, b, 1.0);
gl.drawArrays(gl.TRIANGLES, 0, 3);

<canvas id="cont"></canvas>