Editor: Adding support for ShaderMaterial.

editor/js/Sidebar.Material.js

@@ -71,6 +71,7 @@ Sidebar.Material = function ( editor ) {
 		'MeshLambertMaterial': 'MeshLambertMaterial',
 		'MeshNormalMaterial': 'MeshNormalMaterial',
 		'MeshPhongMaterial': 'MeshPhongMaterial',
+		'ShaderMaterial': 'ShaderMaterial',
 		'SpriteMaterial': 'SpriteMaterial'
 
 	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
@@ -130,6 +131,26 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialShininessRow );
 
+	// vertex shader
+
+	var materialVertexShaderRow = new UI.Panel();
+	var materialVertexShader = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).onChange( update );
+
+	materialVertexShaderRow.add( new UI.Text( 'Vertex Shader' ).setWidth( '90px' ) );
+	materialVertexShaderRow.add( materialVertexShader );
+
+	container.add( materialVertexShaderRow );
+
+	// fragment shader
+
+	var materialFragmentShaderRow = new UI.Panel();
+	var materialFragmentShader = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).onChange( update );
+
+	materialFragmentShaderRow.add( new UI.Text( 'Fragment Shader' ).setWidth( '90px' ) );
+	materialFragmentShaderRow.add( materialFragmentShader );
+
+	container.add( materialFragmentShaderRow );
+
 	// vertex colors
 
 	var materialVertexColorsRow = new UI.Panel();
@@ -146,7 +167,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialVertexColorsRow );
 
-
 	// skinning
 
 	var materialSkinningRow = new UI.Panel();
@@ -157,7 +177,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialSkinningRow );
 
-
 	// map
 
 	var materialMapRow = new UI.Panel();
@@ -170,7 +189,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialMapRow );
 
-
 	// light map
 
 	var materialLightMapRow = new UI.Panel();
@@ -183,7 +201,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialLightMapRow );
 
-
 	// bump map
 
 	var materialBumpMapRow = new UI.Panel();
@@ -198,7 +215,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialBumpMapRow );
 
-
 	// normal map
 
 	var materialNormalMapRow = new UI.Panel();
@@ -211,7 +227,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialNormalMapRow );
 
-
 	// specular map
 
 	var materialSpecularMapRow = new UI.Panel();
@@ -224,7 +239,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialSpecularMapRow );
 
-
 	// env map
 
 	var materialEnvMapRow = new UI.Panel();
@@ -239,7 +253,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialEnvMapRow );
 
-
 	// blending
 
 	var materialBlendingRow = new UI.Panel();
@@ -259,7 +272,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialBlendingRow );
 
-
 	// side
 
 	var materialSideRow = new UI.Panel();
@@ -276,7 +288,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialSideRow );
 
-
 	// opacity
 
 	var materialOpacityRow = new UI.Panel();
@@ -287,7 +298,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialOpacityRow );
 
-
 	// transparent
 
 	var materialTransparentRow = new UI.Panel();
@@ -298,7 +308,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialTransparentRow );
 
-
 	// wireframe
 
 	var materialWireframeRow = new UI.Panel();
@@ -311,7 +320,6 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialWireframeRow );
 
-
 	//
 
 	function update() {
@@ -574,6 +582,8 @@ Sidebar.Material = function ( editor ) {
 			'emissive': materialEmissiveRow,
 			'specular': materialSpecularRow,
 			'shininess': materialShininessRow,
+			'vertexShader': materialVertexShader,
+			'fragmentShader': materialFragmentShader,
 			'vertexColors': materialVertexColorsRow,
 			'skinning': materialSkinningRow,
 			'map': materialMapRow,
@@ -653,6 +663,18 @@ Sidebar.Material = function ( editor ) {
 
 			}
 
+			if ( material.vertexShader !== undefined ) {
+
+				materialVertexShader.setValue( material.vertexShader );
+
+			}
+
+			if ( material.fragmentShader !== undefined ) {
+
+				materialFragmentShader.setValue( material.fragmentShader );
+
+			}
+
 			if ( material.vertexColors !== undefined ) {
 
 				materialVertexColors.setValue( material.vertexColors );

src/materials/ShaderMaterial.js

@@ -2,12 +2,11 @@
  * @author alteredq / http://alteredqualia.com/
  *
  * parameters = {
- *  fragmentShader: <string>,
- *  vertexShader: <string>,
- *
+ *  defines: { "label" : "value" },
  *  uniforms: { "parameter1": { type: "f", value: 1.0 }, "parameter2": { type: "i" value2: 2 } },
  *
- *  defines: { "label" : "value" },
+ *  fragmentShader: <string>,
+ *  vertexShader: <string>,
  *
  *  shading: THREE.SmoothShading,
  *  blending: THREE.NormalBlending,