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 را در سال ۲۰۰۹ انتشار داد.
فعال کردن WebGL در Chrome و فعال کردن WebGL در Firefox و نصب درایور کارت گرافیک و آپدیت کردن آن، کتابخانه‌ی گرافیکی وب یا WebGL، یک واسط برنامه‌نویسی جاوااسکریپت است که برای ساخت گرافیک ۲ بعدی یا ۳ بعدی در طراحی وب کاربرد دارد. WebGL در مرورگرهای امروزی به خوبی پشتیبانی می‌شود و بدون افزونه‌ی...
سلام درود خدمت همراهان همیشگی سایت پی وی لرن . WebGL چیست؟ Web GL یک تکنولوژی تعبیه شده در مرورگرهای جدید است و می‌توان بدون نیاز به هیچ افزونه یا کتابخانه ی خاصی آن را در مرورگر مشاهده نمود. این تکنولوژی Client Side بوده و بر روی مرورگر کاربر اجرا می شود. در ادامه بیش تر به معرفی WebGL خواهیم...
برنامه های WebGL در جاوا اسکریپت نوشته می شوند. با استفاده از این برنامه ها می توانید به طور مستقیم با دیگر عناصر سند HTML ارتباط برقرار کنید. همچنین می توانید از دیگر کتابخانه های جاوا اسکریپت (مانند جی کوئری) و تکنولوژی های HTML برای غنی سازی برنامه WebGL استفاده کنید.
افزایش پشتیبانی با مرورگرهای موبایل
WebGL همچنین از مرورگرهای موبایل مانند Safari iOS، مرورگر Android و Chrome for Android پشتیبانی می کند.
منبع باز
WebGL منبع باز است. شما می توانید به کد منبع کتابخانه دسترسی پیدا کنید و بدانید که چگونه کار می کند و چگونه توسعه یافته است.
بدون نیاز به تدوین
جاوا اسکریپت نیمی از برنامه نویسی و نیمی از اجزای HTML را دربردارد. برای اجرای این اسکریپت نیازی به کامپایل فایل نیست. در عوض، شما می توانید به طور مستقیم با استفاده از هر مرورگر فایل را باز کنید و نتیجه را بررسی کنید. از آنجا که برنامه های WebGL با استفاده از جاوا اسکریپت توسعه می یابند، نیازی به کامپایل برنامه های WebGL نیز نیست.
مدیریت حافظه خودکار
جاوا اسکریپت از مدیریت حافظه خودکار پشتیبانی می کند. نیازی به ذخیره دستی حافظه لازم نیست. WebGL این ویژگی جاوا اسکریپت را به ارث می برد.
راه اندازی آسان
از آنجا که WebGL در HTML 5 یکپارچه شده است، نیازی به تنظیم اضافی نیست. برای نوشتن یک برنامه WebGL، تمام آنچه که شما نیاز دارید یک ویرایشگر متن و یک مرورگر وب است.
معرفی WebGL WebGL (کتابخانه وب گرافیک) استاندارد جدیدی برای گرافیک 3D در وب است، برای طراحی گرافیک 2D و گرافیک 3D تعاملی طراحی شده است. WebGL از کتابخانه OpenGL ES 2.0 مشتق شده است که یک API 3D سطح پایین برای گوشی ها و سایر دستگاه های تلفن همراه است. WebGL قابلیت های مشابهی از ES 2.0 (Embedded
WebGL - Sample Application - We have discussed the basics of WebGL and the WebGL pipeline (a procedure followed to render Graphics applications). In this chapter, we are going to take a sample application to create a triangle using WebGL and observe the steps followed in the application.
www.tutorialspoint.com
همان طور که در شکل بالا مشخص است می خواهد ساختار 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 را افزایش داده‌اند. یک نمونه از کاربردهای غیرگرافیکی پردازنده گرافیکی، تولید بیت‌کوین است، که برای حل معماها از یک واحد پردازش گرافیکی استفاده می‌گردد.
با این وجود با اینکه WebGL برای طراحی های گرافیکی بسیار مناسب است، اما مواردی وجود دارد که استفاده از تکنولوژی های دیگر (مانند SVG) گزینه بهتری است. به موارد ذیل دقت کنید :
۱. اپلیکیشن ها و بازی های ۲ بعدی ساده. مطمئنا می توانید با استفاده از WebGL به طراحی های ۲ بعدی هم بپردازید، اما استفاده از Canvas شاید گزینه بهتری باشد زیرا پشتیبانی بهتری از آن می شود و Library های ۲ بعدی زیادی نیز مختص آن وجود دارد.
۲. جستجو : در حال حاضر محتوای WebGL توسط موتور های جستجو قابل فهم نیست بنابراین استفاده از SVG انتخاب بهتری است.
۳. ترکیب پذیری با DOM : می توان WebGL را در تمامی صفحات وب قرار داد اما هیچ روشی برای اضافه کردن Handler ها مشابه SVG ندارد.
۴. مرورگرهای قدیمی : WebGL برای کاربرانی که مرورگرهای قدیمی و سیستم های ضعیفی دارند مناسب نیست.
۵. محیط های بسیار امن : WebGL نیز دارای ضعف های امنیتی است. بیشتر ضعف های امنیتی WebGL تاکنون برطرف شده اند ولی در محیط هایی که نیاز به امنیت بسیار بالایی دارند استفاده از آن توصیه نمی شود.
WebGL - Sample Application - We have discussed the basics of WebGL and the WebGL pipeline (a procedure followed to render Graphics applications). In this chapter, we are going to take a sample application to create a triangle using WebGL and observe the steps followed in the application.
www.tutorialspoint.com
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>
کد بالا را در ادیتور خود درج کنید و در هارد سیو کنید.
نتیجه اجرا:
این سایت اشکال دیگر هم کار کرده.
برای شروع کار با WebGL پیشنهاد می کنم با Library های آماده شروع کنید. در حال حاضر دو Library برجسته WebGL به نام های Three.js و Babylon.js هستند که می توانید در قدم اول از آنها استفاده کنید.
WebGL به صورت پیشفرض دارای امکانات کمی است و بعید به نظر می‌رسد که در چنین حالتی شما از آن استفاده کنید. بنابراین بسیاری از موتورهای بازی‌سازی و کتابخانههای مختلف به وجود آمده‌اند که کارایی این مورد را بالاتر برده‌اند و استفاده‌پذیری آن را بیشتر ساخته‌اند.
در این مطلب قصد دارم به شما شیوه ساخت یک وبسایت یا اپلیکیشن را با استفاده از WebGL و three.js که یک کتابخانه متن باز است و مفهوم اولیه WebGL را برای‌مان پیاده‌سازی می‌کند، را آموزش دهم.......
WebGL امکانی است که در اکثر مرورگرهای وب پشتیبانی می‌شود و شما را قادر می‌سازد که از طریق جاوااسکریپت با المان‌های سه‌بعدی کار کنید. این کار موجب می‌شود که در اپلیکیشن‌ها و بازی‌های مبتنی بر مرورگر امکانات بسیار زیادی را دریافت کنند
roocket.ir
سالک: در سایت بالا گفته webgl امکانات کمی دارد و بعید است شما از آن استفاده کنید.....
سالک: نمی دونم درسته یا نه ، فقط برای مطرح کردن نوشتم...
در این بخش از مطلب «WebGL چیست» فهرست‌هایی از فریم‌ورک‌ها و کتابخانههای WebGL ارائه شده است. این فهرست‌ها تنها جهت آموزش و کسب اطلاعات فراهم شده‌اند، چرا که برخی از این کتابخانه‌ها قدیمی شده و دیگر از آنها پشتیبانی نمی‌شود. در ادامه، برخی از کتابخانه‌ها و موتورهای پردازشی WebGL فهرست شده‌اند.
کتابخانه ها و موتورهای پردازشی WebGL
در این بخش از مطلب «WebGL چیست»، کتابخانه ها و موتورهای پردازشی WebGL فهرست شده‌اند:
Three.js: کتابخانه سه‌بعدی جاوا
stack.gl: یک محیط نرم‌افزاری متن‌باز برای WebGL است که بر اساس Browserify و npm ساخته شده است.
PixiJS: موتور پردازش دوبُعدی فوق‌سریع HTML5 که از WebGL به همراه Canvas رزرو شده استفاده می‌کند.
Pex: یک کتابخانه/موتور سه‌بعدی جاوا اسکریپت که امکان توسعه بی‌دردسر بین فلسک و WebGL را در مرورگر فراهم می‌کند.
Babylon.js: یک فریم‌ورک کامل جاوا اسکریپت برای ساخت بازی‌های سه‌بعدی با HTML5 و WebGL
Filament: یک موتور رندرینگ زمان واقعی مبتنی بر اصول فیزیکی برای اندروید، iOS، ویندوز، لینوکس، مک OS و WASM/WebGL است.
ClayGL: یک کتابخانه گرافیکی WebGL که به ساخت اپلیکیشن‌های Web3D کمک می‌کند.
it-planet.ir
www.aparat.com
pvlearn.com
git.ir
www.tutorialspoint.com
iranhost.com
iranhost.com
roocket.ir
blog.faradars.org
Top 10 Best Free AI Song Generators for Music Creation
