Skip to content

Commit 1b4d7c2

Browse files
michaljazmichaljaz
committed
Skybox
1 parent 9228892 commit 1b4d7c2

File tree

6 files changed

+84
-64
lines changed

6 files changed

+84
-64
lines changed

‎src/client/assets/images/skybox.jpg‎

-9.72 KB
Loading

‎src/client/html/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h1 class="loadingText">Loading assets...</h1>
4848
<div class="col-1 col-md-2 col-lg-3 col-xl-4"></div>
4949
<div class="col-10 col-md-8 col-lg-6 col-xl-4">
5050
<h3>Game menu</h3>
51-
<button class="gameOn btn btn-secondary w-100">
51+
<button class="mt-3 gameOn btn btn-secondary w-100">
5252
Back to game
5353
</button>
5454
<div class="row mt-3">

‎src/client/scripts/DistanceBasedFog.coffee‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as THREE from "three"
2+
3+
class DistanceBasedFog
4+
constructor:(options)->
5+
@view=new THREE.Vector3
6+
@farnear=new THREE.Vector2
7+
@color=new THREE.Vector4
8+
return
9+
addShaderToMaterial:(material)->
10+
_this=@
11+
material.onBeforeCompile=(shader)->
12+
shader.uniforms.u_viewPos={value:_this.view}
13+
shader.uniforms.u_fogColor={value:_this.color}
14+
shader.uniforms.u_farnear={value:_this.farnear}
15+
16+
shader.fragmentShader=[
17+
"uniform vec3 u_viewPos;"
18+
"uniform vec4 u_fogColor;"
19+
"uniform vec2 u_farnear;"
20+
shader.fragmentShader
21+
].join("\n")
22+
23+
shader.fragmentShader=shader.fragmentShader.replace(
24+
"gl_FragColor = vec4( outgoingLight, diffuseColor.a );"
25+
[
26+
"float dist=length(u_viewPos-vViewPosition);"
27+
"float fogAmount = smoothstep(u_farnear.x, u_farnear.y, dist);"
28+
"gl_FragColor = vec4( outgoingLight, diffuseColor.a );"
29+
"gl_FragColor = mix(gl_FragColor,u_fogColor,max(0.1,fogAmount));"
30+
].join("\n")
31+
)
32+
33+
shader.vertexShader=[
34+
"uniform float time;"
35+
"uniform mat4 u_worldView;"
36+
"attribute vec4 a_position;"
37+
shader.vertexShader
38+
].join("\n")
39+
40+
shader.vertexShader=shader.vertexShader.replace(
41+
"#include <fog_vertex>"
42+
[
43+
"vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1);"
44+
"vViewPosition = vViewPosition4.xyz;"
45+
].join("\n")
46+
)
47+
return
48+
return
49+
export {DistanceBasedFog}

‎src/client/scripts/Entities.coffee‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import * as THREE from 'three'
22
class Entities
33
constructor:(game)->
44
@game=game
5-
@mobMaterial = new THREE.MeshBasicMaterial {color: new THREE.Color "red" }
5+
@material = new THREE.MeshStandardMaterial {
6+
color: new THREE.Color "red"
7+
}
68
@mobGeometry = new THREE.BoxGeometry 1, 1, 1
79
@mobMaxCount=200
8-
@mobMesh=new THREE.InstancedMesh @mobGeometry,@mobMaterial,@mobMaxCount
10+
@mobMesh=new THREE.InstancedMesh @mobGeometry,@material,@mobMaxCount
911
@mobMesh.instanceMatrix.setUsage THREE.DynamicDrawUsage
1012
@game.scene.add @mobMesh
1113
@dummy = new THREE.Object3D()

