opengl در مجیدآنلاین

شروع موضوع توسط saalek110 ‏4 سپتامبر 2019 در انجمن منطق و الگوریتم برنامه‌نویسی

کلمات کلیدی:
  1. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    آخرین ویرایش: ‏7 سپتامبر 2019
    نوشته شده توسط saalek110 در ‏7 سپتامبر 2019
  2. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    مزیت های WebGL

    برنامه جاوا اسکریپت

    برنامه های WebGL در جاوا اسکریپت نوشته می شوند. با استفاده از این برنامه ها می توانید به طور مستقیم با دیگر عناصر سند HTML ارتباط برقرار کنید. همچنین می توانید از دیگر کتابخانه های جاوا اسکریپت (مانند جی کوئری) و تکنولوژی های HTML برای غنی سازی برنامه WebGL استفاده کنید.

    افزایش پشتیبانی با مرورگرهای موبایل

    WebGL همچنین از مرورگرهای موبایل مانند Safari iOS، مرورگر Android و Chrome for Android پشتیبانی می کند.

    منبع باز

    WebGL منبع باز است. شما می توانید به کد منبع کتابخانه دسترسی پیدا کنید و بدانید که چگونه کار می کند و چگونه توسعه یافته است.

    بدون نیاز به تدوین

    جاوا اسکریپت نیمی از برنامه نویسی و نیمی از اجزای HTML را دربردارد. برای اجرای این اسکریپت نیازی به کامپایل فایل نیست. در عوض، شما می توانید به طور مستقیم با استفاده از هر مرورگر فایل را باز کنید و نتیجه را بررسی کنید. از آنجا که برنامه های WebGL با استفاده از جاوا اسکریپت توسعه می یابند، نیازی به کامپایل برنامه های WebGL نیز نیست.

    مدیریت حافظه خودکار

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

    راه اندازی آسان

    از آنجا که WebGL در HTML 5 یکپارچه شده است، نیازی به تنظیم اضافی نیست. برای نوشتن یک برنامه WebGL، تمام آنچه که شما نیاز دارید یک ویرایشگر متن و یک مرورگر وب است.

    منبع
     
    نوشته شده توسط saalek110 در ‏7 سپتامبر 2019
  3. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    نوشته شده توسط saalek110 در ‏7 سپتامبر 2019
  4. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    نوشته شده توسط saalek110 در ‏7 سپتامبر 2019
  5. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
  6. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    نوشتن اولین برنامه webgl:
    منبع
    HTML:
    <!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>
    کد بالا را در ادیتور خود درج کنید و در هارد سیو کنید.
    نتیجه اجرا:
    c1.jpg
    این سایت اشکال دیگر هم کار کرده.
     
    آخرین ویرایش: ‏7 سپتامبر 2019
    نوشته شده توسط saalek110 در ‏7 سپتامبر 2019
  7. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    منبع
    a4.jpg
    همان طور که در شکل بالا مشخص است می خواهد ساختار webgl را توضیح دهد. کدهای جاوا اسکریپت را cpu اجرا می کند. ولی قسمت گرافیکی نیاز به Gpu دارد.


    GPU
    در واقع واحد پردازش گرافیکی همانند واحد پردازش مرکزی (به انگلیسی: Central Processing Unit) در کامپیوتر است ولی وظیفه اصلی آن پردازش اطلاعات مرتبط با تصاویر است. یک GPU معمولاً بر روی کارت‌های گرافیکی قرار می‌گیرد، اگرچه کارت‌های گرافیکی غیر حرفه‌ای مستقیماً بر روی بُرد مادر به صورت (OnBoard) قرار می‌گیرند. GPU ابزاری است شامل تعدادی عملگر ابتدایی گرافیکی، که باعث می‌شود نسبت به CPU در خلق تصاویر بر صفحه نمایشگر بسیار سریعتر عمل کنند.
    واحد پردازش گرافیکی - ویکی‌پدیا، دانشنامهٔ آزاد

    رایج‌ترین عملگرها برای گرافیک دو بعدی کامپیوترها شامل عملگر بیت بلیت است که معمولاً در سخت‌افزارهای مخصوص یک "Biltter" نامیده می‌شود. این عملگرها برای کشیدن مستطیل، مثلث، دایره و قوس بکار می‌روند. پردازنده‌های گرافیکی جدید، پردازش گرافیک سه بعدی را نیز در رایانه‌ها انجام می‌دهند.

    کمپانی‌های تولیدکننده GPU
    کمپانی‌های بسیاری در زمینه تولید GPU فعالند. در سال ۲۰۰۸، اینتل، انویدیا و AMD/ATI به ترتیب با ۴۹.۵٪ و ۲۷.۸٪ و ۲۰.۶٪ از سهم بازار در صدر تولیدکنندگان GPU بودند. البته در این آمار، پردازنده‌های گرافیکی مجتمع با CPU اینتل نیز محاسبه شده‌اند. اگر آن‌ها را در نظر نگیریم، انویدیا و ATI تقریباً کل بازار را در اختیار دارند. دو شرکت کوچکتر S3 Graphics و Matrox نیز به تولید GPU می‌پردازند.

    توابع محاسباتی
    پردازنده‌های گرافیکی مدرن از بیشتر قدرت خود برای محاسبات مربوط به گرافیک سه‌بعدی در کامپیوتر بهره می‌برند. پیشرفت‌های اخیر در GPUها باعث شده تا بتوانند از سایه‌زن‌های قابل‌برنامه‌ریزی بهره گیرند. بدین ترتیب با استفاده از این ویژگی می‌توان تصاویر را در سطح هندسی و بافت دستکاری نمود. از آنجا که بیشتر این محاسبات نیاز به محاسبات ماتریسی و برداری دارند، مهندسین و دانشمندان مطالعات خود بر روی کاربردهای غیرگرافیکی GPU را افزایش داده‌اند. یک نمونه از کاربردهای غیرگرافیکی پردازنده گرافیکی، تولید بیت‌کوین است، که برای حل معماها از یک واحد پردازش گرافیکی استفاده می‌گردد.
     
    آخرین ویرایش: ‏22 سپتامبر 2019
    نوشته شده توسط saalek110 در ‏22 سپتامبر 2019
  8. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    webgl چیست؟
    WebGL به زبان ساده، تکنولوژی‌ برای کشیدن، به نمایش در آرودن و تعامل سطح بالا و پیشرفته با گرافیک سه‌بعدی کامپیوتری از طریق مرورگرهای وب است. پیش از این، گرافیک سه‌بعدی تنها محدود به کامپیوترهای سطح بالا و قوی یا کنسول‌های بازی بود و نیاز به برنامه‌نویسی پیچیده‌ای داشت. اما امروزه با پیشرفته‌تر شدن کامپیوتر‌های شخصی و web browser ها، نمایش گرافیک سه‌بعدی از طریق تکنولوژی‌های مدرن و شناخته‌شده‌ی وب، امکان‌پذیر شده است.
    WebGL هنگامی که با HTML5 و javaScript ترکیب می‌شود، گرافیک سه‌بعدی را از طریق web browser به کاربر نمایش می‌دهد. این تکنولوژی بدون شک نقش بسیار مهمی را user interface های نسل بعدی وب بازی خواهد کرد و طی سال‌های آینده می‌توان انتظار داشت که بیشتر از این تکنولوژی در وسایل الکترونیکی از جمله تلفن‌های هوشمند، تبلت‌ها و کامپیوترها (و در کل وسایلی که از web browser استفاده می‌کنند) به منظور به‌کار بردن گرافیک سه‌بعدی و بازی‌سازی استفاده شود.
    منبع

    مشخصات WebGL بر اساس OpenGL است که سال‌هاست به‌طور گسترده در گرافیک، بازی‌های کامپیوتری و CAD applications استفاده می‌شود. در یک جمله می‌توان گفت که ” WebGL همان OpenGL تحت وب است” و از آن‌جا که OpenGL حدود بیست سال در تولید برنامه‌های مختلف استفاده شده، می‌توانید منابع و کتاب‌های بسیاری را در این مورد پیدا کنید که به درک بهتر WebGL کمک می‌کند.

    اکنون گروه Khronos مسئول تکامل بخشیدن و استاندارد کردن OpenGL است. این گروه در سال ۲۰۰۹ گروه کاری WebGL را راه انداخت و شروع به استاندارد کردن و توسعه دادن WebGL براساس OpenGL ES 2.0 کرد و اولین نسخه‌ی WebGL را در سال ۲۰۰۹ انتشار داد.
     
    نوشته شده توسط saalek110 در ‏22 سپتامبر 2019
    the_king از این پست تشکر کرده است.
  9. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    مواردی که Web GL برای آنها مناسب نیست

    با این وجود با اینکه WebGL برای طراحی های گرافیکی بسیار مناسب است، اما مواردی وجود دارد که استفاده از تکنولوژی های دیگر (مانند SVG) گزینه بهتری است. به موارد ذیل دقت کنید :

    ۱. اپلیکیشن ها و بازی های ۲ بعدی ساده. مطمئنا می توانید با استفاده از WebGL به طراحی های ۲ بعدی هم بپردازید، اما استفاده از Canvas شاید گزینه بهتری باشد زیرا پشتیبانی بهتری از آن می شود و Library های ۲ بعدی زیادی نیز مختص آن وجود دارد.

    ۲. جستجو : در حال حاضر محتوای WebGL توسط موتور های جستجو قابل فهم نیست بنابراین استفاده از SVG انتخاب بهتری است.

    ۳. ترکیب پذیری با DOM : می توان WebGL را در تمامی صفحات وب قرار داد اما هیچ روشی برای اضافه کردن Handler ها مشابه SVG ندارد.

    ۴. مرورگرهای قدیمی : WebGL برای کاربرانی که مرورگرهای قدیمی و سیستم های ضعیفی دارند مناسب نیست.

    ۵. محیط های بسیار امن : WebGL نیز دارای ضعف های امنیتی است. بیشتر ضعف های امنیتی WebGL تاکنون برطرف شده اند ولی در محیط هایی که نیاز به امنیت بسیار بالایی دارند استفاده از آن توصیه نمی شود.

    منبع
     
    نوشته شده توسط saalek110 در ‏22 سپتامبر 2019
    the_king از این پست تشکر کرده است.
  10. saalek110

    saalek110 Well-Known Member

    ارسال‌ها:
    2,765
    تشکر شده:
    1,382
    امتیاز دستاورد:
    113
    برای شروع کار با WebGL پیشنهاد می کنم با Library های آماده شروع کنید. در حال حاضر دو Library برجسته WebGL به نام های Three.js و Babylon.js هستند که می توانید در قدم اول از آنها استفاده کنید.

    منبع
     
    نوشته شده توسط saalek110 در ‏22 سپتامبر 2019

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