اسکرین شات از برنامه

آیا می خواهید راه شیری را به صورت آنلاین تماشا کنید؟ سرویس تجسم جدید از گوگلبه نام 100,000 Stars، به شما امکان می دهد تا به صورت مستقل و با کمک یک تور تعاملی، در محله کیهانی ما تور داشته باشید.

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

سفر کهکشان ممکن شد

اما اخیراً به لطف تجسم تعاملیدر کهکشان ما، همه این فرصت را دارند که در وسعت کهکشان راه شیری سفر کنند. اکنون کافی است سرویس «Our Galaxy 3D and 100,000 Stars» را در مرورگر باز کنید و در یک سفر مجازی در فضا غوطه ور شوید. این اپلیکیشن که توسط گوگل توسعه داده شده است شامل داده های مکان نزدیک به 120000 ستاره در کهکشان راه شیری است که از منابع مختلف از جمله ماموریت های فضایی جمع آوری شده است.

جهت یابی

پیمایش نقشه تعاملی با حرکت با ماوس یا صفحه لمسی انجام می شود.

با کلیک بر روی ستاره مورد علاقه، اطلاعات مربوط به آن نمایش داده می شود. در این حالت دوربین مستقیماً به ستاره انتخاب شده نزدیک می شود و تمام اطلاعات لازم در پنجره کنار آن نمایش داده می شود. این امکان مطالعه دقیق اجرام کهکشان ما را فراهم می کند.

موسیقی

سفر در فضای تعاملی همراه با آثار موسیقایی از آهنگساز سام هولینک است که به خاطر نوشتن موسیقی برای بازی های کامپیوتریمانند Mass Effect.

روز خوب.
آیا می دانید تفاوت کامپیوتر شما با سفینه فضایی چیست؟
پاسخ صحیح:همه چیز، اما نه این بار

100000 ستاره یکی از پروژه های خلاقانهگوگل برای تجسم کهکشان ما. فقط تعداد زیادی ستاره در داخل وجود دارد. می توانید بین آنها حرکت کنید و در عین حال مقیاس جهان را ارزیابی کنید - کافی است عکس زیبااین اجازه می دهد. مدیریت توسط ماوس انجام می شود.

تمام این زیبایی روی موتور THREE.js نوشته شده بود که با CSS و WebGL برای نمایش متن ترکیب شده بود. اطلاعات مربوط به ستارگان و مختصات آنها از پایگاه داده HYG گرفته شده است که به نوبه خود تلفیقی از سه مورد دیگر است.
به گفته یکی از شرکت کنندگان پروژه، این ایده به عنوان یک اثر جانبی تحقیقات موتور متولد شد.

و گزیده ای کوچک بر اساس وقایع واقعی.

زمان زیادی از پایان مایکل چانگ می گذرد ( تقریبا عضو تیم خلاق گوگل) یکی از پروژه های او. پروژه شکست خورد و به نظر می رسید که همه چیز تمام شده است. مشتریان خوشحال بودند مخاطب هدفاز زحمات استاد قدردانی کرد و خود استاد، صادقانه بگویم، کمی به نتیجه زحمات خود افتخار می کرد. همه چیز به حال طبیعی خود بازگشت. با این حال، با گذشت زمان، شادی پیروزی به تدریج جای خود را به ضعف زندگی داد. سرعت معمول زندگی مرد ضرب‌الاجل مستلزم یک وعده قهوه جدید بود، اما نه خواندن آرام فید اخبار بین خمیازه‌های طولانی.
مایکل از شدت خستگی تصمیم گرفت آزمایشات خود را روی موتور THREE.js از سر بگیرد. غیرممکن بود که این آزمایش ها را چیزی غیرعادی بنامیم - بلکه او به سادگی کاوش کرد ابزار جدید، مانند هر استاد محترمی که می خواهد در حرفه خود پیشرفت بیشتری کند. اما در مورد برنامه نویسی، مطمئناً نمی تواند پایان خوبی داشته باشد.
ساعت بعد از نیمه شب بود که ناگهان سرمای خفیفی در بدن مایکل جاری شد. استاد متوجه شد که با تغییراتی در مقیاس صحنه، خروجی تصاویر فوق العاده زیبایی است. این نقاشی ها پس از افزودن ذرات اضافی جالب تر شدند. با بزرگنمایی چندگانه، هر نقطه از تصویر تار شد و توهم مشاهده از طریق میکروسکوپ را ایجاد کرد. از دور، صحنه شبیه جزیره ای کوچک در فضای دور به نظر می رسید. مایکل متفکرانه در اتاق قدم زد. اصلا نمی خواستم بخوابم. ایده ها او را آزار می دادند. آخرین نقش توسط Mass Effect که اخیراً تکمیل شده بود، ایفا نشد.
خورشید به سختی از افق خارج شده بود که تجزیه کننده صدای جیر جیر بلندی کشید. استاد لرزید. روی صفحه تاریک، تنها نوشته ثابت شد - "مجموع: 119.617". روز به خوبی گذشته است. صد و نوزده هزار ستاره عالی به همراه مختصاتشان در جایی روی هارد مخفی شدند. باقی مانده است که در این دسته از بایت ها اندکی جان بدهیم.

