OpenGL ES 2.0中的裁剪平面

Question

我需要在OpenGL ES 2.0中的裁剪平面下裁剪幾百個對象，並希望獲得更多有關OpenGL子集的經驗的人士的建議。

在OpenGL ES 1.x中有glClipPlane。在桌面上，在着色器中有glClipPlane或gl_ClipDistance。這兩者在OpenGL ES 2.0中都不可用。看起來這種功能在2.0下完全消失。

看起來唯一的方法是A）在片段着色器中運行平面方程，或者B）寫一個非常複雜的頂點着色器，如果它們位於平面上，則將頂點放置在平面上。 （A）與glClipPlane相比會比較慢，因爲「規則」裁剪是在頂點着色器之後和片段着色器之前完成的，所以每個片段仍然必須被部分處理和丟棄。 （B）在着色器之間很難兼容，因爲我們不能丟棄我們必須將它們與平面對齊的頂點並調整那些被「剪切」的屬性。不可能在着色器中的頂點之間進行插值，而無需發送紋理中的所有頂點並對其進行採樣，這將非常昂貴。無論如何，通常無法正確地插入數據。

我也想過用裁剪平面對準近平面，這將是一個有效的解決方案。

在繪製整個場景並檢查深度失敗後繪製一個平面也不起作用（除非您正在接近垂直於平面）。

單個對象的作用是將平面繪製到深度緩衝區，然後使用glDepthFunc（GL_GREATER）呈現該對象，但如預期的那樣，當其中一個對象位於另一個對象後面時它不起作用。我試圖建立在這個概念之上，但最終卻以一種非常類似於影子的東西而結束，並且同樣昂貴。

那麼我錯過了什麼？你將如何在OpenGL ES 2.0中進行平面裁剪？

Answer 1

顯然，當我嘗試使用投影矩陣進行剪裁時，我遇到了一些問題。究竟如何做到這一點在本文中描述了我發現： http://www.terathon.com/lengyel/Lengyel-Oblique.pdf

我希望這會幫助其他人正在尋找這樣做。

Answer 2

我不知道這是否適用於OpenGL ES，但OpenGL具有由glEnable（GL_CLIP_DISTANCE0）啓用的gl_ClipDistance變量輸出。一旦啓用，該圖元將被剪裁，使得頂點和幾何着色器之後的gl_ClipDistance [0]> = 0。

剪輯距離可以被指定爲只是一個世界空間平面方程的點積：

http://github.prideout.net/clip-planes/

Answer 3

下面是兩種解決方法，我在Vuforia SDK forums找到。

1. 使用着色器由哈里·Smatt：

   uniform mat4 uModelM; 
   uniform mat4 uViewProjectionM; 
   attribute vec3 aPosition; 
   varying vec3 vPosition; 
   void main() { 
       vec4 pos = uModelM * vec4(aPosition, 1.0); 
       gl_Position = uViewProjectionM * pos; 
       vPosition = pos.xyz/pos.w; 
   } 
   

   ---

   precision mediump float; 
   varying vec3 vPosition; 
   void main() { 
       if (vPosition.z < 0.0) { 
       discard; 
       } else { 
       // Choose actual color for rendering.. 
       } 
   } 
   

2. 使用在深度緩衝器四亞歷山德羅Boccalatte：

   • 禁用顏色寫（即集glColorMask(false, false, false, false);）
   • 呈現與標記形狀相匹配的四邊形（即，只是一個具有相同尺寸和標記位置/方向的四邊形）;這隻會被渲染到深度緩衝（因爲在上一步中，我們禁用顏色緩衝區寫入）
   • 使後面的色彩面具（glColorMask(true, true, true, true);）
   • 渲染你的3D模型

Answer 4

由於擴展EXT_clip_cull_distance在OpenGL ES 2.0中不可用（因爲此擴展需要OpenGL ES 3.0），所以需要模擬剪切。它可以在片段着色器中通過丟棄片段來模擬。請參閱Fragment Shader - Special operations。

