سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. ما تا این جا مبانی WebGL و WebGL pipeline را مورد بررسی قرار داده ایم (یک رویه دنباله دار برای ارائه برنامه های گرافیکی). در این قسمت، نمونه برنامه WebGL برای ایجاد یک مثلث رو می بینیم و ساختار برنامه WebGL رو خواهیم داشت.
کد برنامه WebGL ترکیبی از JavaScript و OpenGL Shader Language است.
جاوا اسکریپت برای برقراری ارتباط با CPU لازم است
OpenGL Shader Language برای ارتباط با GPU مورد نیاز است.
اجازه دهید یک مثال ساده برای یادگیری نحوه استفاده از 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 | <!doctype html> <html> <body> <canvas width = "300" height = "300" id = "my_Canvas"></canvas> <script> /* Step1: Prepare the canvas and get WebGL context */ var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('experimental-webgl'); /* Step2: Define the geometry and store it in buffer objects */ var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,]; // Create a new buffer object var vertex_buffer = gl.createBuffer(); // Bind an empty array buffer to it gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertices data to the buffer gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind the buffer gl.bindBuffer(gl.ARRAY_BUFFER, null); /* Step3: Create and compile Shader programs */ // Vertex shader source code var vertCode = 'attribute vec2 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 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 fragment shader gl.compileShader(fragShader); // Create a shader program object to store 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); /* Step 4: Associate the shader programs 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, 2, gl.FLOAT, false, 0, 0); //Enable the attribute gl.enableVertexAttribArray(coord); /* Step5: Drawing the required object (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 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.TRIANGLES, 0, 3); </script> </body> </html> |
اگر به برنامه فوق دقت کرده باشید، ما پنج مرحله متوالی را برای رسم یک مثلث ساده با استفاده از WebGL دنبال کردیم. مراحل به صورت زیر است.
مرحله ۱ – canvas یا بوم را آماده کنید و context را برای رندر WebGL دریافت کنید.
ما شی فعلی HTML را می گیریم و ساختار WebGL را ارائه می دهیم.
مرحله ۲ – تعیین هندسه و ذخیره آن در buffer objects
ما ویژگی های هندسه مانند رأس، شاخص ها، رنگ، و غیره را تعریف می کنیم و آن ها را در آرایه های جاوااسکریپت ذخیره می کنیم. سپس، ما یک یا چند buffer objects ایجاد می کنیم و آرایه ها حاوی داده ها را به buffer objects مربوطه منتقل می کنیم. در مثال، ما ورتکس های مثلث را در آرایه جاوا اسکریپت ذخیره می کنیم و این آرایه را به یک vertex buffer object منتقل می کنیم.
مرحله ۳ – برنامه های شیدر را ایجاد و کامپایل کنید.
ما برنامه های شیدر vertex و fragment shader را می نویسیم، آنها را کامپایل می کنیم و با پیوند دادن این دو برنامه یک برنامه ترکیبی ایجاد می کنیم.
مرحله ۴ – برنامه های شیدر با buffer objects را مرتبط کنید.
ما buffer objects و ترکیب برنامه شیدر را مرتبط می کنیم.
مرحله ۵ – طراحی شیء مورد نیاز (مثلث)
این مرحله شامل عملیات هایی مانند پاک کردن رنگ، پاک کردن بافر کمی، فعال کردن تست عمق، تنظیم پورت نمایش و غیره است و در نهایت، شما باید ابتداهای مورد نیاز را با استفاده از یکی از روش های ()drawArrays یا ()drawElements بکشید.
در این قسمت مثالی برای آشنایی بیش تر داشتیم و ساختار برنامه WebGL رو بهتر مورد بررسی قرار دادیم.