نسخه اصلی قطع شده و به جای آن صفحات کد ظاهر می شود...

P.S. همانطور که معلوم شد، این در حال حاضر است

(به کسانی که بلندگوی روشن دارند توجه کنید: موسیقی مرموز در حال پخش است)

بنابراین، در نوامبر 2012، علاقه مندان به نجوم از گوگل یک برنامه وب جدید "100000 ستاره" را معرفی کردند که امکانات را نشان می دهد. مرورگر کرومدر پردازش محتوای سه بعدی با استفاده از WebGL. این برنامه به شما اجازه می دهد تا یک نقشه سه بعدی واقع گرایانه از بخشی از کهکشان اطراف خورشید را تجسم کنید، که با آن می توانید فاصله و موقعیت ستارگان خاص را به صورت بصری تخمین بزنید. برای تصویر ستارگان و کهکشان از عکس های واقعی ارائه شده در وب سایت ناسا استفاده شده است، توضیحات ستارگان از ویکی پدیا گرفته شده است.
فوراً به شما هشدار می دهم - برای کسانی که کار زیادی دارند، بهتر است این تجارت را در ساعات کاری وارد نکنید، خطر گیر افتادن وجود دارد! ;)
(همچنین، به نظرم رسید که مرورگرهای غیر کروم در این برنامه کاملاً کند هستند، بنابراین اینجاست.)

هنگامی که پنجره با Universe بارگذاری می شود، چیزی شبیه به این را می بینیم:

مرکز تجسم روی خورشید قرار دارد. با تغییر مقیاس با اسکرول ماوس (یا نوار لغزنده سمت راست)، می توانید روی ستاره ما مدیتیشن کنید:

همین کار را می توان با روشن کردن حالت آشنایی از همان ابتدا (در گوشه سمت چپ بالا) انجام داد. کیهان می چرخد، خورشید نزدیک می شود، "گاری های" توضیحی همراه ظاهر می شود.
یکی از فریم های بررسی بیشتر در حالت آشنایی:

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


در هر مرحله، فضای صفحه را می توان پیچ و تاب کرد طرف های مختلفبا "گرفتن" آن با ماوس.

در گوشه سمت چپ بالا نیز یک سوئیچ برای "تحلیل طیفی" رنگی ستاره ها وجود دارد. به نظر می رسد این است:


طبیعتاً در هر زمان می توانید به نمای اصلی بازگردید.

در یک مقیاس خاص، نام آنها در نزدیکی ستاره ها ظاهر می شود که کاملاً قابل کلیک هستند. با کلیک بر روی نام یک ستاره، می بینیم که چگونه به سرعت به ما نزدیک می شود، نبض می زند و خودنمایی می کند، و فشاری از ویکی پدیا در سمت چپ صفحه ظاهر می شود:


در همان زمان، این ستاره اکنون مرکز فضای ستاره‌ای روی صفحه است و جهان باید با موش نسبت به آن «پیچان و بچرخد». برای تغییر مجدد مرکز مختصات به خورشید، در همان گوشه بالا سمت چپ که قبلاً برای ما آشناست، در این حالت، دکمه مربوطه ظاهر می شود.

برای تقویت ادراک (یا استراحت بعد از سفر مجازی) کلیپ های "موضوعی" مورد علاقه ام را اینجا اضافه می کنم.

مایکل چانگ، از تیم های گوگلدر وب سایت HTML5rocks مقاله جالبی در مورد پایان آزمایش کروم، تجسم نزدیکترین ستاره ها "100000 ستاره" نوشت. این پروژه با THREE.js و CSS3D توسعه یافته است. او بخشی از پروژه، مدیریت شیدرها و نحوه استفاده را توضیح داد متن cssهمراه با WebGL
نسخه ی نمایشی
هدف از نوشتن این مقاله نشان دادن امکانات فن آوری های مدرن وب به کاربران اینترنت روسی زبان است، در این مورد THREE.js برای تجسم ستارگان نزدیک در کهکشان راه شیری استفاده می شود. فناوری WebGL، در زمان نگارش این مقاله، تنها توسط گوگل کروم به درستی پشتیبانی می شود!

