سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. دز قسمت های قبل رسم مثلث و چهار ضلعی را به کمک مثلث بیان نمودیم .در این بخش قصد داریم رنگ ها در WebGL و مراحل اعمال رنگ در webgl رو توضیح دهیم.
در تمام نمونه های قبلی ما مقدار رنگ متغیر را به متغیر gl_FragColor اعمال کردیم. علاوه بر این، ما می توانیم رنگ ها را برای هر رأس تعریف کنیم.
درست مثل مختصات رأس و شاخص های. این فصل نمونه ای برای نشان دادن چگونگی اعمال رنگ به چهار ضلعی با استفاده از WebGL می باشد.
برای اعمال رنگ ها، شما باید رنگ ها را برای هر رأس با استفاده از مقادیر RGB تعریف کنید.
شما می توانید همان مقادیر را به تمام رأس ها اختصاص دهید تا یک رنگ منحصر به فرد به شی داشته باشید.
پس از تعریف رنگ،
شما باید یک بافر ایجاد کنید و این مقادیر را در آن ذخیره کنید و آن را با ویژگی های شیدر رأس مرتبط کنید.
در شیدر رأس، همراه با مختصات attribute (که موقعیت رأس ها را نگه می دارد)، attribute و var را تعریف می کنیم.
خصوصیت color مقدار رنگ را در هر vertex نگه می دارد و varying متغیری است که به عنوان ورودی به شیدر fragment منتقل می شود.
بنابراین، ما باید مقدار رنگ را به متغیر اختصاص دهیم.
در قسمت شیدر fragment که varying مقدار رنگ اختصاصی به gl_FragColor را نگه می دارد، که رنگ نهایی شیء را نگه می دارد.
مراحل زیر مورد نیاز برای ایجاد یک برنامه WebGL برای طراحی چهار ضلعی و اعمال رنگ به آن است.
مرحله ۱–
بوم را آماده کنید و WebGL Rendering Context را بگیرید
در این مرحله ، محتوای رندر WebGL را با استفاده از ()getContext به دست می آوریم.
مرحله ۲–
تعریف Geometry و ذخیره آن در Buffer Objects
مربع را می توان با استفاده از دو مثلث کشید. بنابراین ،
در این مثالی که ما ارائه می دهیم رئوس را برای دو مثلث (با یک لبه مشترک) و indices را بیان نموده ایم.
از آنجا که ما می خواهیم رنگ را به آن اپلای کنیم،
متغیر نگه داشتن مقادیر رنگ نیز تعریف شده و مقادیر رنگ برای هر یک (قرمز ، آبی ، سبز ، و صورتی) به آن اختصاص داده شده است.
1 2 3 4 5 6 7 8 9 | 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 ]; var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,]; indices = [3,2,1,3,1,0]<strong>; </strong> |
گام ۳ − ایجاد و کامپایل برنامه های شیدر در این مرحله,
شما نیاز به نوشتن برنامه شیدر راس و شیدر shader , کامپایل آن ها, و ایجاد یک برنامه ترکیبی با اتصال این دو برنامه دارید.
Vertex Shader –
در Vertex Shader برنامه ،ما تعریف ویژگی های بردار-vector attributes برای ذخیره مختصات ۳D (موقعیت) ، و رنگ هر رأس را داریم. متغیر varing اعلام شده است
برای انتقال شیدر راس به شیدر قطعه یا fragment . و در نهایت ، مقدار ذخیره شده در color attribute به varyingاختصاص داده شده است.
1 2 3 4 5 6 7 8 | var vertCode = 'attribute vec3 coordinates;'+ 'attribute vec3 color;'+ 'varying vec3 vColor;'+ 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + 'vColor = color;'+ '}'; |
Fragment Shader-در Fragment Shader ، ما varying را به متغیر gl_FragColor اختصاص داده ایم.
1 2 3 4 5 | var fragCode = 'precision mediump float;'+ 'varying vec3 vColor;'+ 'void main(void) {'+ 'gl_FragColor = vec4(vColor, 1.);'+ '}'; |
گام ۴ −
برنامه های شیدر را با اشیاء بافر مرتبط کنید
در این مرحله ، ما Shader Programs و Buffer Objects را با هم مرتبط می کنیم.
مرحله ۵–
طراحی شئ مورد نیاز
از آن جا که ما در حال طراحی دو مثلث برای چهار ضلعی هستیم، با استفاده از indices، ما از روش ()drawElements استفاده می کنیم.
برای این روش ، ما باید تعدادی indices زا منتقل کنیم. مقدار indices.length نشان دهنده تعداد شاخص ها است.
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 132 133 134 135 136 137 138 139 140 141 | <!doctype html> <html> <body> <canvas width = "300" height = "300" 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 ]; var colors = [0,0,1, 1,0,0, 0,1,0, 1,0,1,]; indices = [3,2,1,3,1,0]; // Create an empty buffer object and store vertex data var vertex_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); // Create an empty buffer object and store Index data var Index_Buffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // Create an empty buffer object and store color data var color_buffer = gl.createBuffer (); gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); /*======================= Shaders =======================*/ // vertex shader source code var vertCode = 'attribute vec3 coordinates;'+ 'attribute vec3 color;'+ 'varying vec3 vColor;'+ 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + 'vColor = color;'+ '}'; // 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 = 'precision mediump float;'+ 'varying vec3 vColor;'+ 'void main(void) {'+ 'gl_FragColor = vec4(vColor, 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); // bind the color buffer gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); // get the attribute location var color = gl.getAttribLocation(shaderProgram, "color"); // point attribute to the volor buffer object gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; // enable the color attribute gl.enableVertexAttribArray(color); /*============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 رو همراه مثال بیان نمودیم.
در ادامه به Translation در webgl می پردازیم.