Birds in VR tutorial – Custom Geometry in WebVR
Using Custom Geometry in WebVR to add birds in 360
In this tutorial, we’ll create a custom birds geometry to create birds in webVR. We’ll add our birds to our 360 photo.
This is part of #DaysInVR series. View All VR Projects. Yesterday we learnt how to add lensflare in VR. Today we’ll see how to use custom geometry in webvr to add birds to our scene.
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.
360 photo in VR
We’ll create a SphereGeometry and MeshBasicMaterial to add our 360 photo to our scene.
|
1 2 3 4 5 6 7 |
var texture = new THREE.TextureLoader().load('pano.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, controls.userHeight, -1); scene.add(mesh); |
Custom geometry for birds
We’ll use a custom geometry to define our bird. This geometry is responsible for keeping the shape of the bird.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
THREE.BirdGeometry = function () { var triangles = BIRDS * 3; var points = triangles * 3; THREE.BufferGeometry.call( this ); var vertices = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 ); var birdColors = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 ); var references = new THREE.BufferAttribute( new Float32Array( points * 2 ), 2 ); var birdVertex = new THREE.BufferAttribute( new Float32Array( points ), 1 ); this.addAttribute( 'position', vertices ); this.addAttribute( 'birdColor', birdColors ); this.addAttribute( 'reference', references ); this.addAttribute( 'birdVertex', birdVertex ); // this.addAttribute( 'normal', new Float32Array( points * 3 ), 3 ); var v = 0; function verts_push() { for (var i=0; i < arguments.length; i++) { vertices.array[v++] = arguments[i]; } } var wingsSpan = 20; for (var f = 0; f<BIRDS; f++ ) { // Body verts_push( 0, -0, -20, 0, 4, -20, 0, 0, 30 ); // Left Wing verts_push( 0, 0, -15, -wingsSpan, 0, 0, 0, 0, 15 ); // Right Wing verts_push( 0, 0, 15, wingsSpan, 0, 0, 0, 0, -15 ); } for( var v = 0; v < triangles * 3; v++ ) { var i = ~~(v / 3); var x = (i % WIDTH) / WIDTH; var y = ~~(i / WIDTH) / WIDTH; var c = new THREE.Color( 0x444444 + ~~(v / 9) / BIRDS * 0x666666 ); birdColors.array[ v * 3 + 0 ] = c.r; birdColors.array[ v * 3 + 1 ] = c.g; birdColors.array[ v * 3 + 2 ] = c.b; references.array[ v * 2 ] = x; references.array[ v * 2 + 1 ] = y; birdVertex.array[ v ] = v % 9; } this.scale( 0.2, 0.2, 0.2 ); }; |
We have seen how to add shaders in webvr. We’ll be using shaders to create the material for the birds. You can check the source to see how the shaders are created. You can also check the threejs example. What we have created here is the VR version of the example in our 360 environment.
We’ll use the custom geometry and ShaderMaterial to create our birds mesh.
|
1 2 3 4 5 6 7 8 9 10 |
var geometry = new THREE.BirdGeometry(); var material = new THREE.ShaderMaterial( { uniforms: birdUniforms, vertexShader: document.getElementById( 'birdVS' ).textContent, fragmentShader: document.getElementById( 'birdFS' ).textContent, side: THREE.DoubleSide }); birdMesh = new THREE.Mesh( geometry, material ); |
Its your turn
See if you can recreate the birds on a 360 video. You can see our tutorial on how to create 360 videos in VR as a guide. Once you have created it, don’t forget to share a link to it in the comments below.
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