Kage آپریشن میں

Kage ڈیزائنر Meng To کا اوپن سورس عمیق 3D انٹرایکٹو تجربہ ہے۔ یہ ٹول صرف ایک HTML فائل میں Three.js کے ذریعے GPT Image 2 سے تیار کردہ منظر کے مواد کو ریئل ٹائم میں رینڈر کر کے ایک فرضی کیوٹو پہاڑی مندر میں رات کی سیر تخلیق کرتا ہے۔ صارف صرف ماؤس اسکرول کے ذریعے کیمرے کے راستے کو کنٹرول کرتا ہے اور پانچ ابواب، یعنی پہاڑی دروازے اور خاموش باغ وغیرہ، سے گزرتے ہوئے بارش کی دھند، گرتے پتوں اور سرخ چاندی کے امتزاج سے بننے والی فلمی فضا محسوس کرتا ہے۔ Kage کو براہِ راست کھول کر چلایا جا سکتا ہے، اور یہ AI سے تیار کردہ مواد اور ریئل ٹائم WebGL کے امتزاج پر مبنی فرنٹ اینڈ ڈیزائن کی ایک مثال ہے۔

WeChat پر فالو کر کے “开源” کا جواب دیں اور AI اوپن سورس پروجیکٹس کے گروپ میں شامل ہوں
اسکرول ہی نیویگیشن ہے: ماؤس وہیل کے ذریعے کیمرے کو مقررہ راستے پر پہاڑی مندر سے گزاریں؛ نہ بٹن، نہ مینو، اسکرول ہی واحد انٹرایکشن ہے۔
ریئل ٹائم 3D رینڈرنگ: Three.js کی بنیاد پر براؤزر میں مندر، پہاڑی دروازہ، بارش کی دھند، گرتے پتے اور سرخ چاندی سمیت متحرک مناظر ریئل ٹائم میں تخلیق کیے جاتے ہیں۔
AI مواد کا امتزاج: GPT Image 2 سے تیار کردہ منظر کے بل بورڈز اور شفاف WebP پیش منظر عناصر کو ریئل ٹائم 3D دنیا پر تہہ در تہہ شامل کر کے فلمی احساس بڑھایا جاتا ہے۔
پانچ ابواب پر مشتمل بیانیہ: “پہاڑی دروازہ→خاموش باغ→دست کاری→باقی ماندہ روشنی→اعلان” کے پانچ ابواب میں ترتیب دیا گیا ہے، جہاں ہر اسکرول ایک نئی کمپوزیشن اور کیمرہ شاٹ سے مطابقت رکھتا ہے۔
ایک فائل، بغیر بلڈ کے: تمام منطق، اسٹائل اور رینڈرنگ ایک HTML فائل میں مرکوز ہیں؛ npm، React یا کسی بھی بلڈ ٹول کی ضرورت نہیں۔
عمیق بصری فضا: قریباً سیاہ، گہرا نیلا، گرم عنبری، ہڈی جیسا سفید اور سرخ رنگوں کا محتاط امتزاج، جس کے ساتھ bloom، فلم گرین اور وِنیٹ پوسٹ پروسیسنگ استعمال کی گئی ہے۔
رسائی کی معاونت: اینیمیشن کم کرنے کا اختیار شامل ہے اور موبائل کے لیے responsive layout بھی معاونت یافتہ ہے۔

آن لائن تجربہ: براہِ راست براؤزر میں https://mengto.github.io/kage/ کھول کر کیوٹو کے پہاڑی مندر کی رات کی سیر میں داخل ہوں۔
مقامی تعیناتی: ریپوزٹری کلون کرنے کے بعد کوئی بھی static server چلائیں، مثلاً python3 -m http.server؛ بلڈ کے کسی مرحلے کی ضرورت نہیں۔
انٹرایکشن: صفحہ کھولنے کے بعد صرف ماؤس کو اسکرول کریں، کیمرہ خود بخود مقررہ راستے پر پانچوں ابواب سے گزرے گا۔
براؤزر کی ضرورت: یقینی بنائیں کہ آپ WebGL معاونت رکھنے والا جدید براؤزر استعمال کر رہے ہیں، ورنہ منظر رینڈر نہیں ہو سکے گا۔
تخلیقی تبدیلی: نقل تیار کرنے کے لیے PROMPT.md کی بنیاد پر AI کے ذریعے مواد دوبارہ تیار کریں؛ اصل پروجیکٹ کے artwork کو براہِ راست دوبارہ استعمال نہ کریں۔
رسائی کی ترتیبات: جب سسٹم میں “متحرک اثرات کم کریں” کی ترجیح فعال ہو، تو چکر آنے سے بچانے کے لیے صفحہ خود بخود اینیمیشن کی شدت کم کر دے گا۔