فضا

پس از تکمیل Globus، آزمایشات با THREE.js انجام شد. معلوم شد که می توان مقیاس صحنه را تغییر داد و تعداد جلوه ها را افزایش داد.

زمانی که عمق میدان واقعاً شدید بود، اجسام دور واقعاً تار می‌شدند، دقیقاً مانند عکاسی با شیب برای ایجاد توهم نگاه کردن به صحنه‌های میکروسکوپی. با کج کردن، این افکت به نظر می رسد که گویی به فضای عمیق نگاه می کنید.

برای قرار دادن ستارگان در صحنه از پایگاه داده نجوم astronexus.com استفاده شد.

اولین قدم این است که هر ستاره را به عنوان یک ذره در کاتالوگ قرار دهید. برخی از ستاره های کاتالوگ نام خود را دارند که در اینجا نشان داده شده است.

قرار گرفتن ستارگان از داده های نجوم در فضای سه بعدی طولی نکشید، اگرچه دقیقاً 119617 ستاره در مجموعه وجود دارد. کارت گرافیک GPUسخت نبود برای ستاره‌هایی که به‌صورت جداگانه تعریف شده‌اند، از یک پوشش CSS استفاده می‌شود، با استفاده از روش مشابه برای کره.

ایجاد کهکشان

به نظر من، مایکل موفق شد مدلی از کهکشان را با منظره ای خیره کننده از کهکشان راه شیری تولید کند.

نمونه اولیه ذرات منظومه راه شیری

برای تشکیل کهکشان راه شیری، 100000 ذره به آن اضافه شده و در یک مارپیچ قرار می گیرند.
بسیاری تلاش کرده اند که راه شیری را با استفاده از ذرات به عنوان نمایشی مسطح از کهکشان برای ذرات شکل دهند و به کهکشان راه شیری ظاهر واقعی تری ببخشند.

تصویری از کهکشان مارپیچی NGC 1232B که تقریباً 70 میلیون سال نوری از زمین فاصله دارد.
هر واحد GL یک سال نوری است. در این حالت، کره 110000 سال نوری عرض دارد.

• یک بلوک GL یک پیکسل در سه بعدی است، مانند یک سال نوری

ابتدا تصمیم گرفته شد به جای حرکت دادن دوربین، صحنه کهکشان را بچرخانیم. اما باید زوم کنید و ببینید چه چیزی در چرخ دنده وجود دارد، بنابراین می‌توانید با ماوس خود را به چپ و راست بکشید، شی را بچرخانید، و بزرگ‌نمایی فقط به تغییر camera.position.z بستگی دارد.

با ذرات نمونه اولیه مقایسه کنید و ذرات با یک تصویر مسطح همراه هستند.

در این مرحله با مقایسه اندازه نسبی منظومه شمسی با مقایسه از شعاع برای تجسم، ابر اورت به عنوان مدل منظومه شمسی انتخاب می شود، همچنین می توانید مدار ساده شده زمین و واقعی را تجسم کنید. شعاع خورشید در مقایسه

مدار خورشید و سیارات در کره، کمربند کویپر را نشان می دهند.

ساختن خورشید سخت بود. سطح خورشید پلاسمای داغ هلیوم است که برای تغییر در طول زمان نیاز به تکانه دارد. یک تصویر مادون قرمز از سطح خورشید با استفاده از یک بافت شطرنجی مدل‌سازی شد. سایه‌زن سطحی رنگ را بر اساس مقیاس خاکستری این بافت ارائه می‌کند و ظاهر را در یک رمپ رنگی جداگانه ارائه می‌کند. وقتی این فعالیت در طول زمان تغییر می کند، این اعوجاج های گدازه مانند را ایجاد می کند.

تکنیک مشابهی برای تاج خورشید استفاده شده است، با این تفاوت که این یک نقشه spritemap مسطح خواهد بود که همیشه رو به دوربین با THREE.Gyroscope(); .

شراره های خورشیدی با استفاده از سایه بان ها ایجاد شده اند که فقط در امتداد لبه های سطح خورشید می چرخند. سایه زن با عملکرد نویز.
در اینجا چند سوال در مورد دقت GL وجود دارد. همه متغیرهای دقت در THREE.js از پیش تعریف شده بودند، زمانی که سایر سیستم های ستاره ای مدل شدند، کار زیادی برای افزایش دقت انجام شد.

کد برای خورشید و ستاره های دیگر.

