Night Sky in VR Tutorial
Night Sky in VR
Today we’ll see how to create night sky in VR complete with a shooting star. We’ll be using similar particle technique we used in raining in VR tutorial. However, we’ll also supplement it with GPUParticleSystem to create more particles with GPU power!
This is part of #DaysInVR series. View All VR Projects
Yesterday, we learnt how to create public speaking VR with teleprompter.
Join 6000+ Students
Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.
Start Learning Now
Get your Free Lesson now.
Adding stars to our scene
We’re going to create a geometry with different vertices and then draw points in those places. This will act as our stars. We’ll use PointsMaterial and Points to create our stars.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
for (var i = 0; i < 200000; i++) { var vertex = new THREE.Vector3(); vertex.x = Math.random() * 2000 - 1000; vertex.y = Math.random() * 2000 - 1000; vertex.z = -(Math.random() * 1000000 - 1000); geometry.vertices.push(vertex); } //Setting the material of our points to be white var material = new THREE.PointsMaterial({ color: 'white' }); var particles = new THREE.Points(geometry, material); |
Once we add particles to our scene, we’ll able to view the stars. You can try to move around the geometry or camera to create travelling through space effect.
Adding shooting star
We’ll be using GPUParticleSystem to generate a huge number of particles using GPU. We have to provide options to GPUParticleSystem to specify how the particles will be generated.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var options = { position: new THREE.Vector3(), positionRandomness: .3, velocity: new THREE.Vector3(), velocityRandomness: .5, color: 0xaa88ff, colorRandomness: .2, turbulence: .5, lifetime: 2, size: 5, sizeRandomness: 1 }; |
Inside our animate function, we’ll set the position of the particles to move the group like a shooting star.
|
1 2 3 |
if (tick < 0) tick = 0; if (delta > 0) { options.position.x = Math.sin(tick * spawnerOptions.horizontalSpeed) * 20; options.position.y = Math.sin(tick * spawnerOptions.verticalSpeed) * 10; options.position.z = Math.sin(tick * spawnerOptions.horizontalSpeed + spawnerOptions.verticalSpeed) * 5; for (var x = 0; x < spawnerOptions.spawnRate * delta; x++) { // Yep, that's really it. Spawning particles is super cheap, and once you spawn them, the rest of // their lifecycle is handled entirely on the GPU, driven by a time uniform updated below particleSystem.spawnParticle(options); } } |
Download Source Code
Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.
Download Source Code
Get your Free Lesson now.
Leave a Reply