Mercurialwebgl_part2_sky / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | raw | help
main.js
author Florian Boesch <pyalot@gmail.com>
Mon, 18 Apr 2011 14:06:37 +0000
changeset 4 174c42423100
parent 0 0ce4d14393c2
child 5 b79966b55f5b
permissions -rw-r--r--
removed an obsolete smoothstep 
     1 /*
     2     :copyright: 2011 by Florian Boesch <pyalot@gmail.com>.
     3     :license: GNU AGPL3, see LICENSE for more details.
     4 */
     5 $(function(){
     6     var canvas = $('canvas')[0];
     7     var handlers = {
     8         error: function(glee, description, info){
     9             console.log(info);
    10             $(canvas).replaceWith($('<div class="error"></div>').append(description));
    11             census.error(glee, 'irradiance', info);
    12         },
    13         capabilities: function(glee, description, webgl){
    14             if(webgl){
    15                 census.capabilities(glee, 'irradiance');
    16             }
    17             else{
    18                 $(canvas).replaceWith($('<div class="error"></div>').append(description));
    19                 census.nowebgl('irradiance');
    20             }
    21         },
    22     };
    23     var glee = new Glee(canvas, handlers).requestExt('texture_float').load({
    24         sky: {
    25             scattering          : 'scattering.shader',
    26             cubemap_convolve    : 'cubemap_convolve.shader',
    27             downsample          : 'downsample.shader',
    28             elevation: 0.0,
    29             orientation: 0.0,
    30             init: function(){
    31                 var type = glee.texture_float ? glee.gl.FLOAT : glee.gl.UNSIGNED_BYTE;
    32 
    33                 this.fbo = new glee.FBO();
    34                 this.lightdir = new glee.Vec3();
    35                 this.lightMat = new glee.Mat3();
    36                 this.scattering = new glee.CubeProcessor({
    37                     type: type,
    38                     width: 128,
    39                     height: 128,
    40                     fbo: this.fbo,
    41                     shader: this.scattering,
    42                     uniforms: {
    43                         lightdir: this.lightdir,
    44                     }
    45                 });
    46                 this.level1 = new glee.CubeProcessor({
    47                     type: type,
    48                     width: 64,
    49                     height: 64,
    50                     fbo: this.fbo,
    51                     shader: this.downsample,
    52                     filter: glee.gl.NEAREST,
    53                     samplers: {
    54                         source: this.scattering.result
    55                     },
    56                 });
    57                 this.level2 = new glee.CubeProcessor({
    58                     type: type,
    59                     width: 32,
    60                     height: 32,
    61                     fbo: this.fbo,
    62                     shader: this.downsample,
    63                     filter: glee.gl.NEAREST,
    64                     samplers: {
    65                         source: this.level1.result
    66                     },
    67                 });
    68                 this.level3 = new glee.CubeProcessor({
    69                     type: type,
    70                     width: 16,
    71                     height: 16,
    72                     fbo: this.fbo,
    73                     shader: this.downsample,
    74                     filter: glee.gl.NEAREST,
    75                     samplers: {
    76                         source: this.level2.result
    77                     },
    78                 });
    79                 this.diffuse = new glee.CubeProcessor({
    80                     type: type,
    81                     width: 16,
    82                     height: 16,
    83                     fbo: this.fbo,
    84                     shader: this.cubemap_convolve,
    85                     uniforms: {
    86                         specularity: 1.0
    87                     },
    88                     samplers: {
    89                         source: this.level3.result
    90                     }
    91                 });
    92                 this.specular = new glee.CubeProcessor({
    93                     type: type,
    94                     width: 16,
    95                     height: 16,
    96                     fbo: this.fbo,
    97                     shader: this.cubemap_convolve,
    98                     uniforms: {
    99                         specularity: 6.0
   100                     },
   101                     samplers: {
   102                         source: this.level3.result
   103                     }
   104                 });
   105             },
   106             render: function(){
   107                 this.lightMat.ident().rotatex(this.elevation).rotatey(this.orientation);
   108                 this.lightdir.set(0, 1, 0).mul(this.lightMat);
   109 
   110                 this.scattering.render();
   111                 this.level1.render();
   112                 this.level2.render();
   113                 this.level3.render();
   114                 this.diffuse.render();
   115                 this.specular.render();
   116             },
   117         },
   118         cube_pass: 'cube_pass.shader',
   119         cube_lighting: 'cube_lighting.shader',
   120         bunny: 'bunny.vbo',
   121         dragon: 'dragon.vbo',
   122         onload: function(gl){
   123             glee.resize(500, 500);
   124             var sky = this.sky;
   125             sky.init();
   126             
   127             var picker = $.farbtastic('#color', function(color){
   128                 var r = parseInt(color.substr(1,2), 16)/255;
   129                 var g = parseInt(color.substr(3,2), 16)/255;
   130                 var b = parseInt(color.substr(5,2), 16)/255;
   131                 sky.scattering.uniforms.Kr = [r, g, b];
   132                 sky.render();
   133             });
   134             picker.setColor('#307fa9');
   135 
   136 
   137             var update_sky = function(){
   138                 sky.elevation = $('#elevation').val();
   139                 sky.orientation = $('#orientation').val();
   140                 sky.scattering.uniforms.rayleigh_brightness = $('#rayleigh').val()/10;
   141                 sky.scattering.uniforms.mie_brightness = $('#mie').val()/1000;
   142                 sky.scattering.uniforms.spot_brightness = Number($('#spot').val());
   143                 sky.scattering.uniforms.scatter_strength = $('#scatter_strength').val()/1000;
   144                 sky.scattering.uniforms.rayleigh_strength = $('#rayleigh_strength').val()/1000;
   145                 sky.scattering.uniforms.mie_strength = $('#mie_strength').val()/10000;
   146                 sky.scattering.uniforms.rayleigh_collection_power = $('#rayleigh_collected').val()/100;
   147                 sky.scattering.uniforms.mie_collection_power = $('#mie_collected').val()/100;
   148                 sky.scattering.uniforms.mie_distribution = $('#mie_distribution').val()/100;
   149                 sky.specular.uniforms.specularity = $('#specularity').val()/10;
   150 
   151                 sky.render();
   152             };
   153             $('.sky').change(update_sky);
   154             update_sky();
   155 
   156             $('#shading_mix').change(function(){
   157                 scene.uniforms.shading_mix = $(this).val()/100;
   158             });
   159             
   160             $('#reflectivity').change(function(){
   161                 scene.uniforms.reflectivity = $(this).val()/10;
   162             });
   163 
   164             $('#drawing').change(function(){
   165                 drawable = models[$(this).val()];
   166             });
   167 
   168             $('button').click(function(){
   169                 var data = {}
   170                 $.each(presets['earth'], function(name){
   171                     if(name == 'color'){
   172                         data[name] = picker.color;
   173                     }
   174                     else{
   175                         data[name] = Number($('#' + name).val());
   176                     }
   177                 });
   178                 console.log(JSON.stringify(data));
   179             });
   180 
   181             $('#preset').change(function(){
   182                 var preset = presets[$(this).val()];
   183                 $.each(preset, function(name, value){
   184                     if(name == 'color'){
   185                         picker.setColor(value);
   186                     }
   187                     else{
   188                         $('#' + name).val(value);
   189                     }
   190                 });
   191                 update_sky();
   192             });
   193 
   194             var models = {
   195                 cube: new glee.Cube(0.15),
   196                 sphere: new glee.Sphere(0.2),
   197                 bunny: this.bunny,
   198                 dragon: this.dragon,
   199             };
   200 
   201             var view = new glee.Viewpoint({
   202                 offset: new glee.Vec3(0.0, 0.0, 1.0)
   203             });
   204             var proj = new glee.Perspective({
   205                 width: 500,
   206                 height: 500,
   207                 fov: 75,
   208                 near: 0.001,
   209                 far: 2
   210             });
   211 
   212             var blit_sky = new glee.Processor({
   213                 shader: this.cube_pass,
   214                 uniforms: {
   215                     inv_view_rot: view.inv_rot,
   216                     inv_proj: proj.inverse,
   217                 },
   218                 samplers: {
   219                     source: this.sky.scattering.result,
   220                 },
   221             });
   222 
   223             var drawable = this.bunny;
   224 
   225             var scene = new glee.Processor({
   226                 clear: {
   227                     depth: 1,
   228                 },
   229                 shader: this.cube_lighting,
   230                 uniforms: {
   231                     view: view.matrix,
   232                     view_rot: view.rot,
   233                     inv_view_rot: view.inv_rot,
   234                     proj: proj.matrix,
   235                     inv_proj: proj.inverse,
   236                     shading_mix: 0.5,
   237                 },
   238                 samplers: {
   239                     diffuse: this.sky.diffuse.result,
   240                     specular: this.sky.specular.result
   241                 },
   242                 draw: function(){
   243                     drawable.draw();
   244                 },
   245                 depth: {
   246                     test: 'Less',
   247                     write: true,
   248                 }
   249             });
   250 
   251             glee.schedule(60, function(delta){
   252                 view.step(delta);
   253                 blit_sky.render();
   254                 scene.render();
   255             });
   256         }
   257     });
   258 });
webgl_part2_sky