چند هک وجود داشت که برای نرم کردن Material.polygonoffset استفاده کردم. این برای وادار کردن هواپیما به سمت بالای سطح خورشید استفاده شد و پرتوهای نوری که از کره می‌آمدند را متوجه شد.

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

برجسته سازی را اجرا کنید

تجسم فضا با استفاده از LensFlare. THREE.LensFlare فقط برای این منظور است، تنها کاری که باید انجام دهید این است که آن را به صحنه اضافه کنید.

// این تابع یک شی lesnflare THREE را مجددا تنظیم می کند تا .add()به تابع نمودار صحنه اضافه شود addLensFlare(x,y,z, size, overrideImage)( var flareColor = new THREE.Color(0xffffff)؛ lensFlare = new THREE. LensFlare(overrideImage, 700, 0.0, THREE.AdditiveBlending, flareColor)؛ // ما از چندین آرتیفکت زیر لنزهای شعله ور استفاده خواهیم کرد که هرکدام با اندازه های متفاوت lensFlare.add(textureFlare1, 4096, 0.0.0.0. lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending)؛ lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(2,0,2,0,D1,TextureFlare. هر کدام را از طریق یک تابع زیر lensFlare.customUpdateCallback = lensFlareUpdateCallback؛ lensFlare.position = جدید THREE.Vector3(x,y,z)؛ lensFlare.size = اندازه ? اندازه: 16000؛ این تابع برگرداندن lensFlare بیش از هر کدام عمل می کند. مصنوع lensflare، حرکت آنها در اطراف تابع صفحه lensFlareUpdateCallback(object) ( var f, fl = this.lensFlares.leng th; شعله ور شدن var; var vecX = -this.positionScreen.x * 2; var vecY = -this.positionScreen.y * 2; varsize = object.size ? شیء.سایز: 16000; var camDistance = camera.position.length(); برای (f = 0; f< fl; f ++) { flare = this.lensFlares[ f ]; flare.x = this.positionScreen.x + vecX * flare.distance; flare.y = this.positionScreen.y + vecY * flare.distance; flare.scale = size / camDistance; flare.rotation = 0; } }

بافت

هواپیما، برای کمک به جهت گیری در فضا.

THREE.CylinderGeometry() روی خورشید اعمال شد. برای ایجاد یک پرتو نور، بافت افست زمان را به صورت زیر تغییر دهید:

Mesh.material.map.needsUpdate = true; mesh.material.map.onUpdate = function()( this.offset.y -= 0.001; this.needsUpdate = true; )

رنگ ستاره

هر ستاره بر اساس شاخص رنگ، رنگ متفاوتی دارد. به طور خلاصه، ستارگان بنفش آبی قرمز داغتر، سفید و نارنجی در میان هستند.

بر اساس این داده ها، هر ستاره را با رنگ خاص خود رنگ کنید. راه برای انجام این کار با ویژگی های سایه زن اعمال شده به ذرات بود.

Var shaderMaterial = جدید THREE.ShaderMaterial(( یونیفرم: datastarUniforms، ویژگی ها: datastarAttributes، /* ... و غیره */ )); var datastarAttributes = ( اندازه: ( نوع: "f"، مقدار: ), colorIndex: (نوع: "f"، مقدار: ), );

پر کردن آرایه ColorIndex به طوری که هر ذره رنگ منحصر به فرد خود را داشته باشد.

مقیاس رنگ برای یافتن رنگ مناسب از خوانش های رنگ ستاره.

با جاوا اسکریپت به داده های رنگ بیت مپ دسترسی پیدا کنید. ابتدا تصویر را در DOM بارگذاری کنید، آن را به عنصر گرافیکی بکشید تا به بیت مپ گرافیکی دسترسی پیدا کنید.

// یک بوم خالی به اندازه تصویر بسازید، در این مورد gradientImage یک عنصر تصویر dom است gradientCanvas = document.createElement("canvas"); gradientCanvas.width = gradientImage.width; gradientCanvas.height = gradientImage.height; // تصویر gradientCanvas.getContext را بکشید("2d").drawImage(gradientImage, 0, 0, gradientImage.width, gradientImage.height); // تابعی برای گرفتن رنگ پیکسل بر اساس یک مقدار درصد نرمال شده gradientCanvas.getColor = تابع(درصد)( return this.getContext("2d").getImageData(درصد * gradientImage.width,0, 1, 1).data ;)

از این روش برای رنگ آمیزی تک ستاره ها در مدل ستاره نیز استفاده می شود.

از همین تکنیک برای جستجوی رنگی کلاس طیفی یک ستاره استفاده می شود.

تعداد شیدرها

