Awesome GitHub RepositoriesWebGL Rendering

Cesium is a JavaScript library designed for rendering high-precision 3D globes and 2D maps within web browsers. It functions as a visualization engine that leverages hardware-accelerated graphics to display complex geographic data, terrain, and imagery. The library distinguishes itself through a modular architecture that supports the streaming of massive geographic datasets. By employing tiled data delivery and hierarchical level-of-detail optimization, it maintains performance while navigating large-scale environments. It also includes a time-dynamic state management system, which synchroniz

SandDance is a hardware-accelerated visualization library and web-based data explorer designed for the interactive analysis of large, non-aggregated datasets. It functions as an interactive data visualization tool that renders complex datasets and intricate visuals within a browser. The project provides an embeddable data canvas consisting of web components and tags, allowing for the integration of full visualization interfaces and interactive charts into external web applications. It utilizes WebGL hardware acceleration to efficiently render large volumes of data as interactive graphics. Th

This project is a three-dimensional developer portfolio template and web application. It uses Three.js to render interactive 3D models, animations, and environmental effects directly within the browser to create an immersive professional showcase. The application integrates artificial intelligence to provide automated responses to visitor inquiries and includes a community forum where authenticated users can share knowledge. It also features a system for generating personalized learning roadmaps based on user profile data and an algorithmic content recommendation system to improve post discov

The Book of Shaders is an interactive educational guide and curriculum for learning GLSL fragment shader programming to create procedural graphics and visual effects. It provides a structured learning path and a categorized reference guide for data types, built-in functions, and mathematical operations used in shader development. The project features a web-based shader sandbox and interactive editor that allows for real-time iteration and visualization of GLSL code. Users can experiment with procedural art and share their results via unique URLs. The curriculum covers a wide range of graphic

Vanta is a browser-based engine and library for rendering real-time, interactive 3D animations and stylized visual effects. It initializes and manages WebGL graphics within the HTML5 Canvas element to create animated digital art and dynamic backgrounds for web pages. The engine focuses on interactivity, mapping mouse and touch inputs to real-time visual changes. It provides configuration tools to adjust visual parameters, such as colors and animation properties, to align with specific branding and aesthetic requirements. The system handles the full animation lifecycle, including GPU renderin

Processing is a creative coding environment and Java graphics library designed for writing visual sketches that produce interactive 2D and 3D graphics and animations. It runs on the Java Virtual Machine, using an OpenGL-based hardware-accelerated rendering pipeline, and operates on a sketch-based execution model where programs run as continuous loops of setup and draw functions with event-driven input handling for keyboard, mouse, and window interactions. The environment distinguishes itself as a cross-platform sketch tool that runs visual programs unchanged on desktop, web, Android, and Rasp

whs.js هو محرك ألعاب ثلاثي الأبعاد WebGL وإطار عمل تطبيقات قابل للتوسيع يُستخدم لإنشاء تجارب ثلاثية الأبعاد تفاعلية وألعاب تعتمد على المتصفح. يوفر طبقة تجريد مبسطة فوق عرض WebGL منخفض المستوى لإدارة الكاميرات والإضاءة والبيئة ثلاثية الأبعاد بشكل عام. يستخدم إطار العمل رسماً بيانياً للمشهد ثلاثي الأبعاد (scene graph) لتنظيم الكائنات في نظام هرمي من المكونات. ويدمج محاكاة فيزيائية متعددة الخيوط باستخدام عمال الويب (web workers) لتشغيل الحسابات بالتوازي مع حلقة العرض الرئيسية. يتضمن النظام بنية إضافات معيارية تسمح بتوسيع منطق التطبيق الأساسي من خلال نظام قابل للتوصيل. كما يتميز بتهيئة تلقائية للمشهد للتعامل مع إعداد العارض والبيئة.

