۲۵
اردیبهشت

جلسه ۱۷ : مقیاس گذاری در WebGL

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. در این قسمت نمونه ای برای نشان دادن نحوه تغییر مقیاس یک مثلث با استفاده از WebGL و مراحل مقیاس گذاری در WebGL رو خواهیم داشت. پس با مقیاس گذاری در WebGL ادامه می دهیم.

مقیاس گذاری در WebGL

Scaling یا مقیاس بندی چیزی جز افزایش یا کاهش اندازه یک شی نیست. به عنوان مثال، اگر مثلث دارای رأس اندازه [a، b، c] باشد، مثلث با رأس ها [۲a، ۲b، ۲c] دو برابر اندازه آن خواهد بود. بنابراین، برای مقیاس، شما باید هر رأس را با عامل مقیاس بزرگ کنید. شما همچنین می توانید یک رأس خاص را مقیاس بندی کنید.
برای مقیاس یک مثلث، در شیدر ورتکس برنامه، ما یک ماتریس ایجاد می کنیم و مقادیر مختصات را با این ماتریس ضرب می کنیم. بعدها، ما یک ماتریس مورب ۴ × ۴ را که دارای فاکتور مقیاس گذاری مختصات x، y، z است در موقعیت های مورب (آخرین موقعیت مورب ۱) منتقل می کنیم.

مراحل مقیاس گذاری در WebGL

مراحل زیر برای ایجاد یک برنامه WebGL برای مقیاس یک مثلث ضروری است.
مرحله ۱ – بوم را آماده کرده و WebGL Rendering Context را دریافت کنید.
در این مرحله، WebGL Rendering context با استفاده از ()getContext به دست می آید.
مرحله ۲ – تعریف هندسه-Geometry و ذخیره آن در Buffer Objects
از آنجایی که ما در حال ایجاد یک مثلث هستیم، باید سه رأس مثلث را منتقل کنیم و آن ها را در بافر ها ذخیره کنیم.

مثال :

var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ];

1	var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ];

مرحله ۳ – برنامه های شیدر را ایجاد و کامپایل کنید
در این مرحله، شما نیاز به نوشتن برنامه های شیدر رأس و fragment shader، کامپایل کردن آن ها، و ایجاد یک برنامه ترکیبی با لینک دادن این دو برنامه هستید.
Vertex Shader – در Vertex Shader، ویژگی بردار را برای ذخیره مختصات (coordinates) سه بعدی تعریف می کنیم. در کنار آن ما یک ماتریس uniform برای ذخیره کردن فاکتورهای مقیاس تعریف می کنیم و در نهایت این دو مقدار را چند برابر می کنیم و آن ها را به gl_position اختصاص می دهیم که موقعیت نهایی رأس ها را نگه می دارد.

مثال :

var vertCode =
   'attribute vec4 coordinates;' +
   'uniform mat4 u_xformMatrix;' +
   'void main(void) {' +
      ' gl_Position = u_xformMatrix * coordinates;' +
   '}';

var vertCode =

'attribute vec4 coordinates;' +

'uniform mat4 u_xformMatrix;' +

'void main(void) {' +

' gl_Position = u_xformMatrix * coordinates;' +

'}';

Fragment Shader – در شیدر Fragment ، ما به سادگی fragment رنگ را به متغیر gl_FragColor اختصاص دادیم.

مثال :

var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

1	var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

مرحله ۴ – برنامه های شیدر را با Buffer Objects مرتبط کنید
در این مرحله، Buffer Objects را با Shader Programs مرتبط می کنیم.
مرحله ۵ – طراحی شیء مورد نیاز
از آنجا که ما در حال ترسیم با استفاده از indices ها هستیم، ما از روش ()drawArrays استفاده می کنیم. با این روش، تعداد رأس ها / عناصر را باید در نظر گرفت. از آن جایی که ما در حال ایجاد یک مثلث هستیم، ما ۳ را به عنوان یک پارامتر انتقال خواهیم داد.

مثال :