ایک فائل کا ڈھانچہ: تمام منطق، اسٹائل اور 3D رینڈرنگ ایک HTML فائل میں مرکوز ہیں؛ نہ بلڈ، نہ انحصار، فوراً استعمال کے لیے تیار۔
انتہائی سادہ انٹرایکشن: کیمرے کے راستے کو صرف اسکرول کے ذریعے کنٹرول کیا جاتا ہے؛ نہ بٹن، نہ مینو، سیکھنے کی کوئی لاگت نہیں۔
AI امتزاجی رینڈرنگ: GPT Image 2 سے تیار کردہ منظر کا مواد Three.js کی ریئل ٹائم 3D رینڈرنگ کے ساتھ بے جوڑ انداز میں مل کر حقیقی عکس جیسا احساس اور متحرک روشنی و سائے فراہم کرتا ہے۔
فلمی درجے کا غوطہ: پانچ ابواب کی بیانیہ ترتیب، محتاط رنگوں اور پوسٹ پروسیسنگ اثرات کے ساتھ کیوٹو کے پہاڑی مندر کی رات کی ایک قابلِ تعامل فلمی سیر تخلیق کرتی ہے۔
ڈیزائنر کی رہنمائی: پروگرامر نہ ہونے کے باوجود مصنف نے prompts کو تخلیق کا مرکز بنایا، جو AI کے دور میں ڈیزائن پر مبنی فرنٹ اینڈ ڈیولپمنٹ کا نیا نمونہ پیش کرتا ہے۔
ہلکا پھلکا اور قابلِ منتقلی: نہ بیک اینڈ، نہ analytics scripts، نہ runtime network requests؛ کسی بھی static server پر چند سیکنڈ میں تعینات کیا جا سکتا ہے۔

پروجیکٹ کی ویب سائٹ: https://mengto.github.io/kage/
GitHub ریپوزٹری: https://github.com/MengTo/kage

ذاتی پورٹ فولیو/تخلیقی ہوم پیج: ڈیزائنر یا ڈویلپر روایتی پورٹ فولیو کے بجائے ایک فائل پر مشتمل 3D عمیق تجربہ استعمال کر سکتا ہے اور اسکرول بیانیے کے ذریعے پروجیکٹ پیش کر سکتا ہے، جس کا بصری اثر عام ویب صفحات سے کہیں زیادہ ہوتا ہے۔
سیاحتی مقامات کی ڈیجیٹل رہنمائی: Kage کے “رات میں پہاڑی مندر کی سیر” کے تصور کو حقیقی مقامات پر منتقل کر کے قدیم عمارتوں اور قدرتی مناظر سے اسکرول کے ذریعے گزارا جا سکتا ہے، یوں جامد تصویری و متنی تعارف کی جگہ ایک متحرک تجربہ فراہم ہوتا ہے۔
برانڈ لانچ/پروڈکٹ پری لانچ صفحہ: نئی مصنوعات کی پیش کش سے پہلے ایک صفحے کے فلمی درجے کے تجربے سے فضا قائم کی جا سکتی ہے؛ مثلاً کار، گھڑی یا لگژری مصنوعات کے لیے ابواب پر مبنی اسکرول کے ذریعے مصنوعات کی تفصیلات اور برانڈ کی کہانی ظاہر کی جا سکتی ہے۔
میوزیم/تاریخی تعلیم کی ڈیجیٹل نمائش: تاریخی مناظر، مثلاً قدیم شہر یا آثارِ قدیمہ، دوبارہ تخلیق کیے جا سکتے ہیں تاکہ طلبہ یا ناظرین اسکرول کے ذریعے تاریخ میں “داخل” ہو سکیں، جبکہ AI سے تیار کردہ مواد فنکارانہ لاگت کم کرتا ہے۔
فرنٹ اینڈ تدریس اور Three.js کا ابتدائی نمونہ: ایک فائل اور بغیر بلڈ کے نمونے کے طور پر Kage سورس کوڈ کی براہِ راست تدریسی تشریح کے لیے موزوں ہے؛ طلبہ npm ماحول ترتیب دیے بغیر 3D مناظر، کیمرے کے راستے اور اسکرول سے چلنے والی بنیادی منطق سمجھ سکتے ہیں۔