melonJS is a lightweight HTML5 game engine for building 2D games in the browser using JavaScript. It provides a complete framework for sprite animation, tilemap loading, physics simulation, input handling, and audio playback, with a unified rendering system that automatically switches between WebGL and Canvas2D backends without code changes. The engine distinguishes itself through several integrated capabilities. It features a per-sprite shader pipeline for custom fragment shader effects, a SAT-based collision engine with swappable physics adapters (including built-in SAT, Matter.js, and Plan

Hilo is an HTML5 game engine for building 2D games that run across browsers and devices. It renders graphics through Canvas, DOM, or WebGL backends, automatically selecting the best option for the target environment. The engine provides a complete game development solution with sprite, skeletal, and particle animation, along with a texture atlas system for efficient image loading and rendering. The framework distinguishes itself through its integration of the DragonBones skeletal animation engine, which drives bone-based character movement without frame-by-frame sprites, and its Chipmunk phys

MUI X is a collection of advanced React UI components for building data-rich applications, including a data grid, charting library, date and time pickers, scheduler, and tree view. The library is built with accessibility as a core principle, ensuring all components meet WCAG and WAI-ARIA standards for keyboard navigation and screen reader announcements. The components are designed for extensibility and performance. The data grid offers comprehensive data management with sorting, filtering, pagination, column pinning, row grouping, inline editing, and Excel export. The charting library support

Blockbench هو مصمم نماذج ثلاثية الأبعاد منخفض المضلعات ورسام نسيج متخصص مصمم لإنشاء نماذج وأنسجة فن البكسل. يعمل كمحرر ثلاثي الأبعاد قابل للتوسيع يسمح بإنتاج أصول مخصصة لمحركات الألعاب وبرامج العرض. يتميز المحرر ببنيته القائمة على الإضافات، والتي تمكن من تطوير سكربتات مخصصة لأتمتة سير عمل التصميم وإضافة أدوات متخصصة. يدمج أيضاً نظام رسم نسيج يطبق فن البكسل مباشرة على الشبكات ثلاثية الأبعاد لتحقيق جمالية منمقة. يغطي البرنامج عرضاً ثلاثي الأبعاد عالي الجودة للعروض التقديمية الاحترافية ويوفر أدوات لتصدير التصميمات إلى تنسيقات ملفات ثلاثية الأبعاد موحدة.

Cobe هي مكتبة كرات أرضية WebGL مصممة لتصور البيانات الجغرافية ثلاثية الأبعاد التفاعلية. تعمل كمكون خريطة يعتمد على canvas يقوم بعرض خريطة العالم، مما يسمح برسم إحداثيات خطوط الطول والعرض عبر علامات وأقواس متصلة. تتميز المكتبة بربط عناصر HTML القياسية بإحداثيات ثلاثية الأبعاد باستخدام تحديد مرساة CSS. يتيح هذا التكامل إرفاق عناصر DOM، مثل التسميات وتلميحات الأدوات، مباشرة بالعلامات والأقواس على الكرة. يغطي النظام رسم البيانات الجغرافية ورسم خرائط اتصالات الشبكة، باستخدام الدوران الآلي وتفاعلات المستخدم لعرض العلاقات المكانية. يتعامل مع إسقاط الإحداثيات الجغرافية في فضاء ثلاثي الأبعاد واستيفاء المسارات المنحنية بين المواقع العالمية.

gfx هو تجريد لواجهة برمجة تطبيقات رسوميات لا يعتمد على العتاد يترجم مجموعة موحدة من أوامر الرسوميات والحوسبة إلى تعليمات أصلية لبرامج تشغيل GPU متعددة. يوفر واجهة مشتركة للعرض عبر المنصات وبرمجة حوسبة GPU للأغراض العامة. يتميز المشروع بنظام ترجمة تظليل تمثيلي وسيط يحول الكود المصدري وSPIR-V إلى لغات خاصة بالهدف. يستخدم إطار عمل اختبار مرجعي يعتمد على البيانات للتحقق من أن مخرجات الرسوميات تظل متسقة عبر منصات العتاد المختلفة. تشمل القدرات ترميز مخزن الأوامر المتوازي عبر خيوط متعددة وتغليف حالات خط الأنابيب في كائنات مفردة لتقليل تغييرات الحالة الزائدة. يدير النظام موارد GPU منخفضة المستوى، بما في ذلك تخصيص الذاكرة، وتعيين المخزن المؤقت غير المتزامن، وعرض الإطار الصريح عبر swapchains. يستهدف التنفيذ البيئات الأصلية ومتصفحات الويب من خلال WebAssembly، مما يوفر طبقات ترجمة لـ WebGL وWebGL2.

هذا المشروع عبارة عن مجموعة من مكتبات عميل Python ومغلفات API المستخدمة للتفاعل مع خدمات Google Cloud Platform. يعمل كواجهة برمجية لتوفير وتكوين وإدارة البنية التحتية السحابية والموارد. توفر المكتبة مجموعة أدوات متخصصة لـ Google Cloud Storage، مما يتيح تحميل وتنزيل وإدارة كائنات البيانات داخل الحاويات السحابية. كما تدعم تطوير التطبيقات بدون خادم (serverless) وأتمتة إعداد البيئة وتوسيع نطاقها. يتعامل المشروع مع تكامل API السحابي من خلال توفير تجريدات عالية المستوى تدير المصادقة وطلبات الخدمة. تغطي هذه القدرات إدارة البنية التحتية العامة وتكامل التخزين عن بُعد.

Tensorspace هو إطار عمل تصور ثلاثي الأبعاد قائم على WebGL ومُصيّر مصمم لرسم خرائط بنى نماذج التعلم العميق وبيانات الموتر في مساحات ثلاثية الأبعاد تفاعلية. يعمل كمصور لبنية الشبكة العصبية ومفتش للنماذج، مما يسمح للمستخدمين بتصيير طوبولوجيا النموذج وتحليل تدفق البيانات داخل متصفح الويب. يتميز المشروع بقدرته على تحويل نماذج Keras و TensorFlow المدربة مسبقاً إلى تمثيلات مكانية. يندمج مع TensorFlow.js لتنفيذ الاستدلال في المتصفح، مما يتيح التصور في الوقت الفعلي للتنشيطات الوسيطة، والتمريرات الأمامية، وبيانات الموتر الداخلية. يوفر إطار العمل أوليات تصيير واسعة للطبقات أحادية وثنائية الأبعاد، بما في ذلك الالتفافات، والتجميع، والطبقات الكثيفة، وعمليات دمج الموتر المختلفة. يغطي مساحة واسعة من القدرات بما في ذلك رسم خرائط طوبولوجيا النموذج، ورسوم متحركة لحالة الطبقة، وتصور مخرجات النماذج التوليدية وشبكات اكتشاف الكائنات. يتضمن النظام أدوات لتحويل تنسيق النموذج لاستيراد البنى الموجودة ولوحة تتبع الأداء لمراقبة صحة النظام ومعدلات الإطارات أثناء التصيير.

OpenSC2K هو محرك بناء مدن JavaScript مفتوح المصدر مصمم كإعادة إنشاء لـ SimCity 2000. يعمل كمحاكاة تعتمد على الويب تستخدم إطار عمل Phaser 3 لتنفيذ حلقات اللعبة وإدارة الكيانات. يستخدم المشروع عرض WebGL و Canvas لتصور البيئات الحضرية واسعة النطاق. يتضمن نظام كاميرا يعتمد على الإحداثيات يتيح التحريك والتكبير عبر عالم اللعبة المعاد بناؤه. يدمج المحرك خط أنابيب بيانات لتحليل ملفات المدن القديمة وأصول الرسومات، مما يسمح له بإعادة بناء وعرض التخطيطات الحضرية داخل متصفح ويب حديث.

webgl-fundamentals هو مورد تعليمي شامل ودرس رسومات لتعلم العرض ثنائي وثلاثي الأبعاد المسرع بالأجهزة باستخدام واجهة برمجة تطبيقات WebGL. يعمل كمنهج رسومات ثلاثية الأبعاد منظم ومرجع برمجة GPU، حيث يوجه المستخدمين عبر خط أنابيب الرسومات من الهندسة الأساسية إلى تقنيات العرض المتقدمة. يوفر المشروع أدلة مفصلة حول تطوير تظليل GLSL، بما في ذلك إنشاء تظليل الرؤوس والشظايا. يركز بشكل خاص على تنفيذ نماذج الإضاءة في الوقت الفعلي—مثل الإضاءة الاتجاهية، والنقطية، والموضعية—وتطبيق سير عمل تعيين الظل وتعيين النسيج. يغطي المورد سطحًا واسعًا من قدرات رسومات الكمبيوتر، بما في ذلك الرياضيات المكانية ثلاثية الأبعاد، وتنفيذ نظام الكاميرا للعروض المنظورية والمتعامدة، واستخدام تحويلات المصفوفة. كما يتضمن تعليمات لإجراء حوسبة GPU للأغراض العامة (GPGPU) وتحسين أداء العرض من خلال الرؤوس المفهرسة.

Turbulenz Engine هو محرك ألعاب عبر الأنظمة الأساسية وإطار عمل HTML5 مصمم لعرض الرسومات ومحاكاة الفيزياء عبر بيئات سطح المكتب والهاتف المحمول والويب. يعمل كمحرك رسومات WebGL ومحرك فيزياء قائم على الويب، مما يوفر الأدوات اللازمة لبناء ألعاب ثنائية وثلاثية الأبعاد تعمل داخل المتصفحات. يتضمن المشروع إطار عمل متعدد اللاعبين في الوقت الفعلي يقوم بمزامنة حالات اللعبة وتفاعلات اللاعبين بين مستخدمين متعددين عبر الاتصال من جانب الخادم. وهذا يسمح بتنسيق الإجراءات في الوقت الفعلي والإجراءات القائمة على الأدوار غير المتزامنة للحفاظ على حالة مشتركة متسقة. يغطي المحرك مجموعة واسعة من الإمكانيات، بما في ذلك عرض الرسومات القائم على التظليل (shader)، ومحاكاة التصادم، ومعالجة مدخلات المستخدم من لوحات المفاتيح والفئران وشاشات اللمس وأجهزة التحكم في الألعاب. كما يدير أصول الوسائط المتعددة من خلال التحميل غير المتزامن للنماذج ثلاثية الأبعاد والقوام وتشغيل الصوت والفيديو. يتم تنظيم إطار العمل في مكونات معيارية لتسهيل تكامل أنظمة الألعاب المختلفة وتوزيع المحتوى عبر أنواع الأجهزة المختلفة.

Pannellum هو عارض بانوراما WebGL وإطار عمل للجولات الافتراضية يُستخدم لعرض الصور متساوية المستطيلات أو مكعبات الخرائط كبيئات غامرة بزاوية 360 درجة. يعمل كعارض صور متعدد الدقة ومشغل فيديو بانورامي، ويدعم كلاً من الصور الثابتة وتشغيل الفيديو الكروي. يتميز المشروع بقدرته على التعامل مع صور بانورامية كبيرة جداً وعالية الدقة من خلال إنشاء وتحميل البلاطات متعددة الدقة. يتيح إنشاء جولات افتراضية تفاعلية من خلال ربط مشاهد بانورامية متعددة معاً باستخدام تلاشي الانتقال والنقاط الساخنة التفاعلية. يتضمن النظام إمكانيات لحركة الكاميرا الآلية، وتكامل اتجاه الجهاز لتجارب النظر حول الهاتف المحمول، ونظام ربط لمراقبة أحداث العارض. كما يوفر أدوات لتوطين واجهة المستخدم، والتحكم في حالة العارض، وعرض محتوى احتياطي للمتصفحات التي لا تحتوي على تسريع للأجهزة.

هذا المشروع عبارة عن معرض برمجة إبداعية وقالب محفظة ثلاثي الأبعاد تفاعلي. يستخدم JavaScript وThreeJS لعرض بيئة متصفح قابلة للتنقل لتقديم المشاريع المهنية والأعمال الفنية الرقمية. يطبق المشروع معرضاً تفاعلياً بتقنية WebGL وعروضاً رقمية غامرة. تستخدم هذه البيئات رسومات مسرعة بالأجهزة لتوفير تنقل ثلاثي الأبعاد ورسوم متحركة إبداعية للويب. يتضمن التنفيذ التقني مشهداً ثلاثي الأبعاد مع حركة الكاميرا والإضاءة، مدعوماً بتحميل نموذج GLTF وتفاعل قائم على raycaster. تستخدم البنية نمط كيان-مكون-نظام وحلقة رسوم متحركة متزامنة لإدارة عرض الكائنات ثلاثية الأبعاد.