سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. طراحی نقاط در WebGL به صورت مراحلی انجام می شود که در ادامه به مراحل مورد نیاز طراحی نقاط در WebGL همراه با مثال هایی خواهیم پرداخت.
ما قبلا بحث کردیم که چگونه یک فرایند گام به گام برای رسم یک primitive را انجام دهیم و این فرایند را در پنج مرحله توضیح دادیم. شما باید این مراحل را هر بار که یک شکل جدید را طراحی می کنید، تکرار کنید. این قسمت از آموزش توضیح می دهد چگونه نقاط با مختصات ۳D در WebGL طراحی کنید. قبل از حرکت بیشتر، بگذارید ما آن را در پنج مرحله بسازیم.
مراحل زیر برای ایجاد یک برنامه WebGL برای طزاحی نقاط یا points لازم است.
مرحله ۱ – بوم یا Canvas را آماده کرده و WebGL Rendering Context را دریافت کنید.
در این مرحله، WebGL Rendering context object را با استفاده از روش ()getContext به دست می آوریم.
مرحله ۲ – تعریف Geometry و ذخیره آن در Buffer Objects
از آنجایی که ما سه نقطه را مشخص می کنیم، سه رأس را با مختصات سه بعدی تعریف می کنیم و آن ها را در بافر ها ذخیره می کنیم.
1 2 3 4 5 | var vertices = [ -0.5,0.5,0.0, 0.0,0.5,0.0, -0.25,0.25,0.0, ]; |
مرحله ۳ – برنامه های شیدر را ایجاد و کامپایل کنید.
در این مرحله، شما نیاز به نوشتن برنامه های شیدر vertex و شیدر fragment ، کامپایل کردن آن ها و ایجاد یک برنامه ترکیبی با لینک دادن این دو برنامه دارید.
Vertex Shader – در شیدر vertex از مثال داده شده، یک ویژگی بردار را برای ذخیره مختصات سه بعدی تعریف می کنیم و آن را به متغیر gl_position اختصاص می دهیم.
gl_pointsize متغیر مورد استفاده برای تعیین اندازه نقطه است. ما اندازه نقطه را ۱۰ برابر می کنیم.
1 2 3 4 5 6 | var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + 'gl_PointSize = 10.0;'+ '}'; |
Fragment Shader – در Fragment Shader، ما به سادگی رنگ قطعه را به متغیر gl_FragColor اختصاص دادیم.
1 | var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}'; |
مرحله ۴ – Shader Programs را به Buffer Objects وصل کنید
در این مرحله، Buffer Objects را با Shader Programs مرتبط می کنیم.
مرحله ۵ – طراحی شیء مورد نیاز
ما از روش ()drawArrays برای طزاحی points ها استفاده می کنیم. از آن جا که تعداد نقاطی که می خواهیم برداریم سه تاست، مقدار شمارش ۳ است.
1 | gl.drawArrays(gl.POINTS, 0, 3) |
سه Points با استفاده از WebGL را طراحی نمایید
در اینجا برنامه کامل WebGL برای طراحی سه Points وجود دارد.
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 | <!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.0,0.5,0.0, -0.25,0.25,0.0, ]; // Create an empty buffer object to store the 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); /*=========================Shaders========================*/ // vertex shader source code var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + 'gl_PointSize = 10.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 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 primitive ===============*/ // 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.drawArrays(gl.POINTS, 0, 3); </script> </body> </html> |
متشکریم از همراهیتون. در این قسمت نقاطی را در بوم خود طراحی نمودیم .در ادامه به طراحی یک مثلث در webgl خواهیم پرداخت.