另請參見[OpenGL ES着色語言1.00規範; 6.4跳躍;頁碼58]：

丟棄關鍵字僅在片段着色器中允許。它可以在片段着色器中用於放棄當前片段上的操作。此關鍵字會導致碎片被丟棄，並且不會更新任何緩衝區。這將典型地被一個條件語句中使用，例如：

if (intensity < 0.0) 
    discard; 

它將模擬gl_ClipDistance可能看起來像這樣的着色器程序：

頂點着色器：

attribute vec3 inPos; 
attribute vec3 inCol; 

varying vec3 vertCol; 
varying float clip_distance; 

uniform mat4 u_projectionMat44; 
uniform mat4 u_viewMat44; 
uniform mat4 u_modelMat44; 
uniform vec4 u_clipPlane; 

void main() 
{ 
    vertCol  = inCol; 
    vec4 modelPos = u_modelMat44 * vec4(inPos, 1.0); 
    gl_Position = u_projectionMat44 * u_viewMat44 * viewPos; 
    clip_distance = dot(modelPos, u_clipPlane); 
} 

片段着色器：

​​

以下WebGL示例演示了這一點。請注意，WebGL 1.0上下文非常符合OpenGL ES 2.0 API。

var readInput = true; 
 
    function changeEventHandler(event){ 
 
    readInput = true; 
 
    } 
 
    
 
    (function loadscene() { 
 
    
 
    var gl, progDraw, vp_size; 
 
    var bufCube = {}; 
 
    var clip = 0.0; 
 
    
 
    function render(delteMS){ 
 

 
     if (readInput) { 
 
      readInput = false; 
 
      clip = (document.getElementById("clip").value - 50)/50; 
 
     } 
 

 
     Camera.create(); 
 
     Camera.vp = vp_size; 
 
      
 
     gl.viewport(0, 0, vp_size[0], vp_size[1]); 
 
     gl.enable(gl.DEPTH_TEST); 
 
     gl.clearColor(0.0, 0.0, 0.0, 1.0); 
 
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
 

 
     // set up draw shader 
 
     ShaderProgram.Use(progDraw); 
 
     ShaderProgram.SetUniformM44(progDraw, "u_projectionMat44", Camera.Perspective()); 
 
     ShaderProgram.SetUniformM44(progDraw, "u_viewMat44", Camera.LookAt()); 
 
     var modelMat = IdentityMat44() 
 
     modelMat = RotateAxis(modelMat, CalcAng(delteMS, 13.0), 0); 
 
     modelMat = RotateAxis(modelMat, CalcAng(delteMS, 17.0), 1); 
 
     ShaderProgram.SetUniformM44(progDraw, "u_modelMat44", modelMat); 
 
     ShaderProgram.SetUniformF4(progDraw, "u_clipPlane", [1.0,-1.0,0.0,clip*1.7321]); 
 
     
 
     // draw scene 
 
     VertexBuffer.Draw(bufCube); 
 

 
     requestAnimationFrame(render); 
 
    } 
 
    
 
    function resize() { 
 
     //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight]; 
 
     vp_size = [window.innerWidth, window.innerHeight] 
 
     canvas.width = vp_size[0]; 
 
     canvas.height = vp_size[1]; 
 
    } 
 
    
 
    function initScene() { 
 
    
 
     canvas = document.getElementById("canvas"); 
 
     gl = canvas.getContext("experimental-webgl"); 
 
     //gl = canvas.getContext("webgl2"); 
 
     if (!gl) 
 
     return null; 
 
     
 
     /* 
 
     var ext_frag_depth = gl.getExtension("EXT_clip_cull_distance"); // gl_ClipDistance gl_CullDistance 
 
     if (!ext_frag_depth) 
 
      alert('no gl_ClipDistance and gl_CullDistance support'); 
 
     */ 
 

 
     progDraw = ShaderProgram.Create( 
 
     [ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER }, 
 
      { source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER } 
 
     ]); 
 
     if (!progDraw.progObj) 
 
      return null; 
 
     progDraw.inPos = ShaderProgram.AttributeIndex(progDraw, "inPos"); 
 
     progDraw.inNV = ShaderProgram.AttributeIndex(progDraw, "inNV"); 
 
     progDraw.inCol = ShaderProgram.AttributeIndex(progDraw, "inCol"); 
 
     
 
     // create cube 
 
     var cubePos = [ 
 
     -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 
 
     -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0 ]; 
 
     var cubeCol = [ 1.0, 0.0, 0.0, 1.0, 0.5, 0.0, 1.0, 0.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]; 
 
     var cubeHlpInx = [ 0, 1, 2, 3, 1, 5, 6, 2, 5, 4, 7, 6, 4, 0, 3, 7, 3, 2, 6, 7, 1, 0, 4, 5 ]; 
 
     var cubePosData = []; 
 
     for (var i = 0; i < cubeHlpInx.length; ++ i) { 
 
     cubePosData.push(cubePos[cubeHlpInx[i]*3], cubePos[cubeHlpInx[i]*3+1], cubePos[cubeHlpInx[i]*3+2]); 
 
     } 
 
     var cubeNVData = []; 
 
     for (var i1 = 0; i1 < cubeHlpInx.length; i1 += 4) { 
 
     var nv = [0, 0, 0]; 
 
     for (i2 = 0; i2 < 4; ++ i2) { 
 
      var i = i1 + i2; 
 
      nv[0] += cubePosData[i*3]; nv[1] += cubePosData[i*3+1]; nv[2] += cubePosData[i*3+2]; 
 
     } 
 
     for (i2 = 0; i2 < 4; ++ i2) 
 
     cubeNVData.push(nv[0], nv[1], nv[2]); 
 
     } 
 
     var cubeColData = []; 
 
     for (var is = 0; is < 6; ++ is) { 
 
     for (var ip = 0; ip < 4; ++ ip) { 
 
     cubeColData.push(cubeCol[is*3], cubeCol[is*3+1], cubeCol[is*3+2]); 
 
     } 
 
     } 
 
     var cubeInxData = []; 
 
     for (var i = 0; i < cubeHlpInx.length; i += 4) { 
 
     cubeInxData.push(i, i+1, i+2, i, i+2, i+3); 
 
     } 
 
     bufCube = VertexBuffer.Create(
 
     [ { data : cubePosData, attrSize : 3, attrLoc : progDraw.inPos }, 
 
     { data : cubeNVData, attrSize : 3, attrLoc : progDraw.inNV }, 
 
     { data : cubeColData, attrSize : 3, attrLoc : progDraw.inCol } ], 
 
     cubeInxData); 
 
     
 
     window.onresize = resize; 
 
     resize(); 
 
     requestAnimationFrame(render); 
 
    } 
 
    
 
    function Fract(val) { 
 
     return val - Math.trunc(val); 
 
    } 
 
    function CalcAng(deltaTime, intervall) { 
 
     return Fract(deltaTime/(1000*intervall)) * 2.0 * Math.PI; 
 
    } 
 
    function CalcMove(deltaTime, intervall, range) { 
 
     var pos = self.Fract(deltaTime/(1000*intervall)) * 2.0 
 
     var pos = pos < 1.0 ? pos : (2.0-pos) 
 
     return range[0] + (range[1] - range[0]) * pos; 
 
    }  
 
    function EllipticalPosition(a, b, angRag) { 
 
     var a_b = a * a - b * b 
 
     var ea = (a_b <= 0) ? 0 : Math.sqrt(a_b); 
 
     var eb = (a_b >= 0) ? 0 : Math.sqrt(-a_b); 
 
     return [ a * Math.sin(angRag) - ea, b * Math.cos(angRag) - eb, 0 ]; 
 
    } 
 
    
 
    glArrayType = typeof Float32Array !="undefined" ? Float32Array : (typeof WebGLFloatArray != "undefined" ? WebGLFloatArray : Array); 
 
    
 
    function IdentityMat44() { 
 
    var m = new glArrayType(16); 
 
    m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0; 
 
    m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0; 
 
    m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0; 
 
    m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1; 
 
    return m; 
 
    }; 
 
    
 
    function RotateAxis(matA, angRad, axis) { 
 
     var aMap = [ [1, 2], [2, 0], [0, 1] ]; 
 
     var a0 = aMap[axis][0], a1 = aMap[axis][1]; 
 
     var sinAng = Math.sin(angRad), cosAng = Math.cos(angRad); 
 
     var matB = new glArrayType(16); 
 
     for (var i = 0; i < 16; ++ i) matB[i] = matA[i]; 
 
     for (var i = 0; i < 3; ++ i) { 
 
      matB[a0*4+i] = matA[a0*4+i] * cosAng + matA[a1*4+i] * sinAng; 
 
      matB[a1*4+i] = matA[a0*4+i] * -sinAng + matA[a1*4+i] * cosAng; 
 
     } 
 
     return matB; 
 
    } 
 
    
 
    function Cross(a, b) { return [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0], 0.0 ]; } 
 
    function Dot(a, b) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]; } 
 
    function Normalize(v) { 
 
     var len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); 
 
     return [ v[0]/len, v[1]/len, v[2]/len ]; 
 
    } 
 
    
 
    var Camera = {}; 
 
    Camera.create = function() { 
 
     this.pos = [0, 3, 0.0]; 
 
     this.target = [0, 0, 0]; 
 
     this.up  = [0, 0, 1]; 
 
     this.fov_y = 90; 
 
     this.vp  = [800, 600]; 
 
     this.near = 0.5; 
 
     this.far = 100.0; 
 
    } 
 
    Camera.Perspective = function() { 
 
     var fn = this.far + this.near; 
 
     var f_n = this.far - this.near; 
 
     var r = this.vp[0]/this.vp[1]; 
 
     var t = 1/Math.tan(Math.PI * this.fov_y/360); 
 
     var m = IdentityMat44(); 
 
     m[0] = t/r; m[1] = 0; m[2] = 0;        m[3] = 0; 
 
     m[4] = 0; m[5] = t; m[6] = 0;        m[7] = 0; 
 
     m[8] = 0; m[9] = 0; m[10] = -fn/f_n;      m[11] = -1; 
 
     m[12] = 0; m[13] = 0; m[14] = -2 * this.far * this.near/f_n; m[15] = 0; 
 
     return m; 
 
    } 
 
    Camera.LookAt = function() { 
 
     var mz = Normalize([ this.pos[0]-this.target[0], this.pos[1]-this.target[1], this.pos[2]-this.target[2] ]); 
 
     var mx = Normalize(Cross(this.up, mz)); 
 
     var my = Normalize(Cross(mz, mx)); 
 
     var tx = Dot(mx, this.pos); 
 
     var ty = Dot(my, this.pos); 
 
     var tz = Dot([-mz[0], -mz[1], -mz[2]], this.pos); 
 
     var m = IdentityMat44(); 
 
     m[0] = mx[0]; m[1] = my[0]; m[2] = mz[0]; m[3] = 0; 
 
     m[4] = mx[1]; m[5] = my[1]; m[6] = mz[1]; m[7] = 0; 
 
     m[8] = mx[2]; m[9] = my[2]; m[10] = mz[2]; m[11] = 0; 
 
     m[12] = tx; m[13] = ty; m[14] = tz; m[15] = 1; 
 
     return m; 
 
    } 
 
    
 
    var ShaderProgram = {}; 
 
    ShaderProgram.Create = function(shaderList) { 
 
     var shaderObjs = []; 
 
     for (var i_sh = 0; i_sh < shaderList.length; ++ i_sh) { 
 
      var shderObj = this.CompileShader(shaderList[i_sh].source, shaderList[i_sh].stage); 
 
      if (shderObj == 0) 
 
       return 0; 
 
      shaderObjs.push(shderObj); 
 
     } 
 
     var prog = {} 
 
     prog.progObj = this.LinkProgram(shaderObjs) 
 
     if (prog.progObj) { 
 
      prog.attribIndex = {}; 
 
      var noOfAttributes = gl.getProgramParameter(prog.progObj, gl.ACTIVE_ATTRIBUTES); 
 
      for (var i_n = 0; i_n < noOfAttributes; ++ i_n) { 
 
       var name = gl.getActiveAttrib(prog.progObj, i_n).name; 
 
       prog.attribIndex[name] = gl.getAttribLocation(prog.progObj, name); 
 
      } 
 
      prog.unifomLocation = {}; 
 
      var noOfUniforms = gl.getProgramParameter(prog.progObj, gl.ACTIVE_UNIFORMS); 
 
      for (var i_n = 0; i_n < noOfUniforms; ++ i_n) { 
 
       var name = gl.getActiveUniform(prog.progObj, i_n).name; 
 
       prog.unifomLocation[name] = gl.getUniformLocation(prog.progObj, name); 
 
      } 
 
     } 
 
     return prog; 
 
    } 
 
    ShaderProgram.AttributeIndex = function(prog, name) { return prog.attribIndex[name]; } 
 
    ShaderProgram.UniformLocation = function(prog, name) { return prog.unifomLocation[name]; } 
 
    ShaderProgram.Use = function(prog) { gl.useProgram(prog.progObj); } 
 
    ShaderProgram.SetUniformI1 = function(prog, name, val) { if(prog.unifomLocation[name]) gl.uniform1i(prog.unifomLocation[name], val); } 
 
    ShaderProgram.SetUniformF1 = function(prog, name, val) { if(prog.unifomLocation[name]) gl.uniform1f(prog.unifomLocation[name], val); } 
 
    ShaderProgram.SetUniformF2 = function(prog, name, arr) { if(prog.unifomLocation[name]) gl.uniform2fv(prog.unifomLocation[name], arr); } 
 
    ShaderProgram.SetUniformF3 = function(prog, name, arr) { if(prog.unifomLocation[name]) gl.uniform3fv(prog.unifomLocation[name], arr); } 
 
    ShaderProgram.SetUniformF4 = function(prog, name, arr) { if(prog.unifomLocation[name]) gl.uniform4fv(prog.unifomLocation[name], arr); } 
 
    ShaderProgram.SetUniformM33 = function(prog, name, mat) { if(prog.unifomLocation[name]) gl.uniformMatrix3fv(prog.unifomLocation[name], false, mat); } 
 
    ShaderProgram.SetUniformM44 = function(prog, name, mat) { if(prog.unifomLocation[name]) gl.uniformMatrix4fv(prog.unifomLocation[name], false, mat); } 
 
    ShaderProgram.CompileShader = function(source, shaderStage) { 
 
     var shaderScript = document.getElementById(source); 
 
     if (shaderScript) 
 
     source = shaderScript.text; 
 
     var shaderObj = gl.createShader(shaderStage); 
 
     gl.shaderSource(shaderObj, source); 
 
     gl.compileShader(shaderObj); 
 
     var status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS); 
 
     if (!status) alert(gl.getShaderInfoLog(shaderObj)); 
 
     return status ? shaderObj : null; 
 
    } 
 
    ShaderProgram.LinkProgram = function(shaderObjs) { 
 
     var prog = gl.createProgram(); 
 
     for (var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh) 
 
      gl.attachShader(prog, shaderObjs[i_sh]); 
 
     gl.linkProgram(prog); 
 
     status = gl.getProgramParameter(prog, gl.LINK_STATUS); 
 
     if (!status) alert("Could not initialise shaders"); 
 
     gl.useProgram(null); 
 
     return status ? prog : null; 
 
    } 
 
    
 
    var VertexBuffer = {}; 
 
    VertexBuffer.Create = function(attributes, indices) { 
 
     var buffer = {}; 
 
     buffer.buf = []; 
 
     buffer.attr = [] 
 
     for (var i = 0; i < attributes.length; ++ i) { 
 
      buffer.buf.push(gl.createBuffer()); 
 
      buffer.attr.push({ size : attributes[i].attrSize, loc : attributes[i].attrLoc }); 
 
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buf[i]); 
 
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(attributes[i].data), gl.STATIC_DRAW); 
 
     } 
 
     buffer.inx = gl.createBuffer(); 
 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer.inx); 
 
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 
 
     buffer.inxLen = indices.length; 
 
     gl.bindBuffer(gl.ARRAY_BUFFER, null); 
 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 
 
     return buffer; 
 
    } 
 
    VertexBuffer.Draw = function(bufObj) { 
 
    for (var i = 0; i < bufObj.buf.length; ++ i) { 
 
      gl.bindBuffer(gl.ARRAY_BUFFER, bufObj.buf[i]); 
 
      gl.vertexAttribPointer(bufObj.attr[i].loc, bufObj.attr[i].size, gl.FLOAT, false, 0, 0); 
 
      gl.enableVertexAttribArray(bufObj.attr[i].loc); 
 
     } 
 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufObj.inx); 
 
     gl.drawElements(gl.TRIANGLES, bufObj.inxLen, gl.UNSIGNED_SHORT, 0); 
 
     for (var i = 0; i < bufObj.buf.length; ++ i) 
 
     gl.disableVertexAttribArray(bufObj.attr[i].loc); 
 
     gl.bindBuffer(gl.ARRAY_BUFFER, null); 
 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 
 
    } 
 
    
 
    initScene(); 
 
    
 
    })();

