سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. در فصل قبل ما در مورد چگونگی رسم یک مثلث با استفاده از WebGL بحث کردیم. علاوه بر مثلث، WebGL از سایر حالت های طراحی دیگر پشتیبانی می کند. این فصل نحوه طراحی شده توسط WebGL را توضیح می دهد. بنابراین مدل های طراحی در WebGL و حالت های رسم در webgl رو خواهیم داشت.
بیایید نگاهی به نحوه متدها داشته باشیم.()drawElements و ()Draw Arrays
1 2 3 | void drawElements(enum mode, long count, enum type, long offset); void drawArrays(enum mode, int first, long count); |
اگر به وضوح مشاهده کنید، هر دو روش حالت پارامتر را می پذیرند. با استفاده از این پارامتر، برنامه نویسان می توانند حالت طراحی را در WebGL انتخاب کنند.
حالت های طراحی ارائه شده توسط WebGL در جدول زیر ذکر شده است.
ردیف | مد و توضیحات |
---|---|
۱ | gl.POINTS برای رسم مجموعه ای از نقاط. |
۲ | gl.LINES برای رسم یک سری از خطوط غیر مرتبط (خط های انفرادی) می باشد. |
۳ | gl.LINE_STRIP برای رسم یک سری از خط های متصل شده. |
۴ | gl.LINE_LOOP برای رسم یک سری از خط های متصل شده. همچنین اولین و آخرین رأس برای تشکیل یک حلقه به هم می پیوندد. |
۵ | gl.TRIANGLES برای رسم یک سری از مثلث های جداگانه. |
۶ | gl.TRIANGLE_STRIP برای رسم یک سری از مثلث های متصل در مد نوار. |
۷ | gl.TRIANGLE_FAN برای رسم یک سری از مثلث های متصل شده با اشتراک گذاری اولین رأس در مد fan-like. |
مثال زیر نشان می دهد که چطور سه خط موازی را با استفاده از gl.LINES بنویسید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!doctype html> <html> <body> <canvas width = "300" height = "300" id = "my_Canvas"></canvas> <script> /*======= Creating a canvas =========*/ var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('experimental-webgl'); /*======= Defining and storing the geometry ======*/ var vertices = [ -0.7,-0.1,0, -0.3,0.6,0, -0.3,-0.3,0, 0.2,0.6,0, 0.3,-0.3,0, 0.7,0.6,0 ] // Create an empty buffer object var vertex_buffer = gl.createBuffer(); // Bind appropriate array buffer to it gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind the buffer gl.bindBuffer(gl.ARRAY_BUFFER, null); /*=================== Shaders ====================*/ // Vertex shader source code var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + '}'; // Create a vertex shader object var vertShader = gl.createShader(gl.VERTEX_SHADER); // Attach vertex shader source code gl.shaderSource(vertShader, vertCode); // Compile the vertex shader gl.compileShader(vertShader); // Fragment shader source code var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}'; // Create fragment shader object var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // Attach fragment shader source code gl.shaderSource(fragShader, fragCode); // Compile the fragmentt shader gl.compileShader(fragShader); // Create a shader program object to store // the combined shader program var shaderProgram = gl.createProgram(); // Attach a vertex shader gl.attachShader(shaderProgram, vertShader); // Attach a fragment shader gl.attachShader(shaderProgram, fragShader); // Link both the programs gl.linkProgram(shaderProgram); // Use the combined shader program object gl.useProgram(shaderProgram); /*======= Associating shaders to buffer objects ======*/ // Bind vertex buffer object gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Get the attribute location var coord = gl.getAttribLocation(shaderProgram, "coordinates"); // Point an attribute to the currently bound VBO gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); // Enable the attribute gl.enableVertexAttribArray(coord); /*============ Drawing the triangle =============*/ // Clear the canvas gl.clearColor(0.5, 0.5, 0.5, 0.9); // Enable the depth test gl.enable(gl.DEPTH_TEST); // Clear the color and depth buffer gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Set the view port gl.viewport(0,0,canvas.width,canvas.height); // Draw the triangle gl.drawArrays(gl.LINES, 0, 6); // POINTS, LINE_STRIP, LINE_LOOP, LINES, // TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES </script> </body> </html> |
در برنامه فوق، اگر حالت ()drawArrays را جایگزین کنید، هر بار خروجی های مختلفی تولید می کنید.
مدل های طراحی در WebGL و حالت های رسم در webgl و خطوط موازی رو با هم مشاهده نمودیم.