Skip to content
Browse files

Add flat shading + little render refactoring.

  • Loading branch information...
1 parent ed13f59 commit 015a51ae3b5dd0f3e6c224caf2f4f74da44b49b6 @stephomi committed Dec 30, 2013
Showing with 283 additions and 190 deletions.
  1. +1 −1 build/build.sh
  2. +25 −14 gui/gui.js
  3. +1 −0 index.html
  4. +12 −6 object/mesh.js
  5. +129 −151 object/render.js
  6. +105 −0 object/shader.js
  7. +10 −18 sculptgl.js
View
2 build/build.sh
@@ -4,7 +4,7 @@ mkdir sculptgl/css
mkdir sculptgl/ressources
mkdir sculptgl/shaders
mkdir sculptgl/lib
-java -jar compiler.jar --js=../object/aabb.js --js=../math3d/camera.js --js=../misc/import.js --js=../misc/export.js --js=../math3d/geometry.js --js=../math3d/grid.js --js=../object/mesh.js --js=../object/background.js --js=../object/octree.js --js=../math3d/picking.js --js=../object/render.js --js=../editor/sculpt.js --js=../misc/utils.js --js=../editor/topology.js --js=../editor/subdivision.js --js=../editor/decimation.js --js=../editor/adaptive.js --js=../editor/cut.js --js=../object/triangle.js --js=../object/states.js --js=../object/vertex.js --js=../gui/gui.js --js=../sculptgl.js --js_output_file=sculptgl/sculptgl.min.js
+java -jar compiler.jar --js=../object/aabb.js --js=../math3d/camera.js --js=../misc/import.js --js=../misc/export.js --js=../math3d/geometry.js --js=../math3d/grid.js --js=../object/mesh.js --js=../object/background.js --js=../object/octree.js --js=../math3d/picking.js --js=../object/render.js --js=../object/shader.js --js=../editor/sculpt.js --js=../misc/utils.js --js=../editor/topology.js --js=../editor/subdivision.js --js=../editor/decimation.js --js=../editor/adaptive.js --js=../editor/cut.js --js=../object/triangle.js --js=../object/states.js --js=../object/vertex.js --js=../gui/gui.js --js=../sculptgl.js --js_output_file=sculptgl/sculptgl.min.js
cp ../lib/*.js sculptgl/lib/
cp ../ressources/*.jpg sculptgl/ressources/
cp ../ressources/*.obj sculptgl/ressources/
View
39 gui/gui.js
@@ -7,6 +7,7 @@ function Gui(sculptgl)
//ui stuffs
this.ctrlColor_ = null; //color controller
this.ctrlShaders_ = null; //shaders controller
+ this.flatShading_ = null; //flat shading controller
this.ctrlSculpt_ = null; //sculpt controller
this.ctrlClay_ = null; //clay sculpting controller
this.ctrlNegative_ = null; //negative sculpting controller
@@ -249,28 +250,38 @@ Gui.prototype = {
this.ctrlNbVertices_ = foldMesh.add(this, 'dummyFunc_').name('Ver : 0');
this.ctrlNbTriangles_ = foldMesh.add(this, 'dummyFunc_').name('Tri : 0');
var optionsShaders = {
- 'Phong': Render.mode.PHONG,
- 'Transparency': Render.mode.TRANSPARENCY,
- 'Wireframe': Render.mode.WIREFRAME,
- 'Normal shader': Render.mode.NORMAL,
- 'Clay': Render.mode.MATERIAL,
- 'Chavant': Render.mode.MATERIAL + 1,
- 'Skin': Render.mode.MATERIAL + 2,
- 'Drink': Render.mode.MATERIAL + 3,
- 'Red velvet': Render.mode.MATERIAL + 4,
- 'Orange': Render.mode.MATERIAL + 5,
- 'Bronze': Render.mode.MATERIAL + 6
+ 'Phong': Shader.mode.PHONG,
+ 'Transparency': Shader.mode.TRANSPARENCY,
+ 'Wireframe': Shader.mode.WIREFRAME,
+ 'Normal shader': Shader.mode.NORMAL,
+ 'Clay': Shader.mode.MATERIAL,
+ 'Chavant': Shader.mode.MATERIAL + 1,
+ 'Skin': Shader.mode.MATERIAL + 2,
+ 'Drink': Shader.mode.MATERIAL + 3,
+ 'Red velvet': Shader.mode.MATERIAL + 4,
+ 'Orange': Shader.mode.MATERIAL + 5,
+ 'Bronze': Shader.mode.MATERIAL + 6
};
- this.ctrlShaders_ = foldMesh.add(new Render(), 'shaderType_', optionsShaders).name('Shader');
+ this.ctrlShaders_ = foldMesh.add(new Shader(), 'type_', optionsShaders).name('Shader');
this.ctrlShaders_.onChange(function (value)
{
if (main.mesh_)
{
- main.mesh_.render_.updateShaders(parseInt(value, 10), main.textures_, main.shaders_);
+ main.mesh_.initRender(parseInt(value, 10), main.textures_, main.shaders_);
+ main.render();
+ }
+ });
+ this.ctrlFlatShading_ = foldMesh.add(new Render(), 'flatShading_').name('flat shading');
+ this.ctrlFlatShading_.onChange(function (value)
+ {
+ if (main.mesh_)
+ {
+ main.mesh_.render_.flatShading_ = value;
main.mesh_.updateBuffers();
main.render();
}
});
+
this.ctrlColor_ = foldMesh.addColor(main.sculpt_, 'color_').name('Color');
this.ctrlColor_.onChange(function (value)
{
@@ -294,7 +305,7 @@ Gui.prototype = {
{
if (!mesh)
return;
- this.ctrlShaders_.object = mesh.render_;
+ this.ctrlShaders_.object = mesh.render_.shader_;
this.ctrlShaders_.updateDisplay();
this.updateMeshInfo(mesh.vertices_.length, mesh.triangles_.length);
},
View
1 index.html
@@ -56,6 +56,7 @@
<script src='object/vertex.js'></script>
<script src='object/octree.js'></script>
<script src='object/render.js'></script>
+ <script src='object/shader.js'></script>
<script src='object/states.js'></script>
<script src='object/background.js'></script>
View
18 object/mesh.js
@@ -14,7 +14,7 @@ function Mesh(gl)
this.octree_ = new Octree(); //octree
this.matTransform_ = mat4.create(); //transformation matrix of the mesh
this.leavesUpdate_ = []; //leaves of the octree to check
- this.render_ = new Render(gl); //the mesh renderer
+ this.render_ = new Render(gl, this); //the mesh renderer
this.scale_ = 1; //use for export in order to keep the same scale as import...
}
@@ -215,11 +215,11 @@ Mesh.prototype = {
/** Render the mesh */
render: function (camera, picking, lineOrigin, lineNormal)
{
- this.render_.render(camera, picking, this.matTransform_, this.triangles_.length * 3, this.center_, lineOrigin, lineNormal);
+ this.render_.render(camera, picking, lineOrigin, lineNormal);
},
/** Initialize the mesh information : center, octree */
- initMesh: function (textures, shaders)
+ initMesh: function ()
{
var vertices = this.vertices_;
var triangles = this.triangles_;
@@ -279,14 +279,20 @@ Mesh.prototype = {
++Triangle.tagMask_;
this.octree_ = new Octree();
this.octree_.build(this, trianglesAll, aabb);
- this.render_.initBuffers(this.vertexArray_, this.normalArray_, this.colorArray_, this.indexArray_);
- this.render_.updateShaders(this.render_.shaderType_, textures, shaders);
+ },
+
+ /** Initialize buffers and shadr */
+ initRender: function (shaderType, textures, shaders)
+ {
+ this.render_.initBuffers();
+ this.render_.updateShaders(shaderType, textures, shaders);
+ this.render_.updateBuffers();
},
/** Update the rendering buffers */
updateBuffers: function ()
{
- this.render_.updateBuffers(this.vertexArray_, this.normalArray_, this.colorArray_, this.indexArray_, this.triangles_.length);
+ this.render_.updateBuffers();
},
/** Update geometry */
View
280 object/render.js
@@ -1,203 +1,103 @@
'use strict';
-function Render(gl)
+function Render(gl, mesh)
{
+ this.mesh_ = mesh; //webgl context
this.gl_ = gl; //webgl context
- this.shaderType_ = Render.mode.PHONG; //type of shader
+ this.shader_ = new Shader(gl); //the program shader
+
+ this.flatShading_ = false; //use of drawArrays vs drawElements
this.vertexBuffer_ = null; //vertices buffer
this.normalBuffer_ = null; //normals buffer
this.colorBuffer_ = null; //colors buffer
this.indexBuffer_ = null; //indexes buffer
this.reflectionLoc_ = null; //texture reflection
- this.shaderProgram_ = null; //program shader
- this.fragmentShader_ = null; //fragment shader
- this.vertexShader_ = null; //fragment shader
-
- this.vertexAttrib_ = null; //vertex attribute location
- this.colorAttrib_ = null; //color vertex attribute location
- this.normalAttrib_ = null; //normal attribute location
-
- this.mvpMatrixUnif_ = null; //model view projection matrix uniform location
- this.mvMatrixUnif_ = null; //model view matrix uniform location
- this.normalMatrixUnif_ = null; //normal matrix uniform location
-
- this.centerPickingUnif_ = null; //center of selection uniform location
- this.radiusSquaredUnif_ = null; //radius of selection uniform location
-
- this.lineOriginUnif_ = null; //line origin uniform location
- this.lineNormalUnif_ = null; //line normal uniform location
-
- this.reflectionTexUnif_ = null; //reflection texture uniform location
-
this.cacheDrawArraysV_ = null; //cache array for vertices
this.cacheDrawArraysN_ = null; //cache array for normals
+ this.cacheDrawArraysC_ = null; //cache array for colors
}
-//the rendering mode
-Render.mode = {
- PHONG: 0,
- TRANSPARENCY: 1,
- WIREFRAME: 2,
- NORMAL: 3,
- MATERIAL: 4
-};
-
Render.prototype = {
/** Update the shaders on the mesh, load the texture(s) first if the shaders need it */
updateShaders: function (shaderType, textures, shaders)
{
- var gl = this.gl_;
- this.shaderType_ = shaderType;
- gl.deleteProgram(this.shaderProgram_);
- if (shaderType >= Render.mode.MATERIAL)
+ if (shaderType >= Shader.mode.MATERIAL)
this.reflectionLoc_ = textures[shaderType];
- this.initShaders(shaders);
- },
-
- /** Initialize the shaders on the mesh */
- initShaders: function (shaders)
- {
- var gl = this.gl_;
- switch (this.shaderType_)
- {
- case Render.mode.PHONG:
- this.loadShaders(shaders.phongVertex, shaders.phongFragment);
- break;
- case Render.mode.WIREFRAME:
- this.loadShaders(shaders.wireframeVertex, shaders.wireframeFragment);
- break;
- case Render.mode.TRANSPARENCY:
- this.loadShaders(shaders.transparencyVertex, shaders.transparencyFragment);
- break;
- case Render.mode.NORMAL:
- this.loadShaders(shaders.normalVertex, shaders.normalFragment);
- break;
- default:
- this.loadShaders(shaders.reflectionVertex, shaders.reflectionFragment);
- break;
- }
- this.shaderProgram_ = gl.createProgram();
- var shaderProgram = this.shaderProgram_;
-
- gl.attachShader(shaderProgram, this.vertexShader_);
- gl.attachShader(shaderProgram, this.fragmentShader_);
- gl.linkProgram(shaderProgram);
- gl.useProgram(shaderProgram);
-
- this.vertexAttrib_ = gl.getAttribLocation(this.shaderProgram_, 'vertex');
- this.normalAttrib_ = gl.getAttribLocation(this.shaderProgram_, 'normal');
- if (this.shaderType_ !== Render.mode.NORMAL && this.shaderType_ !== Render.mode.WIREFRAME)
- this.colorAttrib_ = gl.getAttribLocation(this.shaderProgram_, 'color');
-
- this.mvpMatrixUnif_ = gl.getUniformLocation(shaderProgram, 'mvpMat');
- this.mvMatrixUnif_ = gl.getUniformLocation(shaderProgram, 'mvMat');
- this.normalMatrixUnif_ = gl.getUniformLocation(shaderProgram, 'nMat');
- this.centerPickingUnif_ = gl.getUniformLocation(shaderProgram, 'centerPicking');
- this.radiusSquaredUnif_ = gl.getUniformLocation(shaderProgram, 'radiusSquared');
-
- this.lineOriginUnif_ = gl.getUniformLocation(shaderProgram, 'lineOrigin');
- this.lineNormalUnif_ = gl.getUniformLocation(shaderProgram, 'lineNormal');
-
- if (this.shaderType_ >= Render.mode.MATERIAL)
- this.reflectionTexUnif_ = gl.getUniformLocation(shaderProgram, 'refTex');
-
- gl.detachShader(shaderProgram, this.fragmentShader_);
- gl.deleteShader(this.fragmentShader_);
- gl.detachShader(shaderProgram, this.vertexShader_);
- gl.deleteShader(this.vertexShader_);
- },
-
- /** Load vertex and fragment shaders */
- loadShaders: function (vertex, fragment)
- {
- var gl = this.gl_;
- this.vertexShader_ = gl.createShader(gl.VERTEX_SHADER);
- gl.shaderSource(this.vertexShader_, '\n' + vertex + '\n');
- gl.compileShader(this.vertexShader_);
- this.fragmentShader_ = gl.createShader(gl.FRAGMENT_SHADER);
- gl.shaderSource(this.fragmentShader_, fragment);
- gl.compileShader(this.fragmentShader_);
+ this.shader_.type_ = shaderType;
+ this.shader_.init(shaders);
},
/** Initialize Vertex Buffer Object (VBO) */
- initBuffers: function (vAr, nAr, cAr, iAr)
+ initBuffers: function ()
{
var gl = this.gl_;
this.vertexBuffer_ = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer_);
- gl.bufferData(gl.ARRAY_BUFFER, vAr, gl.DYNAMIC_DRAW);
-
this.normalBuffer_ = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer_);
- gl.bufferData(gl.ARRAY_BUFFER, nAr, gl.DYNAMIC_DRAW);
-
this.colorBuffer_ = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer_);
- gl.bufferData(gl.ARRAY_BUFFER, cAr, gl.DYNAMIC_DRAW);
-
this.indexBuffer_ = gl.createBuffer();
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer_);
- gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iAr, gl.STATIC_DRAW);
},
/** Render the mesh */
- render: function (camera, picking, matTransform, lengthIndexArray, center, lineOrigin, lineNormal)
+ render: function (camera, picking, lineOrigin, lineNormal)
{
var gl = this.gl_;
- gl.useProgram(this.shaderProgram_);
+ var shader = this.shader_;
+ var lengthIndexArray = this.mesh_.triangles_.length * 3;
+
+ gl.useProgram(shader.program_);
var centerPicking = picking.interPoint_;
var radiusSquared = picking.rWorldSqr_;
var mvMatrix = mat4.create();
- mat4.mul(mvMatrix, camera.view_, matTransform);
+ mat4.mul(mvMatrix, camera.view_, this.mesh_.matTransform_);
var mvpMatrix = mat4.create();
mat4.mul(mvpMatrix, camera.proj_, mvMatrix);
- gl.enableVertexAttribArray(this.vertexAttrib_);
+ gl.enableVertexAttribArray(shader.vertexAttrib_);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer_);
- gl.vertexAttribPointer(this.vertexAttrib_, 3, gl.FLOAT, false, 0, 0);
+ gl.vertexAttribPointer(shader.vertexAttrib_, 3, gl.FLOAT, false, 0, 0);
- gl.enableVertexAttribArray(this.normalAttrib_);
+ gl.enableVertexAttribArray(shader.normalAttrib_);
gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer_);
- if (this.shaderType_ === Render.mode.WIREFRAME)
- gl.vertexAttribPointer(this.normalAttrib_, 4, gl.FLOAT, false, 0, 0);
+ if (shader.type_ === Shader.mode.WIREFRAME)
+ gl.vertexAttribPointer(shader.normalAttrib_, 4, gl.FLOAT, false, 0, 0);
else
- gl.vertexAttribPointer(this.normalAttrib_, 3, gl.FLOAT, false, 0, 0);
+ gl.vertexAttribPointer(shader.normalAttrib_, 3, gl.FLOAT, false, 0, 0);
- if (this.shaderType_ !== Render.mode.WIREFRAME && this.shaderType_ !== Render.mode.NORMAL)
+ if (shader.type_ !== Shader.mode.WIREFRAME && shader.type_ !== Shader.mode.NORMAL)
{
- gl.enableVertexAttribArray(this.colorAttrib_);
+ gl.enableVertexAttribArray(shader.colorAttrib_);
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer_);
- gl.vertexAttribPointer(this.colorAttrib_, 3, gl.FLOAT, false, 0, 0);
+ gl.vertexAttribPointer(shader.colorAttrib_, 3, gl.FLOAT, false, 0, 0);
}
- gl.uniformMatrix4fv(this.mvMatrixUnif_, false, mvMatrix);
- gl.uniformMatrix4fv(this.mvpMatrixUnif_, false, mvpMatrix);
- gl.uniformMatrix3fv(this.normalMatrixUnif_, false, mat3.normalFromMat4(mat3.create(), mvMatrix));
- gl.uniform3fv(this.centerPickingUnif_, vec3.transformMat4([0, 0, 0], centerPicking, mvMatrix));
- gl.uniform1f(this.radiusSquaredUnif_, radiusSquared);
+ gl.uniformMatrix4fv(shader.mvMatrixUnif_, false, mvMatrix);
+ gl.uniformMatrix4fv(shader.mvpMatrixUnif_, false, mvpMatrix);
+ gl.uniformMatrix3fv(shader.normalMatrixUnif_, false, mat3.normalFromMat4(mat3.create(), mvMatrix));
+ gl.uniform3fv(shader.centerPickingUnif_, vec3.transformMat4([0, 0, 0], centerPicking, mvMatrix));
+ gl.uniform1f(shader.radiusSquaredUnif_, radiusSquared);
- gl.uniform2fv(this.lineOriginUnif_, lineOrigin);
- gl.uniform2fv(this.lineNormalUnif_, lineNormal);
+ gl.uniform2fv(shader.lineOriginUnif_, lineOrigin);
+ gl.uniform2fv(shader.lineNormalUnif_, lineNormal);
- switch (this.shaderType_)
+ switch (shader.type_)
{
- case Render.mode.PHONG:
+ case Shader.mode.PHONG:
this.drawBuffer(lengthIndexArray);
break;
- case Render.mode.TRANSPARENCY:
+ case Shader.mode.TRANSPARENCY:
gl.depthMask(false);
gl.enable(gl.BLEND);
this.drawBuffer(lengthIndexArray);
gl.disable(gl.BLEND);
gl.depthMask(true);
break;
- case Render.mode.WIREFRAME:
+ case Shader.mode.WIREFRAME:
gl.drawArrays(gl.TRIANGLES, 0, lengthIndexArray);
break;
- case Render.mode.NORMAL:
+ case Shader.mode.NORMAL:
this.drawBuffer(lengthIndexArray);
break;
default:
@@ -213,44 +113,122 @@ Render.prototype = {
drawBuffer: function (lengthIndexArray)
{
var gl = this.gl_;
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer_);
- gl.drawElements(gl.TRIANGLES, lengthIndexArray, SculptGL.elementIndexType, 0);
+ if (this.flatShading_ === true)
+ gl.drawArrays(gl.TRIANGLES, 0, lengthIndexArray);
+ else
+ {
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer_);
+ gl.drawElements(gl.TRIANGLES, lengthIndexArray, SculptGL.elementIndexType, 0);
+ }
},
/** Update buffers */
- updateBuffers: function (vAr, nAr, cAr, iAr, nbTriangles)
+ updateBuffers: function ()
{
- if (this.shaderType_ === Render.mode.WIREFRAME)
+ if (this.shader_.type_ === Shader.mode.WIREFRAME)
+ this.makeWireframeBuffers();
+ else if (this.flatShading_ === true)
+ this.flatShadingBuffers();
+ else
{
- this.makeWireframeBuffers(vAr, nAr, iAr, nbTriangles);
- return;
+ var gl = this.gl_;
+ var mesh = this.mesh_;
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer_);
+ gl.bufferData(gl.ARRAY_BUFFER, mesh.vertexArray_, gl.DYNAMIC_DRAW);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer_);
+ gl.bufferData(gl.ARRAY_BUFFER, mesh.normalArray_, gl.DYNAMIC_DRAW);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer_);
+ gl.bufferData(gl.ARRAY_BUFFER, mesh.colorArray_, gl.DYNAMIC_DRAW);
+
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer_);
+ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indexArray_, gl.STATIC_DRAW);
}
+ },
+
+ /** Create arrays for the drawArrays function */
+ flatShadingBuffers: function ()
+ {
var gl = this.gl_;
+ var mesh = this.mesh_;
+ var triangles = mesh.triangles_;
+ var nbTriangles = triangles.length;
+ var vAr = mesh.vertexArray_;
+ var cAr = mesh.colorArray_;
+ var iAr = mesh.indexArray_;
+
+ var cdv = this.cacheDrawArraysV_;
+ var cdn = this.cacheDrawArraysN_;
+ var cdc = this.cacheDrawArraysC_;
+ if (cdv === null || cdv.length <= nbTriangles * 9)
+ {
+ this.cacheDrawArraysV_ = new Float32Array(nbTriangles * 9 * 1.5);
+ cdv = this.cacheDrawArraysV_;
+ }
+ if (cdn === null || cdn.length <= nbTriangles * 9)
+ {
+ this.cacheDrawArraysN_ = new Float32Array(nbTriangles * 9 * 1.5);
+ cdn = this.cacheDrawArraysN_;
+ }
+ if (cdc === null || cdc.length <= nbTriangles * 9)
+ {
+ this.cacheDrawArraysC_ = new Float32Array(nbTriangles * 9 * 1.5);
+ cdc = this.cacheDrawArraysC_;
+ }
+
+ var i = 0,
+ j = 0,
+ id = 0;
+ var len = nbTriangles * 3;
+ for (i = 0; i < len; ++i)
+ {
+ j = i * 3;
+ id = iAr[i] * 3;
+ cdv[j] = vAr[id];
+ cdv[j + 1] = vAr[id + 1];
+ cdv[j + 2] = vAr[id + 2];
+
+ var normal = triangles[Math.floor(i / 3)].normal_;
+ cdn[j] = normal[0];
+ cdn[j + 1] = normal[1];
+ cdn[j + 2] = normal[2];
+
+ cdc[j] = cAr[id];
+ cdc[j + 1] = cAr[id + 1];
+ cdc[j + 2] = cAr[id + 2];
+ }
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer_);
- gl.bufferData(gl.ARRAY_BUFFER, vAr, gl.DYNAMIC_DRAW);
+ gl.bufferData(gl.ARRAY_BUFFER, cdv, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer_);
- gl.bufferData(gl.ARRAY_BUFFER, nAr, gl.DYNAMIC_DRAW);
+ gl.bufferData(gl.ARRAY_BUFFER, cdn, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer_);
- gl.bufferData(gl.ARRAY_BUFFER, cAr, gl.DYNAMIC_DRAW);
-
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer_);
- gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iAr, gl.STATIC_DRAW);
+ gl.bufferData(gl.ARRAY_BUFFER, cdc, gl.DYNAMIC_DRAW);
},
/** Create arrays for the drawArrays function */
- makeWireframeBuffers: function (vAr, nAr, iAr, nbTriangles)
+ makeWireframeBuffers: function ()
{
var gl = this.gl_;
+ var mesh = this.mesh_;
+ var nbTriangles = mesh.triangles_.length;
+ var vAr = mesh.vertexArray_;
+ var nAr = mesh.normalArray_;
+ var iAr = mesh.indexArray_;
var cdv = this.cacheDrawArraysV_;
var cdn = this.cacheDrawArraysN_;
if (cdv === null || cdv.length <= nbTriangles * 9)
{
this.cacheDrawArraysV_ = new Float32Array(nbTriangles * 9 * 1.5);
- this.cacheDrawArraysN_ = new Float32Array(nbTriangles * 12 * 1.5);
cdv = this.cacheDrawArraysV_;
+ }
+ if (cdn === null || cdn.length <= nbTriangles * 12)
+ {
+ this.cacheDrawArraysN_ = new Float32Array(nbTriangles * 12 * 1.5);
cdn = this.cacheDrawArraysN_;
}
View
105 object/shader.js
@@ -0,0 +1,105 @@
+'use strict';
+
+function Shader(gl)
+{
+ this.gl_ = gl; //webgl context
+ this.type_ = Shader.mode.MATERIAL; //type of shader
+
+ this.program_ = null; //program shader
+ this.fragmentShader_ = null; //fragment shader
+ this.vertexShader_ = null; //fragment shader
+
+ this.vertexAttrib_ = null; //vertex attribute location
+ this.colorAttrib_ = null; //color vertex attribute location
+ this.normalAttrib_ = null; //normal attribute location
+
+ this.mvpMatrixUnif_ = null; //model view projection matrix uniform location
+ this.mvMatrixUnif_ = null; //model view matrix uniform location
+ this.normalMatrixUnif_ = null; //normal matrix uniform location
+
+ this.centerPickingUnif_ = null; //center of selection uniform location
+ this.radiusSquaredUnif_ = null; //radius of selection uniform location
+
+ this.lineOriginUnif_ = null; //line origin uniform location
+ this.lineNormalUnif_ = null; //line normal uniform location
+
+ this.reflectionTexUnif_ = null; //reflection texture uniform location
+}
+
+//the rendering mode
+Shader.mode = {
+ PHONG: 0,
+ TRANSPARENCY: 1,
+ WIREFRAME: 2,
+ NORMAL: 3,
+ MATERIAL: 4
+};
+
+Shader.prototype = {
+ /** Initialize the shaders on the mesh */
+ init: function (shaders)
+ {
+ var gl = this.gl_;
+ switch (this.type_)
+ {
+ case Shader.mode.PHONG:
+ this.loadShaders(shaders.phongVertex, shaders.phongFragment);
+ break;
+ case Shader.mode.WIREFRAME:
+ this.loadShaders(shaders.wireframeVertex, shaders.wireframeFragment);
+ break;
+ case Shader.mode.TRANSPARENCY:
+ this.loadShaders(shaders.transparencyVertex, shaders.transparencyFragment);
+ break;
+ case Shader.mode.NORMAL:
+ this.loadShaders(shaders.normalVertex, shaders.normalFragment);
+ break;
+ default:
+ this.loadShaders(shaders.reflectionVertex, shaders.reflectionFragment);
+ break;
+ }
+ if (this.program_)
+ gl.deleteProgram(this.program_);
+ this.program_ = gl.createProgram();
+ var program = this.program_;
+
+ gl.attachShader(program, this.vertexShader_);
+ gl.attachShader(program, this.fragmentShader_);
+ gl.linkProgram(program);
+ gl.useProgram(program);
+
+ this.vertexAttrib_ = gl.getAttribLocation(program, 'vertex');
+ this.normalAttrib_ = gl.getAttribLocation(program, 'normal');
+ if (this.type_ !== Shader.mode.NORMAL && this.type_ !== Shader.mode.WIREFRAME)
+ this.colorAttrib_ = gl.getAttribLocation(program, 'color');
+
+ this.mvpMatrixUnif_ = gl.getUniformLocation(program, 'mvpMat');
+ this.mvMatrixUnif_ = gl.getUniformLocation(program, 'mvMat');
+ this.normalMatrixUnif_ = gl.getUniformLocation(program, 'nMat');
+ this.centerPickingUnif_ = gl.getUniformLocation(program, 'centerPicking');
+ this.radiusSquaredUnif_ = gl.getUniformLocation(program, 'radiusSquared');
+
+ this.lineOriginUnif_ = gl.getUniformLocation(program, 'lineOrigin');
+ this.lineNormalUnif_ = gl.getUniformLocation(program, 'lineNormal');
+
+ if (this.type_ >= Shader.mode.MATERIAL)
+ this.reflectionTexUnif_ = gl.getUniformLocation(program, 'refTex');
+
+ gl.detachShader(program, this.fragmentShader_);
+ gl.deleteShader(this.fragmentShader_);
+ gl.detachShader(program, this.vertexShader_);
+ gl.deleteShader(this.vertexShader_);
+ },
+
+ /** Load vertex and fragment shaders */
+ loadShaders: function (vertex, fragment)
+ {
+ var gl = this.gl_;
+ this.vertexShader_ = gl.createShader(gl.VERTEX_SHADER);
+ gl.shaderSource(this.vertexShader_, vertex);
+ gl.compileShader(this.vertexShader_);
+ this.fragmentShader_ = gl.createShader(gl.FRAGMENT_SHADER);
+ gl.shaderSource(this.fragmentShader_, fragment);
+ gl.compileShader(this.fragmentShader_);
+ }
+};
View
28 sculptgl.js
@@ -170,17 +170,17 @@ SculptGL.prototype = {
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
self.textures_[mode] = idTex;
- if (mode === Render.mode.MATERIAL)
+ if (mode === Shader.mode.MATERIAL)
self.loadSphere();
};
};
- loadTex('ressources/clay.jpg', Render.mode.MATERIAL);
- loadTex('ressources/chavant.jpg', Render.mode.MATERIAL + 1);
- loadTex('ressources/skin.jpg', Render.mode.MATERIAL + 2);
- loadTex('ressources/drink.jpg', Render.mode.MATERIAL + 3);
- loadTex('ressources/redvelvet.jpg', Render.mode.MATERIAL + 4);
- loadTex('ressources/orange.jpg', Render.mode.MATERIAL + 5);
- loadTex('ressources/bronze.jpg', Render.mode.MATERIAL + 6);
+ loadTex('ressources/clay.jpg', Shader.mode.MATERIAL);
+ loadTex('ressources/chavant.jpg', Shader.mode.MATERIAL + 1);
+ loadTex('ressources/skin.jpg', Shader.mode.MATERIAL + 2);
+ loadTex('ressources/drink.jpg', Shader.mode.MATERIAL + 3);
+ loadTex('ressources/redvelvet.jpg', Shader.mode.MATERIAL + 4);
+ loadTex('ressources/orange.jpg', Shader.mode.MATERIAL + 5);
+ loadTex('ressources/bronze.jpg', Shader.mode.MATERIAL + 6);
},
/** Load shaders as a string */
@@ -634,19 +634,11 @@ SculptGL.prototype = {
endMeshLoad: function ()
{
var mesh = this.mesh_;
- mesh.render_.shaderType_ = Render.mode.MATERIAL;
- if (this.sculpt_.tool_ === Sculpt.tool.COLOR)
- {
- this.gui_.ctrlColor_.__li.hidden = false;
- this.gui_.ctrlShaders_.setValue(Render.mode.PHONG);
- }
- else
- this.gui_.ctrlColor_.__li.hidden = true;
-
- mesh.initMesh(this.textures_, this.shaders_);
+ mesh.initMesh();
mesh.moveTo([0, 0, 0]);
this.camera_.reset();
this.gui_.updateMesh(mesh);
+ mesh.initRender(Shader.mode.MATERIAL, this.textures_, this.shaders_);
this.render();
},

0 comments on commit 015a51a

Please sign in to comment.
Something went wrong with that request. Please try again.