Refactors rendering refactoring

Gruntfile.js

@@ -26,6 +26,9 @@ module.exports = function (grunt) {
     compile: {
       options: {
         preserveLicenseComments: false,
+        paths: {
+          text: '../tools/text'
+        },
         optimize: 'none',
         baseUrl: 'src',
         name: '../tools/almond',
@@ -104,7 +107,7 @@ module.exports = function (grunt) {
   });
 
   grunt.loadNpmTasks('grunt-manifest');
-  grunt.loadNpmTasks('grunt-requirejs');
+  grunt.loadNpmTasks('grunt-contrib-requirejs');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-copy');

main.js

@@ -1,4 +1,7 @@
 require.config({
+  paths: {
+    'text': '../tools/text'
+  },
   baseUrl: 'src'
 });
 

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "grunt": "*",
     "grunt-manifest": "*",
-    "grunt-requirejs": "*",
+    "grunt-contrib-requirejs": "*",
     "grunt-contrib-jshint": "*",
     "grunt-contrib-clean": "*",
     "grunt-contrib-copy": "*",

src/Sculptgl.js

@@ -18,8 +18,9 @@ define([
   'states/States',
   'render/Render',
   'render/Rtt',
-  'render/shaders/ShaderMatcap'
-], function (glm, Utils, Sculpt, Subdivision, Import, ReplayWriter, ReplayReader, Gui, Camera, Picking, Background, Selection, Grid, Mesh, Multimesh, Primitive, States, Render, Rtt, ShaderMatcap) {
+  'render/shaders/ShaderMatcap',
+  'render/WebGLCaps'
+], function (glm, Utils, Sculpt, Subdivision, Import, ReplayWriter, ReplayReader, Gui, Camera, Picking, Background, Selection, Grid, Mesh, Multimesh, Primitive, States, Render, Rtt, ShaderMatcap, WebGLCaps) {
 
   'use strict';
 
@@ -199,12 +200,12 @@ define([
         window.alert('Could not initialise WebGL. No WebGL, no SculptGL. Sorry.');
         return;
       }
-      if (!gl.getExtension('OES_element_index_uint')) {
+      WebGLCaps.initWebGLExtensions(gl);
+      if (!WebGLCaps.getWebGLExtension('OES_element_index_uint'))
         Render.ONLY_DRAW_ARRAYS = true;
-      }
       gl.viewportWidth = window.innerWidth;
       gl.viewportHeight = window.innerHeight;
-      gl.clearColor(0.2, 0.2, 0.2, 1);
+      gl.clearColor(0.033, 0.033, 0.033, 1);
       gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);

src/files/ReplayEnums.js

@@ -127,6 +127,7 @@ define([], function () {
   Replay.ADD_CUBE = ida++; // []
   Replay.DELETE_CURRENT_MESH = ida++; // []
 
+  Replay.SET_TRANSPARENCY = ida++; // [val (u8)]
   Replay.EXPOSURE_INTENSITY = ida++; // [val (u8)]
   Replay.SHOW_GRID = ida++; // [bool (u8)]
   Replay.SHOW_WIREFRAME = ida++; // [bool (u8)]

src/files/ReplayReader.js

@@ -727,6 +727,10 @@ define([
         main.getGui().ctrlRendering_.onExposureChanged(data.getUint8(sel, true));
         sel += 1;
         break;
+      case Replay.SET_TRANSPARENCY:
+        main.getGui().ctrlRendering_.onTransparencyChanged(data.getUint8(sel, true));
+        sel += 1;
+        break;
       case Replay.SHOW_GRID:
         main.getGui().ctrlScene_.onShowGrid(data.getUint8(sel, true));
         this.virtualGrid_ = main.showGrid_;

src/files/ReplayWriter.js

@@ -89,6 +89,7 @@ define([
       parent.location.hash = '';
       this.lastDeviceMove_ = undefined;
       this.lastExposure_ = undefined;
+      this.lastTransparency_ = undefined;
       this.lastFov_ = undefined;
       this.lastNbActions_ = 0;
       this.lastRadius_ = 50.0;
@@ -284,15 +285,6 @@ define([
       this.checkSculptTools();
       this.stack_.push(Replay.DEVICE_MOVE, x, y, mask);
     },
-    pushCameraFov: function (fov) {
-      // optimize a bit
-      if (this.lastFov_ === this.stack_.length - 2) {
-        this.stack_[this.stack_.length - 1] = fov;
-        return;
-      }
-      this.lastFov_ = this.stack_.length;
-      this.stack_.push(Replay.CAMERA_FOV, fov);
-    },
     pushLoadAlpha: function (u8, w, h) {
       this.nbBytesLoadingMeshes_ += u8.byteLength;
       this.stack_.push(Replay.LOAD_ALPHA, w, h, u8);
@@ -302,14 +294,22 @@ define([
       this.nbBytesLoadingMeshes_ += ab.byteLength;
       this.stack_.push(Replay.LOAD_MESHES, ab);
     },
+    pushCameraFov: function (val) {
+      this.pushOptimize('lastFov_', Replay.CAMERA_FOV, val);
+    },
     pushExposure: function (val) {
-      // optimize a bit
-      if (this.lastExposure_ === this.stack_.length - 2) {
+      this.pushOptimize('lastExposure_', Replay.EXPOSURE_INTENSITY, val);
+    },
+    pushTransparency: function (val) {
+      this.pushOptimize('lastTransparency_', Replay.SET_TRANSPARENCY, val);
+    },
+    pushOptimize: function (comp, key, val) {
+      if (this[comp] === this.stack_.length - 2) {
         this.stack_[this.stack_.length - 1] = val;
         return;
       }
-      this.lastExposure_ = this.stack_.length;
-      this.stack_.push(Replay.EXPOSURE_INTENSITY, val);
+      this[comp] = this.stack_.length;
+      this.stack_.push(key, val);
     },
     export: function () {
       var stack = this.stack_;
@@ -381,6 +381,7 @@ define([
         case Replay.DYNAMIC_SUBDIVISION:
         case Replay.DYNAMIC_DECIMATION:
         case Replay.EXPOSURE_INTENSITY:
+        case Replay.SET_TRANSPARENCY:
         case Replay.SHOW_GRID:
         case Replay.SHOW_WIREFRAME:
         case Replay.FLAT_SHADING:

src/gui/GuiRendering.js

@@ -31,7 +31,6 @@ define([
       var optionsShaders = {};
       optionsShaders[Shader.mode.MATCAP] = TR('renderingMatcap');
       optionsShaders[Shader.mode.PBR] = TR('renderingPBR');
-      optionsShaders[Shader.mode.TRANSPARENCY] = TR('renderingTransparency');
       optionsShaders[Shader.mode.NORMAL] = TR('renderingNormal');
       optionsShaders[Shader.mode.UV] = TR('renderingUV');
       menu.addTitle(TR('renderingShader'));
@@ -48,9 +47,11 @@ define([
       this.ctrlUV_ = menu.addButton(TR('renderingImportUV'), this, 'importTexture');
       this.ctrlUV_.setVisibility(false);
 
-      this.ctrlExposure_ = menu.addSlider('Exposure', 20, this.onExposureChanged.bind(this), 0, 100, 1);
+      this.ctrlExposure_ = menu.addSlider(TR('renderingExposure'), 20, this.onExposureChanged.bind(this), 0, 100, 1);
       this.ctrlExposure_.setVisibility(false);
 
+      menu.addSlider(TR('renderingTransparency'), 0.0, this.onTransparencyChanged.bind(this), 0, 100, 1);
+
       menu.addTitle(TR('renderingExtra'));
       // flat shading
       this.ctrlFlatShading_ = menu.addCheckbox(TR('renderingFlat'), false, this.onFlatShading.bind(this));
@@ -74,6 +75,18 @@ define([
       mesh.getRender().setExposure(val / 20);
       main.render();
     },
+    onTransparencyChanged: function (val) {
+      var main = this.main_;
+      var mesh = main.getMesh();
+      if (!mesh)
+        return;
+
+      if (!main.isReplayed())
+        main.getReplayWriter().pushTransparency(val);
+
+      mesh.getRender().setOpacity(1.0 - val / 100.0);
+      main.render();
+    },
     /** On shader change */
     onShaderChanged: function (value) {
       var main = this.main_;

src/gui/tr/chinese.js

@@ -177,6 +177,7 @@ define([], function () {
     renderingExtra: '額外項目',
     renderingFlat: '平整面 (較慢)',
     renderingWireframe: '線框 (較慢)',
+    renderingExposure: 'Exposure',
 
     // matcaps
     matcapPearl: '珍珠',

src/gui/tr/english.js

@@ -177,6 +177,7 @@ define([], function () {
     renderingExtra: 'Extra',
     renderingFlat: 'flat (slower)',
     renderingWireframe: 'wireframe (slower)',
+    renderingExposure: 'Exposure',
 
     // matcaps
     matcapPearl: 'Pearl',

src/gui/tr/japan.js

@@ -177,6 +177,7 @@ define([], function () {
     renderingExtra: 'Extra',
     renderingFlat: 'フラットシェーディング (slower)',
     renderingWireframe: 'ワイヤーフレーム (slower)',
+    renderingExposure: 'Exposure',
 
     // matcaps
     matcapPearl: 'Pearl',

src/gui/tr/korean.js

@@ -177,6 +177,7 @@ define([], function () {
     renderingExtra: '추가',
     renderingFlat: '편평한 (느리게)',
     renderingWireframe: '와이어프레임 (느리게)',
+    renderingExposure: 'Exposure',
 
     // matcaps
     matcapPearl: 'Pearl',

src/render/Render.js

@@ -32,6 +32,7 @@ define([
     this.albedo_ = new Float32Array([-1.0, -1.0, -1.0]);
     this.roughness_ = -0.18;
     this.metallic_ = -0.78;
+    this.alpha_ = 1.0;
   };
 
   Render.ONLY_DRAW_ARRAYS = false;
@@ -104,8 +105,14 @@ define([
     isUsingTexCoords: function () {
       return this.shader_.isUsingTexCoords();
     },
+    setOpacity: function (alpha) {
+      this.alpha_ = alpha;
+    },
+    getOpacity: function () {
+      return this.alpha_;
+    },
     isTransparent: function () {
-      return this.shader_.isTransparent();
+      return this.alpha_ < 0.99;
     },
     getFlatShading: function () {
       return this.flatShading_;

src/render/Rtt.js

@@ -1,7 +1,8 @@
 define([
   'render/Buffer',
-  'render/Shader'
-], function (Buffer, Shader) {
+  'render/Shader',
+  'render/WebGLCaps'
+], function (Buffer, Shader, WebGLCaps) {
 
   'use strict';
 
@@ -47,10 +48,19 @@ define([
 
       this.shader_ = Shader[Shader.mode.RTT].getOrCreate(gl);
     },
+    getType: function (gl) {
+      if (WebGLCaps.hasRTTHalfFloat())
+        return WebGLCaps.HALF_FLOAT_OES;
+      if (WebGLCaps.hasRTTFloat())
+        return gl.FLOAT;
+      return gl.UNSIGNED_BYTE;
+    },
     onResize: function (width, height) {
       var gl = this.gl_;
+      var type = this.getType(gl);
+
       gl.bindTexture(gl.TEXTURE_2D, this.rtt_);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, type, null);
 
       gl.bindRenderbuffer(gl.RENDERBUFFER, this.depth_);
       gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);

src/render/Shader.js

@@ -6,10 +6,9 @@ define([
   'render/shaders/ShaderNormal',
   'render/shaders/ShaderPBR',
   'render/shaders/ShaderRtt',
-  'render/shaders/ShaderTransparency',
   'render/shaders/ShaderUV',
   'render/shaders/ShaderWireframe'
-], function (Sbackground, Sselection, Sgrid, Smatcap, Snormal, SPBR, Srtt, Stransparency, Suv, Swireframe) {
+], function (Sbackground, Sselection, Sgrid, Smatcap, Snormal, SPBR, Srtt, Suv, Swireframe) {
 
   'use strict';
 
@@ -21,15 +20,14 @@ define([
 
   Shader.mode = {
     PBR: 0,
-    TRANSPARENCY: 1,
-    WIREFRAME: 2,
-    NORMAL: 3,
-    BACKGROUND: 4,
-    UV: 5,
-    MATCAP: 6,
-    GRID: 7,
-    SELECTION: 8,
-    RTT: 9
+    WIREFRAME: 1,
+    NORMAL: 2,
+    BACKGROUND: 3,
+    UV: 4,
+    MATCAP: 5,
+    GRID: 6,
+    SELECTION: 7,
+    RTT: 8
   };
 
   Shader[Shader.mode.RTT] = Srtt;
@@ -39,7 +37,6 @@ define([
   Shader[Shader.mode.PBR] = SPBR;
   Shader[Shader.mode.MATCAP] = Smatcap;
   Shader[Shader.mode.NORMAL] = Snormal;
-  Shader[Shader.mode.TRANSPARENCY] = Stransparency;
   Shader[Shader.mode.UV] = Suv;
   Shader[Shader.mode.WIREFRAME] = Swireframe;
 
@@ -52,10 +49,6 @@ define([
     isUsingTexCoords: function () {
       return this.type_ === Shader.mode.UV;
     },
-    /** Return true if the shader is using alpha transparency stuffs */
-    isTransparent: function () {
-      return this.type_ === Shader.mode.TRANSPARENCY;
-    },
     /** Initialize the shader */
     init: function () {
       this.shaderObject_ = Shader[this.type_].getOrCreate(this.gl_);