۲۵
اردیبهشت

جلسه ۱۶ : انتقال در WebGL

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

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

فهرست

مقدمه

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

انتقال در WebGL

انتقال در WebGL یکی از تحولات وابسته ارائه شده توسط WebGL است. با استفاده از انتقال می توانیم یک مثلث را(هر شیء) در فضای xyz حرکت دهیم. فرض کنید ما یک مثلث [a، b، c] داریم

و می خواهیم مثلث را به موقعیتی که ۵ واحد به طرف محور مثبت X و ۳ واحد به طرف مثبت Y محور است حرکت دهیم. سپس رئوس جدید [A + 5، B + C + 3 0] خواهد بود .

این بدان معناست که حرکت مثلث، نیاز به اضافه کردن فواصل حرکت داریم که، TX، TY، TZ در هر راس می گویند.
از آن جا که این، یک عملیات در هر vertex یا راس آن است، ما می توانیم آن را در برنامه شیدر vertex ادامه دهیم.
در شیدر vertex همراه با ویژگی که حاوی موقعیت های رأس است، یک متغیر یکنواخت که فاصله های انتقال (x، y، z) را نگه می دارد تعریف می کنیم.

بعدها، ما این متغیر را به مختصات متغیر اضافه می کنیم و نتیجه را به متغیر gl_Position اختصاص می دهیم.
توجه داشته باشید – از آنجا که شیدر ورتکس در هر رأس اجرا می شود، تمام رأس های مثلث انتقال داده می شود.

مراحل انتقال یک مثلث در webgl

مراحل زیر برای ایجاد یک برنامه WebGL برای ساخت یک مثلث لازم است و سپس آن را به یک موقعیت جدید منتقل کنید.
مرحله ۱ – بوم یا Canvas را آماده کرده و WebGL Rendering Context را دریافت کنید
در این مرحله، WebGL Rendering context object را با استفاده از 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 – در سایه ورتکس شیدر برنامه، ویژگی بردار- vector attribute را تعریف می کنیم. در کنار آن یک متغیر را برای ذخیره فاصله های انتقال تعریف می کنیم و در نهایت،

این دو مقدار را اضافه می کنیم و آن را به موقعیتی که موقعیت نهایی رأس ها را نگه می دارد، اختصاص می دهیم.

مثال :

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

var vertCode =

'attribute vec4 coordinates;' +

'uniform vec4 translation;'+

'void main(void) {' +

' gl_Position = coordinates + translation;' +

'}';

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

از آن جایی که ما در حال ایجاد یک مثلث هستیم، ما ۳ را به عنوان یک پارامتر انتقال خواهیم داد.

مثال :

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

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

مثال – حرکت یک مثلث در WebGL

مثال زیر نشان می دهد که چگونه یک مثلث را روی فضای xyz منتقل کنید. پس کدهای مربوط به حرکت یک مثلث در WebGL رو می بینیم.

مثال :

 Live Demo
<!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(); 
			
         //Create a new buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);   
			
         //bind it to the current buffer			
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
			
         // Pass the buffer data
         gl.bindBuffer(gl.ARRAY_BUFFER, null);  
            
         /*========================Shaders============================*/
            
         //vertex shader source code 
         var vertCode =
            'attribute vec4 coordinates;' + 
            'uniform vec4 translation;'+
            'void main(void) {' +
               '  gl_Position = coordinates + translation;' +
            '}';
            
         //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);
   
         /* ===========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); 
   
         /* ==========translation======================================*/
         var Tx = 0.5, Ty = 0.5, Tz = 0.0;
         var translation = gl.getUniformLocation(shaderProgram, 'translation');
         gl.uniform4f(translation, Tx, Ty, Tz, 0.0);
 
         /*=================Drawing the riangle and transforming it========================*/ 

         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>

Live Demo

<!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();

//Create a new buffer

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

//bind it to the current buffer

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Pass the buffer data

gl.bindBuffer(gl.ARRAY_BUFFER, null);

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

//vertex shader source code

var vertCode =

'attribute vec4 coordinates;' +

'uniform vec4 translation;'+

'void main(void) {' +

' gl_Position = coordinates + translation;' +

'}';

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

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

/* ==========translation======================================*/

var Tx = 0.5, Ty = 0.5, Tz = 0.0;

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

gl.uniform4f(translation, Tx, Ty, Tz, 0.0);

/*=================Drawing the riangle and transforming it========================*/

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 ,مراحل انتقال یک مثلث در webgl

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

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

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

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

جلسه ۱۶ : انتقال در WebGL

مقدمه

انتقال در WebGL

مراحل انتقال یک مثلث در webgl

مثال – حرکت یک مثلث در WebGL

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