애플리케이션의 스크린샷
은하수를 온라인으로 보고 싶으십니까? 의 새로운 시각화 서비스 Google 100,000 Stars라고 불리는 이 앱을 사용하면 독립적으로 또는 양방향 투어를 통해 우리 우주의 이웃을 둘러볼 수 있습니다.
또한 이용 가능한 자세한 정보우리에게 가장 가까운 발광체에 대해. 영어에 대한 지식은 필요하지만 모르더라도 편안한 음악을 듣고 아름다운 우주 애니메이션을 볼 수 있습니다.
갤럭시 여행이 가능해졌다
하지만 최근에 덕분에 대화형 시각화우리 은하계의 모든 사람들은 은하수를 여행할 기회가 있습니다. 이제 브라우저에서 "Our Galaxy 3D and 100,000 Stars" 서비스를 열고 우주에서의 가상 여행에 몰입하는 것으로 충분합니다. Google에서 개발한 이 앱에는 우주 임무를 비롯한 다양한 출처에서 수집한 은하수에 있는 거의 120,000개의 별에 대한 위치 데이터가 포함되어 있습니다.
항해
대화형 지도 탐색은 마우스나 터치 패드로 이동하여 수행됩니다.
관심 있는 별을 클릭하면 해당 별에 대한 정보가 표시됩니다. 이 경우 카메라는 선택한 별에 직접 접근하고 필요한 모든 정보는 옆 창에 표시됩니다. 이를 통해 우리 은하의 물체를 자세히 연구할 수 있습니다.
음악
인터랙티브 공간을 통한 여행은 음악을 작곡한 것으로도 알려진 작곡가 Sam Hulink의 음악 작품과 함께 합니다. 컴퓨터 게임, 매스 이펙트와 같은.
좋은 날.
컴퓨터와 우주선의 차이점이 무엇인지 아십니까?
정답:모든 것이지만 이번에는 아닙니다.
100,000개의 별은 다음 중 하나입니다. 창의적인 프로젝트 Google은 우리 은하를 시각화합니다. 안에 별이 너무 많아요. 그들 사이를 이동할 수 있으며 그 동안 우주의 규모를 평가할 수 있습니다. 충분합니다. 좋은 사진이것은 허용합니다. 관리는 마우스로 수행됩니다.
이 모든 아름다움은 텍스트를 표시하기 위해 CSS 및 WebGL과 결합된 THREE.js 엔진에서 작성되었습니다. 별과 그 좌표에 대한 정보는 HYG 데이터베이스에서 가져오며, 이 데이터베이스는 다른 세 개를 편집한 것입니다.
프로젝트 참가자 중 한 사람에 따르면 이 아이디어는 엔진 연구의 부작용으로 탄생했습니다.
그리고 실제 사건을 바탕으로 한 작은 발췌문입니다.
Michael Chang( 약 Google 크리에이티브 팀원) 그의 프로젝트 중 하나입니다. 프로젝트는 실패했고 모든 것이 완료된 것처럼 보였습니다. 고객은 행복했습니다 타겟 청중주인의 노력을 긍정적으로 평가하고 주인 자신은 솔직히 말해서 그의 노력의 결과에 대해 약간 자랑스러워했습니다. 모든 것이 정상으로 돌아왔습니다. 그러나 시간이 지남에 따라 승리의 기쁨은 점차 존재의 나약함에 자리를 잡기 시작했습니다. 데드라인의 일상적인 삶의 속도에는 새로운 커피가 필요했지만 긴 하품 사이에 뉴스 피드를 편안하게 읽을 수는 없었습니다.
지루함에 마이클은 THREE.js 엔진에 대한 실험을 재개하기로 결정했습니다. 이러한 실험을 특이한 것으로 부르는 것은 불가능했습니다. 오히려 그는 단순히 탐구했습니다. 새로운 도구, 자신의 직업에서 더 발전하기를 원하는 자긍심 있는 주인처럼. 하지만 프로그래밍의 경우엔 확실히 끝이 좋지 못하다.
약간의 오한이 갑자기 마이클의 몸을 훑고 지나간 것은 자정 이후였습니다. 주인은 장면의 크기가 약간 변경되면 출력물이 믿을 수 없을 정도로 아름다운 그림이 된다는 것을 알아차렸습니다. 이 그림은 입자를 추가한 후 더욱 흥미로워졌습니다. 다중 배율로 이미지의 각 지점이 흐려져 현미경으로 관찰하는 듯한 착각을 불러일으킵니다. 멀리서 그 장면은 머나먼 우주에 있는 작은 섬처럼 보였다. 마이클은 신중하게 방을 서성였다. 나는 전혀 자고 싶지 않았다. 아이디어가 그를 괴롭혔다. 최근 완성된 매스 이펙트가 마지막 역할을 맡은 것은 아닙니다.
파서가 날카로운 소리를 내었을 때 태양은 거의 수평선에서 벗어났습니다. 주인은 몸서리를 쳤다. 어두운 화면에서 유일한 비문은 "총계: 119.617"로 고정되었습니다. 날은 이미 잘 가버렸습니다. 11만 9천 개의 우수한 별들이 좌표와 함께 하드 드라이브 어딘가에 숨겨져 있습니다. 이 바이트 무리에 약간의 생기를 불어넣어야 합니다.
원본이 잘리고 코드 페이지가 대신 나타납니다...
P.S 결과적으로 이것은 이미
(스피커가 켜져 있는 사람 주의: 신비로운 음악이 재생 중)
그래서 2012년 11월 Google의 천문학 애호가들은 새로운 웹 애플리케이션 "100,000 Stars"를 도입하여 가능성을 보여주었습니다. 크롬 브라우저 WebGL을 사용하여 3D 콘텐츠를 처리합니다. 이 응용 프로그램을 사용하면 특정 별의 거리와 위치를 시각적으로 추정할 수 있는 태양을 둘러싼 은하의 일부에 대한 사실적인 3차원 지도를 시각화할 수 있습니다. 별과 은하의 이미지는 NASA 웹사이트에 실린 실제 사진을 사용했으며 별에 대한 설명은 Wikipedia에서 가져왔습니다.
나는 당신에게 즉시 경고합니다. 많은 일이있는 사람들의 경우이 사업을 근무 시간에 포함시키지 않는 것이 좋습니다. 막힐 위험이 있습니다! ;)
(또한 크롬이 아닌 브라우저는 이 애플리케이션에서 분명히 느린 것 같았습니다. 그래서 여기에 있습니다.)
Universe가 있는 창이 로드되면 다음과 같이 표시됩니다.
시각화 센터는 태양에 위치합니다. 마우스 스크롤(또는 오른쪽의 슬라이더)로 눈금을 변경하여 별을 명상할 수 있습니다. 
처음부터(왼쪽 상단 모서리에서) 친숙화 모드를 켜도 마찬가지입니다. 우주가 회전하고 태양이 접근하고 설명적인 "카트"가 나타날 것입니다.
친숙 모드에서 추가 검토의 프레임 중 하나: 
소개 3D 쇼의 또 다른 장면. 언제든지 화면 하단의 외래어 "중지"를 눌러 "쇼"를 일시 중지할 수 있습니다. 
어느 단계에서나 스크린 공간은 뒤틀릴 수 있습니다. 다른 측면마우스로 "잡아".
왼쪽 상단 모서리에는 별의 "스펙트럼 분석" 색상으로 전환하는 스위치도 있습니다. 다음과 같이 보입니다. 
물론 언제든지 원래 보기로 돌아갈 수 있습니다.
특정 규모에서 이름은 별 근처에 나타나며 클릭하기 쉽습니다. 별의 이름을 클릭하면 별이 어떻게 우리에게 빠르게 접근하고 맥동을 일으키며 과시하는지 볼 수 있으며 Wikipedia에서 발췌한 내용이 화면 왼쪽에 나타납니다. 
동시에 이 별은 이제 화면 별 공간의 중심이며 우주는 마우스를 사용하여 상대적으로 "비틀고 회전"해야 합니다. 좌표 중심을 다시 태양으로 전환하려면 이미 익숙한 왼쪽 상단 모서리에 해당 버튼이 나타납니다.
지각을 높이려면 (또는 가상 여행) 여기에 내가 좋아하는 "테마" 클립을 추가하겠습니다.
마이클 장, Google 팀 HTML5rocks 웹사이트에서 Chrome 실험의 끝, 가장 가까운 별 "100,000 Stars"의 시각화에 대한 흥미로운 기사를 작성했습니다. 프로젝트는 THREE.js와 CSS3D로 개발되었습니다. 그는 프로젝트의 일부, 셰이더 관리 및 사용 방법을 설명했습니다. CSS 텍스트 WebGL과 결합됩니다.
데모
이 기사를 쓰는 목적은 러시아어를 구사하는 인터넷 사용자에게 현대 웹 기술의 가능성을 보여주는 것입니다. 이 경우 THREE.js는 은하수에 있는 가까운 별을 시각화하는 데 사용됩니다. 이 글을 쓰는 시점에서 WebGL 기술은 구글 크롬에서만 제대로 지원됩니다!
우주
Globus가 완성된 후 THREE.js로 실험을 진행했습니다. 장면의 스케일을 변경하고 효과 수를 늘릴 수 있음이 밝혀졌습니다.
피사계 심도가 정말 극단적이면 멀리 있는 물체가 실제로 흐릿해집니다. 마치 틸트 시프트 사진이 미세한 장면을 보는 듯한 착각을 불러일으키는 것처럼 말입니다. 기울이면 마치 깊은 우주를 들여다보는 듯한 효과를 줍니다.
장면에 별을 배치하기 위해 astronexus.com 천문학 데이터베이스가 사용되었습니다.
첫 번째 단계는 카탈로그의 각 별을 단일 입자로 배치하는 것입니다. 카탈로그의 일부 별에는 여기에 표시된 고유한 이름이 있습니다.
세트에 정확히 119617개의 별이 있지만 3D 공간에서 천문학 데이터의 별을 배치하는 데 오랜 시간이 걸리지 않았습니다. 비디오 카드 GPU어렵지 않았다. 개별적으로 정의된 별의 경우 지구본과 동일한 방법으로 CSS 오버레이가 사용됩니다.
은하의 창조
내 생각에 Michael은 은하수의 멋진 전망과 함께 은하의 모델을 생성하는 데 성공했습니다.
은하계 입자의 원형
은하수를 형성하기 위해 100,000개의 입자가 추가되어 나선형으로 배치됩니다.
많은 사람들이 입자를 은하의 평면 표현으로 입자를 사용하여 은하수를 형성하고 은하수를 보다 사실적으로 보이게 하려고 시도했습니다.
지구에서 약 7천만 광년 떨어진 나선은하 NGC 1232B의 이미지.
각 GL 단위는 광년입니다. 이 경우 구의 너비는 110,000광년입니다.
- 하나의 GL 블록은 1광년과 같은 3D의 픽셀입니다.
먼저 카메라를 이동하는 대신 은하계 장면 자체를 회전하기로 결정했습니다. 그러나 확대하고 바람개비에 무엇이 있는지 확인해야 하므로 마우스로 왼쪽과 오른쪽으로 드래그하고 개체를 회전하고 확대/축소는 단지 camera.position.z를 변경하는 문제입니다.
프로토타입 입자와 비교하면 입자가 평면 이미지를 동반합니다.
이 단계에서 가시화를 위한 반지름과 비교하여 태양계의 상대적인 크기를 상상할 수 있고, Oort Cloud를 태양계의 모델로 선택하고, 지구의 단순화된 궤도를 시각화할 수도 있으며, 실제 비교하여 태양의 반경.
태양의 궤도와 구의 행성은 카이퍼 벨트를 나타냅니다.
태양은 만들기 어려웠다. 태양의 표면은 뜨거운 헬륨 플라즈마로 시간이 지남에 따라 변화하는 운동량이 필요합니다. 태양 표면의 적외선 이미지는 래스터 텍스처를 사용하여 모델링되었습니다. 표면 셰이더는 이 텍스처의 회색조를 기반으로 색상을 렌더링하고 별도의 색상 램프에서 모양을 렌더링합니다. 이 활동이 시간이 지남에 따라 바뀌면 이러한 용암과 같은 왜곡이 생성됩니다.
태양의 코로나에도 유사한 기술이 사용되었습니다. 단, THREE.Gyroscope(); .
태양 플레어는 셰이더를 사용하여 생성되었으며 태양 표면의 가장자리를 따라 회전합니다. 노이즈 기능이 있는 셰이더.
여기에 GL 정확도에 대한 몇 가지 질문이 있습니다. 정확도를 위한 모든 변수는 THREE.js에 미리 정의되어 있었는데, 다른 성계를 모델링할 때 정확도를 높이려면 많은 노력이 필요했습니다.
태양과 다른 별들을 위한 코드.
Material.polygonoffset 을 부드럽게 만드는 데 사용한 몇 가지 해킹이 있었습니다. 이것은 평면이 태양 표면의 상단에 있도록 강제하고 구에서 오는 광선을 실현하는 데 사용되었습니다.
또 다른 문제는 장면을 확대할 때 별 모델이 흔들리기 시작한다는 점에서 정확성에 있습니다. 이 문제를 해결하기 위해 회전 장면을 "0"으로 만들고 별 지도 모델을 별도로 회전해야 했습니다. 환경당신이 별을보고 있다는 환상을주기 위해.
하이라이트 구현
LensFlare를 사용한 공간 시각화. THREE.LensFlare는 이 목적을 위한 것이므로 장면에 추가하기만 하면 됩니다.
// 이 함수는 장면 그래프에 .add()될 lesnflare THREE 객체를 반환합니다. function 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, THREE.AdditiveBlending ); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 512, .0.0, THREE); lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position = new THREE.Vector3(x,y,z); lensFlare.size = size ? size: 16000 ; return lensFlare; ) // 이 함수는 각각에 대해 작동합니다 lensflare 아티팩트, 화면 주위로 이동 function lensFlareUpdateCallback(object) ( var f, fl = this.lensFlares.leng 일; var 플레어; var vecX = -this.positionScreen.x * 2; var vecY = -this.positionScreen.y * 2; varsize = object.size ? 개체 크기: 16000; var camDistance = 카메라.위치.길이(); for(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 = new THREE.ShaderMaterial(( 유니폼: datastarUniforms, 속성: datastarAttributes, /* ... etc */ )); var datastarAttributes = ( 크기: ( 유형: "f", 값: ), colorIndex: ( 유형: "f", 값: ), );
각 입자가 고유한 색상을 갖도록 ColorIndex 배열을 채웁니다.
별 색상 판독값에서 올바른 색상을 찾기 위한 색상 눈금.
JavaScript로 비트맵 색상 데이터에 액세스합니다. 먼저 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 = function(percentage)( return this.getContext("2d").getImageData(percentage * gradientImage.width,0, 1, 1).data ; )
이 방법은 별 모델의 개별 별을 색칠하는 데에도 사용됩니다.
동일한 기술을 사용하여 별의 분광 등급에 대한 색상 검색을 수행합니다.
셰이더 수
프로젝트는 모든 작업을 수행하기 위해 많은 셰이더를 사용합니다. 시각 효과그래서 Michael Chang이 셰이더 로더를 작성했습니다.
// 로드할 셰이더 목록 var shaderList = ["shaders/starsurface", "shaders/starhalo", "shaders/starflare", "shaders/galacticstars", /*...etc...*/]; // 모든 셰이더를 미리 가져와 데이터 구조에 넣는 작은 유틸리티(위 목록 대체) function loadShaders(list, callback)( var shaders = (); var expectedFiles = list.length * 2; var loadedFiles = 0; function makeCallback(name, type)( return function(data)( if(shaders === undefined)( shaders = (); ) shaders = data; // 완료되었는지 확인 loadFiles++; if(loadedFiles == expectedFiles)( 콜백(셰이더); ) ); ) for(var i=0; i LoadShaders()는 셰이더 파일 이름 목록을 가져와서 해당 데이터를 로드한 다음 단순히 목록을 객체로 대체합니다. 결과적으로 THREE.js 형식에서 다음과 같이 셰이더를 전달할 수 있습니다. Var galacticShaderMaterial = new THREE.ShaderMaterial(( vertexShader: shaderList.galacticstars.vertex, fragmentShader: shaderList.galacticstars.fragment, /*...*/ )); Globe 프로젝트는 THREE.js 장면의 맨 위에 텍스트 레이블을 표시합니다. THREE.Projector()는 화면의 올바른 위치에 레이블을 표시하고 올바른 위치에 CSS 테이블로 마크업을 표시하는 데 사용되었습니다. CSS3D는 소스 코드를 보기 위해 WebGL 위에 텍스트를 배치합니다. THREE.js 행렬 함수를 업데이트합니다. /* WebGL 좌표와 CSS 좌표 간의 차이를 수정합니다. */ function toCSSMatrix(threeMat4, b) ( var a = threeMat4, f; if (b) ( f = [ a.elements, -a.elements, a.elements, a .elements, a.elements, -a.elements, a.elements, a.elements, a.elements, -a.elements, a.elements, a.elements, a.elements, -a.elements, a.elements, a.elements]; ) else ( f = [ a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements , a.elements, a.elements, a.elements, a.elements, a.elements, a.elements ]; ) for (var e in f) ( f[e] = epsilon(f[e]); ) 반환 "matrix3d(" + f.join(",") + ")"; ) 이제 텍스트가 더 이상 카메라 앞에 나타나지 않습니다. 이를 위해 THREE.Gyroscope() 를 사용하여 장면에서 상속하여 Object3D가 방향을 잃게 합니다. 이 기술을 "빌보딩"이라고 하며 자이로스코프가 이에 적합합니다. 오디오 태그를 사용하여 음악을 재생했지만 Chrome에서도 신뢰할 수 없습니다. 때로는 반복되지 않는 경우도 있습니다. 이 이중 오디오 태그 해킹이 끝나면 재생의 끝을 확인하고 게임의 다른 태그로 순환하는 데 사용됩니다. 실망스러웠던 점은 *아직* 항상 완벽한 사이클이 아니었다는 것입니다. 슬프게도 그것이 내가 할 수 있는 최선인 것 같습니다. 아마도 곧 Googlemap에서 우리는 지구의 3D 지도뿐만 아니라 우리 은하의 지도도 보게 될 것이며 화성에서 금성까지의 짧은 길을 열어줄 것입니다 :-D. 최신 웹 기술은 우주 게임뿐만 아니라 브라우저에서도 이를 가능하게 합니다.THREE.JS 상단의 CSS 및 캡션
카메라를 THREE.Gyroscope()에 연결하면 항상 카메라에서 마크가 삭제됩니다. 소리
var musicA = document.getElementById("bgmusicA"); var musicB = document.getElementById("bgmusicB"); musicA.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playB = function()( musicB.play(); ) // 다시 재생하기 전에 15초 동안 기다리게 합니다. setTimeout( 플레이B, 15000); ), 거짓); musicB.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // 그렇지 않으면 음악이 당신을 미치게 할 것입니다. setTimeout(playA , 15000), ), 거짓); // 알겠습니다. 약간의 코드 중복성이 있습니다. 인정합니다 musicA.play(); 드디어