‎src/client/scripts/World/AnimatedTextureAtlas.coffee‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -75,52 +75,6 @@ class AnimatedTextureAtlas
7575
vertexColors:true
7676
transparent:true
7777
})
78-
@uni=
79-
view:new THREE.Vector3
80-
farnear:new THREE.Vector2
81-
color:new THREE.Vector4
82-
@material.onBeforeCompile=(shader)->
83-
84-
#Uniforms
85-
shader.uniforms.u_viewPos={value:_this.uni.view}
86-
shader.uniforms.u_fogColor={value:_this.uni.color}
87-
shader.uniforms.u_farnear={value:_this.uni.farnear}
88-
#Fragment shader
89-
shader.fragmentShader=[
90-
"uniform vec3 u_viewPos;"
91-
"uniform vec4 u_fogColor;"
92-
"uniform float u_fogNear;"
93-
"uniform float u_fogFar;"
94-
"uniform vec2 u_farnear;"
95-
shader.fragmentShader
96-
].join("\n")
97-
# # shader.fragmentShader="uniform vec4 fogColor;\nuniform float fogAmount;\n"+shader.fragmentShader
98-
shader.fragmentShader=shader.fragmentShader.replace(
99-
"gl_FragColor = vec4( outgoingLight, diffuseColor.a );"
100-
[
101-
"float dist=length(u_viewPos-vViewPosition);"
102-
"float fogAmount = smoothstep(u_farnear.x, u_farnear.y, dist);"
103-
"gl_FragColor = vec4( outgoingLight, diffuseColor.a );"
104-
"gl_FragColor = mix(gl_FragColor,u_fogColor,max(0.1,fogAmount));"
105-
].join("\n")
106-
)
107-
108-
#Vertex shader
109-
shader.vertexShader=[
110-
"uniform float time;"
111-
"uniform mat4 u_worldView;"
112-
"attribute vec4 a_position;"
113-
shader.vertexShader
114-
].join("\n")
115-
shader.vertexShader=shader.vertexShader.replace(
116-
"#include <fog_vertex>"
117-
[
118-
"vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1);"
119-
"vViewPosition = vViewPosition4.xyz;"
120-
].join("\n")
121-
122-
)
123-
return
12478
@atlasCreator=new TextureAtlasCreator({
12579
textureX:@game.al.get "blocksAtlasFull"
12680
textureMapping:@game.al.get "blocksMappingFull"

‎src/client/scripts/index.coffee‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {Entities} from "./Entities.coffee"
1515
import {PlayerInInventory} from "./PlayerInInventory.coffee"
1616
import {BlockBreak} from "./BlockBreak.coffee"
1717
import {BlockPlace} from "./BlockPlace.coffee"
18+
import {DistanceBasedFog} from "./DistanceBasedFog.coffee"
1819

1920
class Game
2021
constructor:(options)->
@@ -43,13 +44,22 @@ class Game
4344
@renderer.sortObjects=true
4445
@scene=new THREE.Scene
4546
@dimBg=
46-
"minecraft:overworld":[173/255, 200/255, 255/255]
47+
48+
"minecraft:overworld":[165/255, 192/255, 254/255]
4749
"minecraft:the_end":[1/255, 20/255, 51/255]
4850
"minecraft:the_nether":[133/255, 40/255, 15/255]
4951
@camera = new THREE.PerspectiveCamera @fov, 2, 0.1, 1000
5052
@camera.rotation.order = "YXZ"
5153
@camera.position.set 26, 26, 26
5254
@scene.add new THREE.AmbientLight 0xffffff
55+
loader = new THREE.TextureLoader()
56+
texture = loader.load('assets/images/skybox.jpg',()->
57+
rt = new THREE.WebGLCubeRenderTarget(texture.image.height)
58+
rt.fromEquirectangularTexture(_this.renderer, texture)
59+
_this.rt = rt
60+
return
61+
)
62+
@distanceBasedFog=new DistanceBasedFog
5363
console.warn gpuInfo()
5464

5565
@nick=document.location.hash.substring 1,document.location.hash.length
@@ -68,14 +78,16 @@ class Game
6878
document.body.appendChild @stats.dom
6979

7080
@pii=new PlayerInInventory @
71-
@ent=new Entities @
7281
@bb=new BlockBreak @
7382
@bp=new BlockPlace @
7483
@world=new World @
84+
@ent=new Entities @
7585
@chat=new Chat @
76-
@inv_bar = new InventoryBar @
77-
@FPC = new FirstPersonControls @
78-
86+
@inv_bar=new InventoryBar @
87+
@FPC=new FirstPersonControls @
88+
@distanceBasedFog.addShaderToMaterial @world.material
89+
# @distanceBasedFog.addShaderToMaterial @ent.mobMaterial
90+
# console.log @ent.mobMaterial
7991
eventMap={
8092
"connect":()->
8193
console.log "Connected to server!"
@@ -98,11 +110,14 @@ class Game
98110
console.log "Player dimension has been changed: #{dim}"
99111
_this.world.resetWorld()
100112
bg=_this.dimBg[dim]
101-
_this.scene.background=new THREE.Color bg...
102-
_this.world.ATA.uni.color.x=bg[0]
103-
_this.world.ATA.uni.color.y=bg[1]
104-
_this.world.ATA.uni.color.z=bg[2]
105-
_this.world.ATA.uni.color.w=1
113+
if dim is "minecraft:overworld"
114+
_this.scene.background=_this.rt
115+
else
116+
_this.scene.background=new THREE.Color bg...
117+
_this.distanceBasedFog.color.x=bg[0]
118+
_this.distanceBasedFog.color.y=bg[1]
119+
_this.distanceBasedFog.color.z=bg[2]
120+
_this.distanceBasedFog.color.w=1
106121
return
107122
"mapChunk":(sections,x,z,biomes,dim)->
108123
_this.world._computeSections sections,x,z,biomes,dim
@@ -157,13 +172,13 @@ class Game
157172
gui = new dat.GUI
158173
@params=
159174
chunkdist:3
160-
@world.ATA.uni.farnear.x=(@params.chunkdist-1.5)*16
161-
@world.ATA.uni.farnear.y=(@params.chunkdist-0.5)*16
175+
@distanceBasedFog.farnear.x=(@params.chunkdist-1)*16
176+
@distanceBasedFog.farnear.y=(@params.chunkdist)*16
162177
gui.add( @world.material, "wireframe" ).name( "Wireframe" ).listen()
163178
chunkDist=gui.add( @params, "chunkdist",0,10,1).name( "Render distance" ).listen()
164179
chunkDist.onChange (val)->
165-
_this.world.ATA.uni.farnear.x=(val-1.5)*16
166-
_this.world.ATA.uni.farnear.y=(val-0.5)*16
180+
_this.distanceBasedFog.farnear.x=(val-1)*16
181+
_this.distanceBasedFog.farnear.y=(val)*16
167182
console.log val
168183
return
169184
@mouse=false
@@ -211,7 +226,7 @@ class Game
211226
if @FPC.gameState is "inventory"
212227
@pii.render()
213228
@inv_bar.tick()
214-
@world.ATA.uni.view.copy(@camera.position).applyMatrix4(@camera.matrixWorldInverse)
229+
@distanceBasedFog.view.copy(@camera.position).applyMatrix4(@camera.matrixWorldInverse)
215230
@renderer.render @scene, @camera
216231
return
217232
new Game()

0 commit comments

Comments
 (0)