-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebgl_shaders_sky.html
executable file
·130 lines (88 loc) · 2.98 KB
/
webgl_shaders_sky.html
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - shaders - sky sun shader</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="js/boydAlgo.js"></script>
<script src="obj/Bird.js"></script>
<script src="js/THREExKeyboardState.js"></script>
<script src="obj/Sky.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
</style>
</head>
<body>
<div id="GameContainer"></div>
<script>
////////////// Main //////////////
/* Setup scene */
/* Add objects */
/* Kickoff tick() function */
var container, scene, camera, renderer, sky, sunSphere, allBugs=[], allBuildings=[], buildingBounds=[];
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
init();
var movingCube;
// var buildings = addBuildings();
// var bugs = addBugs();
// var cube = addCube();
// var ground = addGround();
var score = 0;
var birdQuantity = 100;
// var sky = initSky();
// var addBirds();
// init();
render();
function initSky() {
// Add Sky
sky = new THREE.Sky();
sky.scale.setScalar( 450000 );
scene.add( sky );
// Add Sun Helper
sunSphere = new THREE.Mesh(
new THREE.SphereBufferGeometry( 20000, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff } )
);
sunSphere.position.y = - 700000;
sunSphere.visible = false;
scene.add( sunSphere );
/// GUI
var uniforms = sky.material.uniforms;
uniforms.turbidity.value = 10;
uniforms.rayleigh.value = 2;
uniforms.luminance.value = 1;
uniforms.mieCoefficient.value = 0.005;
uniforms.mieDirectionalG.value = 0.8;
var theta = Math.PI * ( 0.49 - 0.5 );
var phi = 2 * Math.PI * ( 0.25 - 0.5 );
sunSphere.position.x = 400000 * Math.cos( phi );
sunSphere.position.y = 400000 * Math.sin( phi ) * Math.sin( theta );
sunSphere.position.z = 400000 * Math.sin( phi ) * Math.cos( theta );
sunSphere.visible = ! true;
uniforms.sunPosition.value.copy( sunSphere.position );
};
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
camera.position.set( 0, 100, 2000 );
//camera.setLens(20);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
initSky();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>