webGL konkáv poligon

Top  Previous  Next

 

<!DOCTYPE html>

<html>

<head>

<title>Konkáv izé</title>

<script>

 function start()

 {

  var gl=document.getElementById("glcanv").getContext("webgl",{stencil:true});

 

  var vs=gl.createShader(gl.VERTEX_SHADER);

  var fs=gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vs, "attribute vec2 coords;void main(void){gl_Position = vec4(coords, 0.0, 1.0);}");

  gl.shaderSource(fs, "void main(void){gl_FragColor=vec4(1.0, 0.0, 0.0, 1);}");

  gl.compileShader(vs);

  gl.compileShader(fs);

  var prg=gl.createProgram();

  gl.attachShader(prg, vs);

  gl.attachShader(prg, fs);

  gl.linkProgram(prg);

  gl.useProgram(prg);

 

  var vertices=[-0.5,-0.5,0,0.5,0.5,-0.5,0,-0.2];

  var indices=[0,1,2,3];

 

  var vertexbuff=gl.createBuffer();

  var indexbuff=gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexbuff);

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexbuff);

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

 

  var coords = gl.getAttribLocation(prg, "coords");

  gl.vertexAttribPointer(coords, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(coords);

 

  gl.enable(gl.STENCIL_TEST);

  gl.clearColor(0,0,0,1);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

  gl.colorMask(false,false,false,false);

  gl.stencilFunc(gl.ALWAYS,1,1); // igazabol ALWAYS az alapertelmezett amugy is

  gl.stencilOp(gl.INVERT,gl.INVERT,gl.INVERT);

  gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT,0);

  gl.colorMask(true,true,true,true);

  gl.stencilFunc(gl.EQUAL,1,1);

  gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);

  gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT,0);

 }

</script>

</head>

<body onload="start()">

<canvas id="glcanv" width="500" height="500"></canvas>

</body>

</html>