این پروژه از شیدرهای زیادی برای اجرای همه استفاده می کند جلوههای بصریبنابراین مایکل چانگ شیدر لودر را نوشت.

// لیست سایه بان هایی که ما بارگذاری می کنیم var shaderList = ["shaders/starsurface"، "shaders/starhalo"، "shaders/starflare"، "shaders/galacticstars"، /*...و غیره...*/]; // یک ابزار کوچک برای از پیش واکشی همه سایه بان ها و قرار دادن آنها در یک ساختار داده (به جای لیست بالا) تابع loadShaders(list, callback)( var shaders = ()؛ var expectFiles = list.length * 2؛ var loadedFiles = 0؛ تابع makeCallback(نام، نوع)( تابع برگرداندن (داده)( if(shaders === تعریف نشده)( shaders = ()؛ ) shaders = داده؛ // بررسی کنید آیا انجام شده است loadedFiles++؛ if(loadedFiles == فایل های انتظار می رود)( callback(shaders); ) )؛ ) for(var i=0; i

LoadShaders() لیستی از نام فایل های سایه زن را می گیرد، سعی می کند داده های آن را بارگذاری کند و سپس به سادگی لیست را با اشیا جایگزین می کند. در نتیجه، در فرم THREE.js، می توانید سایه بان ها را به صورت زیر به آن منتقل کنید:

Var galacticShaderMaterial = جدید THREE.ShaderMaterial(( vertexShader: shaderList.galacticstars.vertex, fragmentShader: shaderList.galacticstars.fragment, /*...*/ ));

CSS و زیرنویس ها در بالای THREE.JS

پروژه، Globe، برچسب های متنی را در بالای صحنه THREE.js نمایش می دهد. ()THREE.Projector برای نمایش برچسب ها در موقعیت مناسب روی صفحه و نشانه گذاری با جدول CSS در مکان مناسب استفاده شد.

CSS3D متن را در بالای WebGL برای این نگاه به کد منبع قرار می دهد. تابع ماتریس THREE.js را به روز کنید:

/* رفع تفاوت بین مختصات WebGL به مختصات CSS */ تابع toCSSMatrix(threeMat4, b) ( var a = threeMat4, f; if (b) ( f = [ a.elements, -a.elements, a.elements, a عناصر، الف، عناصر، الف. الف عناصر]؛ ) else ( f = [ a.elements, a.lements, a.elements, a.lements, a.lements, a.lements , a.elements, a.elements, a.elements, a.elements, a.elements, a.elements ]; ) برای (var e در f) (f[e] = epsilon(f[e]); ) بازگشت "matrix3d(" + f.join("") + ")";)

حالا دیگر متن جلوی دوربین نمی آید. برای این کار از THREE.Gyroscope () استفاده کردیم که باعث می‌شود Object3D جهت خود را با ارث بردن از صحنه از دست بدهد. این تکنیک "بیلبورد" نام دارد و ژیروسکوپ برای این کار عالی است.

همیشه با اتصال دوربین به THREE.Gyroscope علامت ها از بین می روند.

صدا

من از برچسب صوتی برای پخش موسیقی استفاده کرده‌ام، اما حتی در کروم هم قابل اعتماد نیست - گاهی اوقات حلقه نمی‌شود. در پایان از این هک تگ صوتی دوگانه برای بررسی پایان پخش و دوچرخه سواری به تگ دیگری برای بازی استفاده می شود. چیزی که ناامیدکننده بود این بود که *هنوز* همیشه یک چرخه کامل نبود، افسوس که احساس می کنم بهترین کاری بود که می توانستم انجام دهم.

var musicA = document.getElementById("bgmusicA"); var musicB = document.getElementById("bgmusicB"); musicA.addEventListener("پایان"، function()( this.currentTime = 0; this.pause(); var playB = function()( musicB.play(); ) // قبل از پخش مجدد 15 ثانیه صبر کنید setTimeout( playB، 15000)؛ )، نادرست)؛ musicB.addEventListener("پایان"، function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // در غیر این صورت موسیقی شما را دیوانه خواهد کرد setTimeout(playA ، 15000)؛ نادرست)؛ // خوب پس کمی کد افزونگی وجود دارد، قبول دارم musicA.play();

سرانجام

شاید به زودی در Googlemap نه تنها نقشه سه بعدی زمین، بلکه نقشه کهکشان خود را نیز ببینیم و راه کوتاهی از مریخ تا زهره را هموار کنیم :-D. فن آوری های مدرن وب این امکان را نه تنها برای بازی های فضایی، بلکه برای مرورگر نیز فراهم می کند.