gl.drawArrays(gl.TRIANGLES, 0, 3);

1	gl.drawArrays(gl.TRIANGLES, 0, 3);

مثال – مقیاس یک مثلث

مثال زیر نشان می دهد که چگونه می توان یک مثلث را مقیاس گذاری کرد .

مثال :

<!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,   
         ];

         //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);  

         /*========================Shaders============================*/

         //Vertex shader source code
         var vertCode =
            'attribute vec4 coordinates;' + 
            'uniform mat4 u_xformMatrix;' +
            'void main(void) {' +
               '  gl_Position = u_xformMatrix * coordinates;' +
            '}';

         //Create a vertex shader program object and compile it                
         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.compileShader(vertShader);

         //fragment shader source code
         var fragCode =
            'void main(void) {' +
               '   gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
            '}';

         //Create a fragment shader program object and compile it 
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(fragShader);

         //Create and use combiened shader program
         var shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertShader);
         gl.attachShader(shaderProgram, fragShader);
         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram); 

         /*===================scaling==========================*/

         var Sx = 1.0, Sy = 1.5, Sz = 1.0;
         var xformMatrix = new Float32Array([
            Sx,   0.0,  0.0,  0.0,
            0.0,  Sy,   0.0,  0.0,
            0.0,  0.0,  Sz,   0.0,
            0.0,  0.0,  0.0,  1.0  
         ]);

         var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix');
         gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

         /* ===========Associating shaders to buffer objects============*/
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);   

         var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates"); 
         gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);  
         gl.enableVertexAttribArray(coordinatesVar);

         /*=================Drawing the Quad========================*/ 
         gl.clearColor(0.5, 0.5, 0.5, 0.9);
         gl.enable(gl.DEPTH_TEST);

         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.viewport(0,0,canvas.width,canvas.height);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      </script>
   </body>
</html>

<!doctype html>

<html>

<body>

/*=================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,

];

//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);

/*========================Shaders============================*/

//Vertex shader source code

var vertCode =

'attribute vec4 coordinates;' +

'uniform mat4 u_xformMatrix;' +

'void main(void) {' +

' gl_Position = u_xformMatrix * coordinates;' +

'}';

//Create a vertex shader program object and compile it

var vertShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertShader, vertCode);

gl.compileShader(vertShader);

//fragment shader source code

var fragCode =

'void main(void) {' +

' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +

'}';

//Create a fragment shader program object and compile it

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragShader, fragCode);

gl.compileShader(fragShader);

//Create and use combiened shader program

var shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertShader);

gl.attachShader(shaderProgram, fragShader);

gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

/*===================scaling==========================*/

var Sx = 1.0, Sy = 1.5, Sz = 1.0;

var xformMatrix = new Float32Array([

Sx, 0.0, 0.0, 0.0,

0.0, Sy, 0.0, 0.0,

0.0, 0.0, Sz, 0.0,

0.0, 0.0, 0.0, 1.0

]);

var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix');

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

/* ===========Associating shaders to buffer objects============*/

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates");

gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(coordinatesVar);

/*=================Drawing the Quad========================*/

gl.clearColor(0.5, 0.5, 0.5, 0.9);

gl.enable(gl.DEPTH_TEST);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.viewport(0,0,canvas.width,canvas.height);

gl.drawArrays(gl.TRIANGLES, 0, 3);

</script>

</body>

</html>

کلام پایانی

در این قسمت نمونه ای برای نشان دادن نحوه تغییر مقیاس یک مثلث با استفاده از WebGL و مراحل مقیاس گذاری در WebGL رو بیان نمودیم .

به اشتراک بگذارید

آموزش WebGL ,مقیاس در WebGL ,نحوه تغییر مقیاس یک مثلث با استفاده از WebGL

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۷ : مقیاس گذاری در WebGL

مقدمه

مقیاس گذاری در WebGL

مراحل مقیاس گذاری در WebGL

مثال – مقیاس یک مثلث

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