Terrain.js

Terrain.js

var Terrain = pc.createScript('terrain');

Terrain.attributes.add('map', { type: 'asset', assetType: 'texture' });
Terrain.attributes.add('red', { type: 'asset', assetType: 'texture' });
Terrain.attributes.add('green', { type: 'asset', assetType: 'texture' });
Terrain.attributes.add('blue', { type: 'asset', assetType: 'texture' });
Terrain.attributes.add('foam', { type: 'asset', assetType: 'texture' });

Terrain.attributes.add('noise', { 
    type : 'asset', 
    assetType : 'texture'
});

Terrain.attributes.add('redScale', { type: 'vec2', default : [1, 1] });
Terrain.attributes.add('greenScale', { type: 'vec2', default : [1, 1] });
Terrain.attributes.add('blueScale', { type: 'vec2', default : [1, 1] });

Terrain.attributes.add('speed', { type: 'number', default : 0.1 });
Terrain.attributes.add('multiplier', { type: 'number', default : 3 });
Terrain.attributes.add('textureSize', { type: 'number', default : 0.1 });

Terrain.prototype.initialize = function() {
    var self     = this;
    
    this.currentLoaded = 0;
    this.time = -2;
    
    this.app.assets.load(this.map);
    this.app.assets.load(this.red);
    this.app.assets.load(this.green);
    this.app.assets.load(this.blue);
    
    this.map.ready(function(){ self.upload(); });
    this.red.ready(function(){ self.upload(); });
    this.green.ready(function(){ self.upload(); });
    this.blue.ready(function(){ self.upload(); });
    
    this.shader='';
    this.shader+='#ifdef MAPCOLOR\n';
    this.shader+='uniform vec3 material_diffuse;\n';
    this.shader+='#endif\n';
    this.shader+='\n';
    this.shader+='#ifdef MAPTEXTURE\n';
    this.shader+='uniform sampler2D texture_diffuseMap;\n';
    this.shader+='#endif\n';
    this.shader+='\n';
    this.shader+='uniform sampler2D mapTexture;\n';
    this.shader+='uniform sampler2D redTexture;\n';
    this.shader+='uniform sampler2D blueTexture;\n';
    this.shader+='uniform sampler2D greenTexture;\n';
    this.shader+='uniform sampler2D foamTexture;\n';
    this.shader+='\n';
    this.shader+='uniform vec2 redScale;\n';
    this.shader+='uniform vec2 blueScale;\n';
    this.shader+='uniform vec2 greenScale;\n';
    
    this.shader+='uniform float time;';
    this.shader+='uniform float multiplier;';
    this.shader+='uniform float textureSize;';
    this.shader+='uniform sampler2D noise;';
    this.shader+='varying float noiseColor;';

    
    this.shader+='void getAlbedo() {\n';
    this.shader+='    dAlbedo = vec3(1.0);\n';
    this.shader+='    \n';
    this.shader+='    vec3 baseTexture = texture2DSRGB(mapTexture, $UV).$CH;\n';
    this.shader+='    vec3 foamMap = texture2DSRGB(foamTexture, $UV * 90.0).$CH;\n';
    this.shader+='    \n';
    this.shader+='    vec3 red   = texture2DSRGB(redTexture, $UV * redScale).$CH;\n';
    this.shader+='    vec3 blue  = texture2DSRGB(blueTexture, $UV * blueScale).$CH;\n';
    this.shader+='    vec3 green = texture2DSRGB(greenTexture, $UV * greenScale).$CH;\n';
    this.shader+='    \n';
    this.shader+='    dAlbedo = red * baseTexture.r + green * baseTexture.g +';
    this.shader+='    blue * baseTexture.b;\n';
    
    this.shader+='    vec2 noiseVector = vec2(($UV.x + time) * textureSize, ';
    this.shader+='    ($UV.y + time) * textureSize);';
    
    this.shader+='    float noiseColor  = texture2D(noise, noiseVector).r;';
    this.shader+='    float noiseHeight = noiseColor * multiplier;\n';
    this.shader+='    float height = noiseHeight * noiseHeight * foamMap.r;\n';
    
    this.shader+='    if(vPositionW.y < -10.5 + height){\n';
    this.shader+='    dAlbedo*=(0.05 - max(height / 10.0, 1.0) * 0.55) - height * 0.55;\n';
    this.shader+='    }\n';
    
    this.shader+='    \n';
    this.shader+='    #ifdef MAPVERTEX\n';
    this.shader+='        dAlbedo *= gammaCorrectInput(saturate(vVertexColor.$VC));\n';
    this.shader+='    #endif\n';
    this.shader+='}\n';
};

Terrain.prototype.upload = function() {
    this.currentLoaded++;
    
    if(this.currentLoaded < 3){
        return false;
    }
    
    var model    = this.entity.model.model;
    var material = model.meshInstances[0].material;
    
    material.setParameter('mapTexture', this.map.resource);
    material.setParameter('blueTexture', this.blue.resource);
    material.setParameter('redTexture', this.red.resource);
    material.setParameter('greenTexture', this.green.resource);
    
    material.setParameter('foamTexture', this.foam.resource);
    
    material.setParameter('redScale', [this.redScale.x, this.redScale.y]);
    material.setParameter('greenScale', [this.greenScale.x, this.greenScale.y]);
    material.setParameter('blueScale', [this.blueScale.x, this.blueScale.y]);
    
    material.setParameter('noise', this.noise.resource);
    material.setParameter('time', this.time);
    
    material.setParameter(
        'multiplier', this.multiplier
    );
    
    material.setParameter(
        'textureSize', this.textureSize
    );
    
    material.chunks.diffusePS = this.shader;
    material.update();
    
    this.material = material;
};

Terrain.prototype.update = function(dt) {
    if(this.currentLoaded < 3){
        return false;
    }
    
    this.material.setParameter('time', this.time);
    this.material.update();
    
    this.time+=this.speed * dt;
};