varying 只能是浮點型, 因爲所有頂點傳到片元的值都需要插值, 布爾和int不能插值, 雖然不是不確實, 但是目前看起來是這樣的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Basic Draw Add Color</title>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPos;
attribute vec4 aColor;
// varying int index;
varying vec4 vColor;
void main(void){
// index=1;
gl_Position = vec4(aPos, 1);
vColor = aColor;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
varying vec4 vColor;
// varying int index;
int findMax(float r, float g, float b) {
if (r > g && r > b) {
return 0;
}
if (g > r && g > b) {
return 1;
}
return 2;
}
void main(void) {
float red = vColor.r;
float green = vColor.g;
float blue = vColor.b;
int max = findMax(red, green, blue);
vec4 finalColor = vColor;
if (max == 0) {
finalColor = vec4(1.0, 0.0, 0.0, 1.0);
}
else if (max == 1) {
finalColor = vec4(0.0, 1.0, 0.0, 1.0);
}
else if (max == 2) {
finalColor = vec4(0.0, 0.0, 1.0, 1.0);
}
gl_FragColor = finalColor;
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var gl;
var canvas = document.getElementById("canvas");
var glProgram = null;
function getGLContext() {
var glContextNames = ["webgl", "experimental-webgl"];
for (var i = 0; i < glContextNames.length; i++) {
try {
gl = canvas.getContext(glContextNames[i]);
} catch (e) {}
if (gl) {
gl.clearColor(74 / 255, 115 / 255, 94 / 255, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0, 0, canvas.width, canvas.height);
break;
}
}
}
function initShaders() {
//get shader source
var vs_source = document.getElementById("shader-vs").innerHTML,
fs_source = document.getElementById("shader-fs").innerHTML;
//compile shaders
vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);
fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);
//create program
glProgram = gl.createProgram();
//attach and link shaders to the program
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);
if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
alert("Unable to initialize the shader program.");
}
//use program
gl.useProgram(glProgram);
}
function makeShader(src, type) {
//compile the vertex shader
var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
}
return shader;
}
function setupBuffer() {
// vertex representing the triangle
var vertex = [-0.5, -0.2, 0, 0.5, -0.2, 0, 0, 0.6, 0];
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(vertex),
gl.STATIC_DRAW
);
var aVertexPosition = gl.getAttribLocation(glProgram, "aPos");
// point the attribute to the currently bound vertex buffer.
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);
var color = [1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1];
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);
var aColorPosition = gl.getAttribLocation(glProgram, "aColor");
gl.vertexAttribPointer(aColorPosition, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aColorPosition);
}
function draw() {
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
window.onload = function () {
getGLContext();
initShaders();
setupBuffer();
draw();
};
</script>
</body>
</html>