html,body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
#gui { 
 
    position : absolute; 
 
    top : 0; 
 
    left : 0; 
 
}

<script id="draw-shader-vs" type="x-shader/x-vertex"> 
 
    precision highp float; 
 
    
 
    attribute vec3 inPos; 
 
    attribute vec3 inNV; 
 
    attribute vec3 inCol; 
 
    
 
    varying vec3 vertPos; 
 
    varying vec3 vertNV; 
 
    varying vec3 vertCol; 
 
    varying float clip_distance; 
 
    
 
    uniform mat4 u_projectionMat44; 
 
    uniform mat4 u_viewMat44; 
 
    uniform mat4 u_modelMat44; 
 
    uniform vec4 u_clipPlane; 
 
    
 
    void main() 
 
    { 
 
     mat4 mv  = u_viewMat44 * u_modelMat44; 
 
     vertCol  = inCol; 
 
     vertNV  = normalize(mat3(mv) * inNV); 
 
     vec4 viewPos = mv * vec4(inPos, 1.0); 
 
     vertPos  = viewPos.xyz; 
 
     gl_Position = u_projectionMat44 * viewPos; 
 

 
     vec4 modelPos = u_modelMat44 * vec4(inPos, 1.0); 
 
     vec4 clipPlane = vec4(normalize(u_clipPlane.xyz), u_clipPlane.w); 
 
     clip_distance = dot(modelPos, clipPlane); 
 
    } 
 
</script> 
 
    
 
<script id="draw-shader-fs" type="x-shader/x-fragment"> 
 
    precision mediump float; 
 

 
    varying vec3 vertPos; 
 
    varying vec3 vertNV; 
 
    varying vec3 vertCol; 
 
    varying float clip_distance; 
 
    
 
    void main() 
 
    { 
 
     if (clip_distance < 0.0) 
 
      discard; 
 
     vec3 color = vertCol; 
 
     gl_FragColor = vec4(color.rgb, 1.0); 
 
    } 
 
</script> 
 

 
<div> 
 
    <form id="gui" name="inputs"> 
 
     <table> 
 
      <tr> <td> <font color= #CCF>clipping</font> </td> 
 
       <td> <input type="range" id="clip" min="0" max="100" value="50" onchange="changeEventHandler(event);"/></td> </tr> 
 
     </table> 
 
    </form> 
 
</div> 
 

 

 
<canvas id="canvas" style="border: none;" width="100%" height="100%"></canvas>