سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. در قسمت قبل راجع به ترسیم مثلث مطالبی بیان نمودیم .پیرو آن در این جلسه طراحی چهار ضلعی در WebGL و مراحل طراحی چهار ضلعی در webgl رو خواهیم داشت.
در قسمت قبل ما درباره حالت های مختلف ارائه شده توسط WebGL بحث کردیم. ما همچنین می توانیم از indices ها برای استفاده از یکی از این حالت ها استفاده کنیم. برای رسم الگوها در WebGL، باید یکی از این primitives را انتخاب کنیم و مش مورد نیاز را بسازیم . (به عنوان مثال ، یک مدل با استفاده از یک یا چند primitives ).
در این فصل، نمونه ای برای نشان دادن نحوه ایجاد چهارگوش با استفاده از WebGL خواهیم داشت.
مراحل زیر برای ایجاد یک برنامه WebGL برای ساخت یک چهار ضلعی مورد نیاز است.
مرحله ۱ – بوم را آماده کرده و WebGL Rendering Context را دریافت کنید.
در این مرحله، WebGL Rendering context object با استفاده از ()getContext به دست می آید.
مرحله ۲ – تعریف Geometry و ذخیره آن در Buffer Objects
مربع می تواند با استفاده از دو مثلث کشیده شود. در این مثال، ما vertices یا رئوس برای دو مثلث (با یک لبه مشترک) و indices یا شاخص ها ارائه می کنیم.
1 2 3 4 5 6 7 8 | var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, 0.5,0.5,0.0 ]; indices = [3,2,1,3,1,0]; |
مرحله ۳ – Shader Programs را ایجاد و کامپایل کنید
در این مرحله، شما نیاز به نوشتن برنامه های شیدر رأس و fragment shader، کامپایل کردن آن ها، و ایجاد یک برنامه ترکیبی با لینک دادن این دو برنامه داریم.
Vertex Shader – درشیدر راس یا Vertex Shader، ما ویژگی بردار را برای ذخیره مختصات سه بعدی تعریف می کنیم و آن را به gl_position اختصاص می دهیم.
1 2 3 4 5 | var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + '}'; |
Fragment Shader – در Fragment Shader، ما به سادگی متغیر رنگ را به متغیر gl_FragColor اختصاص دادیم.
1 | var fragCode = 'void main(void) {' +' gl_FragColor = vec4(0.5, 0.3, 0.0, 7.5);' +'}'; |
مرحله ۴ – Shader Programs را به Buffer Objects وصل کنید.
در این مرحله، اشیای بافر را با برنامه شیدر مرتبط می کنیم.
مرحله ۵ – طراحی Required Object
از آنجایی که ما برای رسیدن به چهارضلعی، دو مثلث طراحی می کنیم، با استفاده از شاخص ها، از روش ()drawElements استفاده می کنیم. برای این روش، ما تعدادی indicesها را منتقل می کنیم. مقدار indexs.length تعداد indices یا شاخص ها را می دهد.
1 | gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); |
در زیر نحوه ایجاد برنامه کاربردی WebGL برای ساخت یک چهار ضلعی نشان داده شده است.
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 120 121 122 123 124 125 126 127 128 129 130 131 | <!doctype html> <html> <body> <canvas width = "570" height = "570" id = "my_Canvas"></canvas> <script> /*============ Creating a canvas =================*/ var canvas = document.getElementById('my_Canvas'); gl = canvas.getContext('experimental-webgl'); /*========== Defining and storing the geometry =========*/ var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, 0.5,0.5,0.0 ]; indices = [3,2,1,3,1,0]; // Create an empty buffer object to store vertex buffer 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); // Create an empty buffer object to store Index buffer var Index_Buffer = gl.createBuffer(); // Bind appropriate array buffer to it gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer); // Pass the vertex data to the buffer gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // Unbind the buffer gl.bindBuffer(gl.ELEMENT_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); // Bind index buffer object gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_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 Quad ================*/ // 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 buffer bit gl.clear(gl.COLOR_BUFFER_BIT); // Set the view port gl.viewport(0,0,canvas.width,canvas.height); // Draw the triangle gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); </script> </body> </html> |
در این جلسه طراحی چهار ضلعی در WebGL و مراحل طراحی چهار ضلعی در webgl رو همراه مثال داشتیم. در ادامه رنگ ها رو خواهیم داشت.