This is an Open Source work-in-progress tool to bring the 3D to the web.
" +
21 | "
If you have any question/suggestion or problem using this tool, go to the webglstudio.org site or the github page.
";
22 |
23 | dialog.on_close = function()
24 | {
25 | IntroModule.preferences.show_intro_dialog = false;
26 | }
27 |
28 | dialog.addButton("Close");
29 | dialog.show();
30 | dialog.center();
31 | dialog.fadeIn();
32 |
33 | var links = dialog.content.querySelectorAll("a");
34 | for(var i = 0; i < links.length; i++)
35 | links[i].addEventListener("click",prevent_this, true);
36 | dialog.root.addEventListener("click",close_this);
37 |
38 | function prevent_this(e){
39 | e.stopImmediatePropagation();
40 | e.stopPropagation();
41 | return false;
42 | }
43 |
44 | function close_this(){
45 | dialog.close();
46 | }
47 | }
48 | }
49 |
50 | CORE.registerModule( IntroModule );
--------------------------------------------------------------------------------
/editor/js/modules/preferences.js:
--------------------------------------------------------------------------------
1 | /*
2 | This module is in charge of controlling the global preferences of all the modules.
3 | It allow to configure every one of them using a common interface and to use a localStorage
4 | to save the previous configuration.
5 | */
6 | var PreferencesModule = {
7 |
8 | name: "preferences",
9 |
10 | sections: {},
11 | current_section: "editor",
12 |
13 | init: function()
14 | {
15 | LiteGUI.menubar.add("Edit/Preferences", { order:20, callback: function() { PreferencesModule.showDialog(); }});
16 | },
17 |
18 | showDialog: function()
19 | {
20 | if(PreferencesModule.dialog)
21 | {
22 | PreferencesModule.dialog.highlight();
23 | return;
24 | }
25 |
26 | var dialog = new LiteGUI.Dialog({ id: "dialog_preferences", title:"Preferences", width: 800, height: 500, close: true, minimize: true, scroll: false, draggable: true });
27 | this.dialog = dialog;
28 |
29 | dialog.show();
30 | dialog.on_close = function() {
31 | PreferencesModule.dialog = null;
32 | }
33 |
34 | this.updateDialogContent();
35 | },
36 |
37 | updateDialogContent: function()
38 | {
39 | var dialog = this.dialog;
40 | if(!dialog)
41 | return;
42 |
43 | //remove old
44 | dialog.content.innerHTML = "";
45 |
46 | //content
47 | var split = new LiteGUI.Split([30,70]);
48 | dialog.content.appendChild(split.root);
49 | dialog.content.style.height = "calc( 100% - 20px )";
50 | split.root.style.height = "100%";
51 | split.sections[1].style.overflow = "auto";
52 | split.sections[1].style.paddingLeft = "10px";
53 | split.sections[1].id = "preferences-widgets-area";
54 | split.sections[1].innerHTML = "";
55 |
56 | var sections = [];
57 | var already_created = {};
58 | for(var i in CORE.Modules)
59 | {
60 | var module = CORE.Modules[i];
61 | if(!module.preferences_panel)
62 | continue;
63 |
64 | for(var j in module.preferences_panel)
65 | {
66 | var preferences = module.preferences_panel[j];
67 |
68 | if (already_created[ preferences.name ]) //avoid repeated
69 | continue;
70 | sections.push( preferences );
71 | this.sections[ preferences.name ] = preferences;
72 | already_created[ preferences.name ] = true;
73 | }
74 | }
75 |
76 | var list = new LiteGUI.List("preferences-list", sections );
77 | list.root.style.fontSize = "20px";
78 | split.sections[0].appendChild( list.root );
79 | split.sections[1].style.fontSize = "16px";
80 |
81 | list.callback = function(v) {
82 | PreferencesModule.changeSection( v.name );
83 | };
84 |
85 | list.setSelectedItem( this.sections[ this.current_section ] );
86 | },
87 |
88 | changeSection: function( name )
89 | {
90 | if(!this.dialog)
91 | return;
92 |
93 | this.current_section = name;
94 |
95 | var root = this.dialog.root.querySelector("#preferences-widgets-area .content");
96 | root.innerHTML = "";
97 |
98 | var widgets = new LiteGUI.Inspector({ id: "preferences-widgets", name_width:"40%" });
99 | widgets.onchange = function()
100 | {
101 | RenderModule.requestFrame();
102 | }
103 |
104 | root.appendChild( widgets.root );
105 |
106 | for(var i in CORE.Modules)
107 | {
108 | if (!CORE.Modules[i].onShowPreferencesPanel)
109 | continue;
110 | CORE.Modules[i].onShowPreferencesPanel(name, widgets);
111 | }
112 | },
113 | }
114 |
115 |
116 | CORE.registerModule( PreferencesModule );
--------------------------------------------------------------------------------
/editor/js/modules/profiling.js:
--------------------------------------------------------------------------------
1 | //Deprecated
2 | var ProfilingModule = {
3 | name: "Profiling",
4 | bigicon: "imgs/tabicon-profiling.png",
5 |
6 | settings: {
7 | },
8 |
9 | init: function()
10 | {
11 | this.tab = LiteGUI.main_tabs.addTab( this.name , {id:"profilingtab", bigicon: this.bigicon, size: "full", callback: function(tab) {
12 | if(!ProfilingModule.profiling_widget)
13 | ProfilingModule.createWidget();
14 | ProfilingModule.profiling_widget.enabled = true;
15 | RenderModule.appendViewportTo( ProfilingModule.area.sections[0].content );
16 | ProfilingModule.profiling_widget.render();
17 | },
18 | callback_leave: function() {
19 | ProfilingModule.profiling_widget.enabled = false;
20 | RenderModule.appendViewportTo( null );
21 | }});
22 |
23 | var area = this.area = new LiteGUI.Area();
24 | area.split("vertical",[null,400],true);
25 | this.tab.add( area );
26 | },
27 |
28 | createWidget: function()
29 | {
30 | this.profiling_widget = new ProfilingPanelWidget();
31 | this.area.sections[1].add( this.profiling_widget );
32 | }
33 | };
34 |
35 |
36 | //CORE.registerModule( ProfilingModule );
--------------------------------------------------------------------------------
/editor/js/modules/quickbar.js:
--------------------------------------------------------------------------------
1 | /* Console module
2 | It shows the QuickBar when pressing Contrl + Space and allows to launch commands (not JS commands, but special editor commands)
3 | It also allows to show messages in the console widget
4 | */
5 |
6 | var QuickbarModule = {
7 | name: "quickbar",
8 |
9 | commands: {},
10 |
11 | is_visible: false,
12 |
13 | init: function()
14 | {
15 | this.create();
16 | },
17 |
18 | create: function()
19 | {
20 | LiteGUI.addCSS("\
21 | #quickbar { pointer-events: none; transition: all 0.4s; opacity: 0; color: white; position: absolute; bottom: 0; right: 0px; width: 100%; min-height: 100px; font-size: 1.4em; padding-right: 3px } \
22 | #quickbar.visible { opacity: 1; pointer-events: auto; }\
23 | #quickbar input { border: 1px solid rgba(100,100,100,0.1); font-size: 2em; color: white; border: 0; background-color: rgba(0,0,0,0.5); border-radius: 4px; padding: 5px; margin: 20px; width: calc( 100% - 40px ); }\
24 | #quickbar input:focus { outline: 0; }\
25 | ");
26 |
27 | this.quickbar = document.createElement("div");
28 | this.quickbar.id = "quickbar";
29 |
30 | this.quickbar.innerHTML = "";
31 | this.content = this.quickbar.querySelector(".content");
32 | this.input = this.quickbar.querySelector("input");
33 |
34 | this.input.onblur = function() { QuickbarModule.hide(); };
35 | this.input.addEventListener("keydown", this.onKeyDown.bind(this) );
36 |
37 | var root = document.getElementById("visor");
38 | root.appendChild( this.quickbar );
39 |
40 | CORE.log = this.log;
41 | },
42 |
43 | log: function( msg )
44 | {
45 | LEvent.trigger( LS, "log", msg );
46 | },
47 |
48 | onCanvasKeyDown: function(e)
49 | {
50 | if( e.keyCode == 32 && e.ctrlKey )
51 | this.toggle();
52 | },
53 |
54 | onKeyDown: function(e)
55 | {
56 | if(e.keyCode == 13)
57 | {
58 | this.executeCommand( e.target.value );
59 | e.target.value = "";
60 | e.preventDefault();
61 | }
62 | else if (e.keyCode == 27)
63 | this.hide();
64 | },
65 |
66 | executeCommand: function(cmd)
67 | {
68 | if(!cmd)
69 | return;
70 |
71 | cmd = cmd.trim();
72 | var tokens = cmd.split(" ");
73 |
74 | for(var i in CORE.Modules)
75 | {
76 | var module = CORE.Modules[i];
77 | if(!module.commands)
78 | continue;
79 |
80 | var commands = module.commands;
81 | var callback = commands[ tokens[0] ];
82 | if(!callback)
83 | continue;
84 | callback(cmd, tokens);
85 | }
86 | },
87 |
88 | show: function()
89 | {
90 | this.quickbar.classList.add("visible");
91 | this.input.focus();
92 | this.input.value = "";
93 | this.is_visible = true;
94 | },
95 |
96 | hide: function()
97 | {
98 | this.quickbar.classList.remove("visible");
99 | this.input.blur();
100 | this.is_visible = false;
101 | },
102 |
103 | toggle: function()
104 | {
105 | if(this.is_visible)
106 | this.hide();
107 | else
108 | this.show();
109 | }
110 | };
111 |
112 | CORE.registerModule( QuickbarModule );
--------------------------------------------------------------------------------
/editor/js/modules/render.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/js/modules/render.js
--------------------------------------------------------------------------------
/editor/js/tools/colorPicker.js:
--------------------------------------------------------------------------------
1 | var colorPickerTool = {
2 | name: "colorPicker",
3 | description: "Select color",
4 | section: "foo",
5 | icon: "imgs/mini-icon-colorpicker.png",
6 |
7 | callback: null,
8 |
9 | show_realtime: false,
10 |
11 | last_mouse: vec2.create(),
12 | last_color: vec3.fromValues(0,1,0),
13 |
14 | renderEditor: function() {
15 | if(!this.show_realtime)
16 | return;
17 | gl.start2D();
18 | gl.fillColor = this.last_color;
19 | gl.fillRect( this.last_mouse[0] - 20, gl.canvas.height - this.last_mouse[1] - 5, 10,10 );
20 | gl.finish2D();
21 | },
22 |
23 | getColorFromMouse: function( e, skip_redraw )
24 | {
25 | RenderModule.render( !skip_redraw ); //force repaint so there is something in the buffer
26 | var image_data = gl.getImageData( e.canvasx, e.canvasy, 1, 1 );
27 | var color_bytes = image_data.data.subarray(0,3);
28 | this.last_color.set( [color_bytes[0]/255, color_bytes[1]/255, color_bytes[2]/255] );
29 | return vec3.clone( this.last_color );
30 | },
31 |
32 | mousedown: function(e)
33 | {
34 | if (e.which != 1)
35 | return;
36 |
37 | var color = this.getColorFromMouse(e);
38 |
39 | if(this.callback)
40 | {
41 | this.callback( color );
42 | this.callback = null;
43 |
44 | if(this._old_tool)
45 | ToolsModule.enableTool( this._old_tool.name );
46 | else
47 | ToolsModule.enableTool("manipulate");
48 | this._old_tool = null;
49 | gl.canvas.style.cursor = "";
50 | }
51 | else
52 | console.log( "Color", color );
53 |
54 | return true;
55 | },
56 |
57 | mouseup: function(e)
58 | {
59 | return true;
60 | },
61 |
62 | mousemove: function(e)
63 | {
64 | this.last_mouse[0] = e.canvasx;
65 | this.last_mouse[1] = e.canvasy;
66 | gl.canvas.style.cursor = "crosshair";
67 | if(this.show_realtime)
68 | {
69 | RenderModule.requestFrame();
70 | this.getColorFromMouse(e);
71 | }
72 | return true;
73 | },
74 |
75 | oneClick: function( callback )
76 | {
77 | if(ToolsModule.current_tool != this)
78 | this._old_tool = ToolsModule.current_tool;
79 |
80 | ToolsModule.enableTool(this.name);
81 | this.callback = callback;
82 | }
83 | };
84 |
85 | ToolsModule.registerTool( colorPickerTool );
86 |
87 |
--------------------------------------------------------------------------------
/editor/js/tools/drag.js:
--------------------------------------------------------------------------------
1 | var dragNodeTool = {
2 | name: "drag",
3 | description: "Drag node to inspector",
4 | section: "foo",
5 | icon: "imgs/mini-icon-cursor.png",
6 |
7 | state: null,
8 |
9 | mouse_pos: vec3.create(),
10 |
11 | onEnable: function()
12 | {
13 | gl.canvas.draggable = true;
14 | gl.ignore_events = true;
15 | gl.canvas.ondragstart = this.dragstart.bind(this);
16 | gl.canvas.ondrop = this.drop.bind(this);
17 | },
18 |
19 | onDisable: function()
20 | {
21 | gl.canvas.draggable = false;
22 | gl.ignore_events = false;
23 | gl.canvas.ondragstart = null;
24 | },
25 |
26 | renderEditor: function(camera)
27 | {
28 | },
29 |
30 | mousedown: function(e)
31 | {
32 | this.mouse_pos.set([e.canvasx, e.canvasy, 0]);
33 | this.state = "dragging";
34 | gl.ignore_events = true;
35 | e.skip_preventDefault = true;
36 | return true;
37 | },
38 |
39 | mousemove: function(e)
40 | {
41 | e.skip_preventDefault = true;
42 | return true;
43 | },
44 |
45 | dragstart: function(e)
46 | {
47 | console.log("DRAGSTART");
48 |
49 | GL.augmentEvent( e );
50 | var img = new Image();
51 | img.src = "imgs/mini-icon-ball.png";
52 | e.dataTransfer.setDragImage( img, 0, 0 );
53 |
54 | if (e.buttons != LS.Input.BUTTONS_LEFT) //left
55 | return;
56 |
57 | var instance_info = LS.Picking.getInstanceAtCanvasPosition( e.canvasx, e.canvasy, ToolUtils.getCamera() );
58 | if(!instance_info)
59 | return;
60 |
61 | var node = null;
62 |
63 | if( instance_info.constructor == LS.SceneNode )
64 | node = instance_info;
65 | else
66 | {
67 | if( instance_info.instance )
68 | {
69 | if( instance_info.instance.constructor == LS.SceneNode )
70 | node = instance_info.instance;
71 | else if( instance_info.instance.constructor.is_component)
72 | node = instance_info.instance._root;
73 | }
74 | }
75 |
76 | if( !node )
77 | return;
78 |
79 | var id = e.ctrlKey ? node.name : node.uid;
80 | e.dataTransfer.setData( "uid", node.uid );
81 | e.dataTransfer.setData( "class", "SceneNode" );
82 | e.dataTransfer.setData( "node_uid", id );
83 |
84 | return true;
85 | },
86 |
87 | drop: function(e)
88 | {
89 | console.log("DROP");
90 | e.stopPropagation();
91 | return true;
92 | }
93 | };
94 |
95 | ToolsModule.registerTool( dragNodeTool );
96 |
97 |
--------------------------------------------------------------------------------
/editor/js/tools/parenting.js:
--------------------------------------------------------------------------------
1 | var parentingNodeTool = {
2 | name: "parenting",
3 | description: "Drag to parent node",
4 | section: "foo",
5 | icon: "imgs/mini-icon-tree.png",
6 |
7 | state: null,
8 |
9 | mouse_pos: vec3.create(),
10 |
11 | renderEditor: function(camera)
12 | {
13 | if(!this.state)
14 | return;
15 |
16 | var node = SelectionModule.getSelectedNode();
17 | if(!node)
18 | return;
19 | if(!EditorView.mustRenderGizmos())
20 | return;
21 | if(!RenderModule.frame_updated)
22 | return;
23 |
24 | var gizmo_model = ToolUtils.getSelectionMatrix();
25 | if(!gizmo_model)
26 | return null;
27 |
28 | //var pos = node.transform.getGlobalPosition( this.node_center );
29 | var pos = vec3.create();
30 | mat4.multiplyVec3( pos, gizmo_model, pos );
31 |
32 | //ToolUtils.prepareDrawing();
33 | var camera2D = ToolUtils.enableCamera2D(camera);
34 | var pos2D = camera.project(pos); //project
35 |
36 | if(pos2D[2] < 0)
37 | return;
38 |
39 | pos2D[2] = 0;
40 |
41 | //now render the line
42 | gl.disable(gl.DEPTH_TEST);
43 | gl.enable(gl.BLEND);
44 | gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
45 | LS.Draw.setColor([1,0,1,1]);
46 |
47 | LS.Draw.renderLines([pos2D, this.mouse_pos]);
48 |
49 | gl.enable(gl.DEPTH_TEST);
50 | },
51 |
52 | mousedown: function(e)
53 | {
54 | if (e.which != 1)
55 | return;
56 |
57 | var instance_info = LS.Picking.getInstanceAtCanvasPosition( e.canvasx, e.canvasy, ToolUtils.getCamera() );
58 | SelectionModule.setSelection( instance_info );
59 | if(!instance_info)
60 | return;
61 |
62 | this.mouse_pos.set([e.canvasx, e.canvasy, 0]);
63 | this.state = "dragging";
64 | return true;
65 | },
66 |
67 | mouseup: function(e)
68 | {
69 | this.state = null;
70 | var scene = LS.GlobalScene;
71 | scene.refresh();
72 |
73 | var parent = scene.root;
74 | var child = SelectionModule.getSelectedNode();
75 | if(!child)
76 | return;
77 |
78 | var instance_info = LS.Picking.getInstanceAtCanvasPosition( e.canvasx, e.canvasy, ToolUtils.getCamera(e) );
79 | if(instance_info)
80 | {
81 | var selection = SelectionModule.convertSelection( instance_info );
82 | parent = selection.node;
83 | if(!parent)
84 | return;
85 | }
86 |
87 | if(parent == child)
88 | return;
89 |
90 | //save undo
91 | UndoModule.saveNodeParentingUndo( child );
92 |
93 | //change parent
94 | parent.addChild(child, null, true);
95 | return true;
96 | },
97 |
98 | mousemove: function(e)
99 | {
100 | if(!this.state)
101 | return;
102 |
103 | this.mouse_pos.set([e.canvasx, e.canvasy, 0]);
104 | LS.GlobalScene.refresh();
105 | return true;
106 | }
107 | };
108 |
109 | ToolsModule.registerTool( parentingNodeTool );
110 |
111 |
--------------------------------------------------------------------------------
/editor/js/tools/select.js:
--------------------------------------------------------------------------------
1 | //this tool is always on, it changes the selected item when clicked
2 | var selectTool = {
3 | name: "select",
4 | description: "Select a node",
5 | section: "select",
6 | icon: "imgs/mini-icon-cursor.png",
7 | keyShortcut: 81, //Q
8 |
9 | enabled: false,
10 |
11 | click_time: 200, //ms
12 | click_dist: 50, //in pixels (to avoid interpreting dragging as a fast click)
13 | click_pos: [0,0],
14 | last_click: 0,
15 |
16 | onRegister: function()
17 | {
18 | //RenderModule.canvas_manager.addWidget(this);
19 | ToolsModule.addBackgroundTool(this);
20 | },
21 |
22 | mousedown: function(e) {
23 | this.click_pos = [e.mousex,e.mousey];
24 | this._got_mousedown = true;
25 | var now = getTime();
26 |
27 | if( now - this.last_click < this.click_time && e.button == 0 )
28 | {
29 | //EditorModule.focusCameraInSelection();
30 | EditorModule.focusCameraInPixel( e );
31 | }
32 | this.last_click = now;
33 | },
34 |
35 | mousemove: function(e) {
36 | },
37 |
38 | mouseup: function(e) {
39 | //if(!this.enabled) return;
40 |
41 | e.preventDefault();
42 | e.stopPropagation();
43 |
44 | if(!this._got_mousedown)
45 | return; //somebody else captured the mousedown
46 |
47 | this._got_mousedown = false;
48 |
49 | if(e.button != 0)
50 | return;
51 |
52 | var now = getTime();
53 | var dist = Math.sqrt( (e.mousex - this.click_pos[0])<<2 + (e.mousey - this.click_pos[1])<<2 );
54 |
55 | //if it was a fast click and the mouse didnt move too much (dragging)
56 | if (e.click_time < this.click_time && dist < this.click_dist)
57 | {
58 | //Test if click was in GUI
59 | //TODO
60 |
61 | //PICKING in the Scene (this is slow, it requires to render the scene again)
62 | //use canvas because this func works in canvas coordinates, no mouse coordinates
63 | var instance_info = LS.Picking.getInstanceAtCanvasPosition( e.canvasx, e.canvasy, ToolUtils.getCamera(e) );
64 | if(!instance_info)
65 | return false;
66 |
67 | var r = false;
68 | if( instance_info.callback )
69 | r = instance_info.callback( instance_info, e );
70 | if(r)
71 | return false;
72 |
73 | if(e.shiftKey)
74 | {
75 | if( SelectionModule.isSelected( instance_info ) )
76 | SelectionModule.removeFromSelection( instance_info );
77 | else
78 | SelectionModule.addToSelection( instance_info );
79 | }
80 | else
81 | SelectionModule.setSelection( instance_info );
82 | }
83 |
84 | return false;
85 | }
86 | };
87 |
88 | ToolsModule.registerTool({ name: "select", display: false, module: selectTool });
89 |
90 |
--------------------------------------------------------------------------------
/editor/js/widgets/canvas/cameraPreview.js:
--------------------------------------------------------------------------------
1 |
2 | function CameraPreviewWidget( camera )
3 | {
4 | this._ctor();
5 |
6 | if(!camera)
7 | camera = LS.GlobalScene.root.camera;
8 |
9 | this.border = true;
10 | this.draggable = true;
11 | this.resizable = true;
12 | this.closable = true;
13 | this.camera = camera;
14 | this.position = [40,40];
15 | this.size = [250,200];
16 |
17 | if(this.camera)
18 | this.camera._preview_widget = this;
19 | }
20 |
21 | CameraPreviewWidget.prototype.onClose = function()
22 | {
23 | if(this.camera)
24 | this.camera._preview_widget = null;
25 | }
26 |
27 | CameraPreviewWidget.prototype.onRender = function( ctx, viewport )
28 | {
29 | if(!this.camera)
30 | return;
31 |
32 | var old = gl.getViewport();
33 | gl.setViewport( viewport, true );
34 |
35 | var render_settings = RenderModule.render_settings;
36 |
37 | this.camera.final_aspect = viewport[2] / viewport[3];
38 | LS.Renderer.clearBuffer( this.camera, render_settings );
39 | LS.Renderer.enableCamera( this.camera, render_settings, true );
40 | LS.Renderer.renderInstances( render_settings );
41 | gl.setViewport( old );//restore
42 |
43 | //restore flags
44 | gl.disable( gl.CULL_FACE );
45 | gl.disable( gl.DEPTH_TEST );
46 | gl.enable( gl.BLEND );
47 | gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
48 | }
49 |
50 | CameraPreviewWidget.prototype.onEvent = function(e)
51 | {
52 | var that = this;
53 |
54 | if(e.type == "mousemove")
55 | return;
56 |
57 | if(e.type == "mousedown" && e.rightButton && this.isEventInside(e))
58 | {
59 | if(!this.camera)
60 | {
61 | EditorModule.showSelectSceneCameraContextMenu(e, null, function(camera){
62 | that.camera = camera;
63 | });
64 | }
65 | else
66 | {
67 | var menu = EditorModule.showComponentContextMenu( this.camera, e );
68 | menu.addItem(null,null); //separator
69 | menu.addItem("Select Camera", {
70 | callback: function( v,o, e ){
71 | EditorModule.showSelectSceneCameraContextMenu(e, menu, function(camera){
72 | that.camera = camera;
73 | LS.GlobalScene.requestFrame();
74 | });
75 | }
76 | });
77 | }
78 | return true;
79 | }
80 | if(e.type == "mouseup" && e.button == 2 && this.isEventInside(e))
81 | return true;
82 | }
83 |
84 | LS.extendClass( CameraPreviewWidget, CanvasElement );
85 |
86 | EditorModule.registerCanvasWidget( CameraPreviewWidget );
--------------------------------------------------------------------------------
/editor/js/widgets/ui/textureAreasWidget.js:
--------------------------------------------------------------------------------
1 | //Work in progress: the idea was to help set areas inside a texture atlas
2 | function TextureAreasWidget( options )
3 | {
4 | this.root = null;
5 | this.createInterface( options );
6 | }
7 |
8 | TextureAreasWidget.widget_name = "Texture Areas";
9 |
10 | TextureAreasWidget.createDialog = function( parent, component )
11 | {
12 | var dialog = new LiteGUI.Dialog( { title: TextureAreasWidget.widget_name, fullcontent: true, closable: true, draggable: true, detachable: true, minimize: true, resizable: true, parent: parent, width: 800, height: 500 });
13 | var widget = new TextureAreasWidget();
14 | dialog.add( widget );
15 | dialog.widget = widget;
16 | dialog.on_resize = function()
17 | {
18 | widget.onResize();
19 | }
20 | widget.onResize()
21 | return dialog;
22 | }
23 |
24 | TextureAreasWidget.prototype.createInterface = function()
25 | {
26 | this.root = document.createElement("div");
27 | this.root.style.width = "100%";
28 | this.root.style.height = "100%";
29 | this.canvas = createCanvas(100,100);
30 | this.root.appendChild( this.canvas );
31 |
32 | this.render();
33 | }
34 |
35 | TextureAreasWidget.prototype.render = function()
36 | {
37 | var rect = LiteGUI.getRect( this.canvas.parentNode );
38 | if(!rect)
39 | return;
40 |
41 | if(this.canvas.width != rect.width )
42 | this.canvas.width = rect.width;
43 | if(this.canvas.height != rect.height )
44 | this.canvas.height = rect.height;
45 |
46 | var ctx = this.canvas.getContext("2d");
47 | ctx.fillStyle = "red";
48 | ctx.fillRect( 0,0, this.canvas.width, this.canvas.height );
49 | }
50 |
51 | TextureAreasWidget.prototype.onResize = function()
52 | {
53 | this.render();
54 | }
--------------------------------------------------------------------------------
/editor/media/back_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/back_button.png
--------------------------------------------------------------------------------
/editor/media/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/download.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-brush.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-brush.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-camera.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-camera.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-cursor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-cursor.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-file.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-fov.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-fov.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-gear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-gear.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-gizmo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-gizmo.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-light.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-mesh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-mesh.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-orbit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-orbit.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-rotate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-rotate.png
--------------------------------------------------------------------------------
/editor/media/icons/mini-icon-scale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/icons/mini-icon-scale.png
--------------------------------------------------------------------------------
/editor/media/mini-icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/mini-icons.png
--------------------------------------------------------------------------------
/editor/media/tree_lines_16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/tree_lines_16x16.png
--------------------------------------------------------------------------------
/editor/media/tree_lines_bold_16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/editor/media/tree_lines_bold_16x16.png
--------------------------------------------------------------------------------
/editor/player.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | WebGLStudio Player
7 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/guides/README.md:
--------------------------------------------------------------------------------
1 | # WebGLStudio #
2 |
3 | Welcome to the guide to understand and use WebGLStudio.
4 |
5 | First of all remind you that this is a work-in-progress project that at this moment is maintained by a single person,
6 | and due to the scope of the project it is still in a beta state. However we have been using it for several internal projects
7 | with very good results.
8 |
9 | ## What is WebGLStudio? ##
10 |
11 | WebGLStudio is an open-source 3D scene editor for the web, developed in Javascript, it includes its own 3D Engine
12 | (for more information about the engine visit [LiteScene repository](https://github.com/jagenjo/litescene.js)) and other interesting features like code editing, resources managment,
13 | graph behaviours, animations, and a user-friendly interface.
14 |
15 | It has been created to be very modular and easy to expand by not forcing any rendering pipeline (but providing one).
16 |
17 | Any creation done in WebGLStudio can be easily shared online with a link, exported in a ZIP (including data and player) or embeded in an existing website.
18 |
19 | Creations could be packed in one single file (ZIP or special binary format) so it is easy to store and share.
20 |
21 | ## But what can I do with it? ##
22 |
23 | You can import assets from different sources (3D Meshes, textures, sounds, animations) and arrange them in a 3D Space.
24 | Then you can edit their visual appearence, add behaviours through scripting in javascript or using the graph system, use HTML to create the interface, and when your scene is ready you can share it using one link.
25 |
26 | ## Can I create 3D models? ##
27 |
28 | No, WebGLStudio is not a 3D Modeling software (maybe in the future), for that purpose I recommend to use Blender or check online tools like Clara.io
29 |
30 | ## What if I'm an advanced user? ##
31 |
32 | WebGLStudio allows to code your own shaders from the editor, create your own post-processing effects, even redo the render pipeline. All the engine is done in Javascript, so it means you have total freedom to change any part.
33 |
34 | ## What 3D Engine powers WebGLStudio? ##
35 |
36 | WebGLStudio was created around its own 3D engine called LiteScene, which was tailored to fulfill all the needs of the editor.
37 |
38 | If you want to know all about the inners of LiteScene, check the [guides in the LiteScene repository](https://github.com/jagenjo/litescene.js/tree/master/guides).
39 |
40 |
41 | ## Who has developed WebGLStudio? ##
42 |
43 | It has been developed by Javi Agenjo at the Interactive Technologies Group (GTI) at University Pompeu Fabra (Barcelona),
44 | thanks to fundings from the European Union and local institutions.
45 |
46 | ## Is there any tutorials, videos, books or content to learn how to use it? ##
47 |
48 | Not yet, but I'm working on that, but there are guides in the repositories of [LiteScene](https://github.com/jagenjo/litescene.js/tree/master/guides) and in this repository.
49 |
50 | ## Which major features are missing? ##
51 |
52 | There is no physics engine working yet (although there had been some test), also there is basic frustum culling and no spatial tree, that means there is a big performance drop in scene with hundres of meshes (work in progress).
53 |
54 | You cannot import FBXs (although DAEs are supported which contain the same info).
55 |
56 | ## Which Licensing does it use? ##
57 |
58 | It uses the MIT license, which means that you can use this software for whatever you want as long as you keep the same licensing.
59 |
60 | You are free to install it in your server and modify it to your own purposes.
61 |
62 |
--------------------------------------------------------------------------------
/guides/components.md:
--------------------------------------------------------------------------------
1 | # Components in WebGLStudio
2 |
3 | LiteScene, the engine used by WebGLStudio, is a component based engine.
4 |
5 | That means that any action performed by the system, like rendering on the screen, adding lights, applying postprocessing effects,
6 | or executing scripts, comes from one of the many components.
7 |
8 | Components are attached to the nodes in the scene to extend the properties of every node, this way the system is very modular and easy to extend.
9 |
10 | For a better understanding of components, check the [LiteScene Components Guide](https://github.com/jagenjo/litescene.js/blob/master/guides/components.md)
11 |
--------------------------------------------------------------------------------
/guides/editor_architecture.md:
--------------------------------------------------------------------------------
1 | # Editor Architecture
2 |
3 | In this guide I will try to explain how the editor is structured internally.
4 |
5 | This guide is meant for people willing to improve the editor somehow (through plugins or editing the base code).
6 |
7 | ## Structure
8 |
9 | ### Libraries
10 |
11 | WebGLStudio relies in several libraries that were developed for this project.
12 |
13 | * **LiteGL**: is the library in charge of wrapping the WebGL driver
14 | * **LiteScene**: is the engine used to handle the 3D scenes.
15 | * **LiteGUI**: is the library used to build the interface
16 | * **LiteGraph**: is the library used to create graphs
17 | * **LiteFileSystem**: is the library in charge of storing files in the back-end
18 |
19 | You do now need to understand all of them in depth, just to know what features bring to the editor in case you want to extend them.
20 |
21 | ### CORE
22 |
23 | The ```CORE``` (core.js) is the global class created once the website is loaded, is the one in charge of loading the rest of the files.
24 | It also handles some global properties (like user preferences and configuration).
25 |
26 | Inside the CORE all the loaded modules are stored.
27 |
28 | ### Modules
29 |
30 | Modules are independent elements of the editor that provide some functionality.
31 | Modules can interact with the interface, with the 3D canvas and process the user input.
32 | Almost every feature of the editor is stored in one Module, here is a list of the most important ones:
33 | * **RenderModule**: in charge of rendering the 3D canvas.
34 | * **DriveModule**: in charge of storing files.
35 | * **EditorModule**: in charge of the elements that allow to edit the scene.
36 | * **PluginModule**: to load plugins from the editor.
37 | * **PreferencesModule**: To store user preferences about the editor.
38 | * **SceneStorageModule**: in charge of loading/saving the scenes.
39 | * **ToolsModule**: in charge of the canvas buttons to toggle/enable tools.
40 | * **SelectionModule**: in charge of controling user selection of elements in the scene.
41 | * **UndoModule**: in charge of history of changes.
42 |
43 | ### UI Widgets
44 |
45 | The UI Widgets are classes that allow to access some properties of the system and edit them.
46 |
47 | The important UI widgets are:
48 |
49 | - InspectorWidget: to inspect any object of the system
50 | - ResourcesPanelWidget: to choose any resource in the server or local
51 | - CodingPad: to code
52 | - SceneTree: to select any node of the current scene
53 | - Timeline: to edit animations
54 | - GraphWidget: to edit a graph
55 |
56 | ### Canvas Widgets
57 |
58 | This widgets are meant to be rendered inside the 3D Canvas and are used to interact with the scene.
59 |
60 | ### Tools
61 |
62 | Tools are in charge of giving ways to interact with the 3D content. Like moving objects in the scene, or selecting, or moving the camera.
63 | They can intercept user input inside the canvas to perform actions.
64 |
65 | The most important tools are:
66 |
67 | - camera: to move the camera around
68 | - select: to select elements by clicking
69 | - move: to move nodes
70 | - rotate: to rotate nodes
71 | - scale: to scale nodes
72 | - manipulate: to move in a friendly way
73 | - parenting: to select node parent
74 |
75 |
76 |
--------------------------------------------------------------------------------
/guides/file_system.md:
--------------------------------------------------------------------------------
1 | # File System
2 |
3 | WebGLStudio allows to store files server side so all your changes can be persistent between sessions even if you login from different computers.
4 |
5 | It also enables to share your creations between other users or reuse components/prefabs created by other users.
6 |
7 | To achieve this the WebGLStudio uses the library [LiteFileSystem](https://github.com/jagenjo/litefilesystem.js).
8 |
9 | ## DriveModule
10 |
11 | The Module in the system in charge of all the resources is called DriveModule.
12 |
13 | Here is an example of how to save a resource in the system:
14 |
15 | ```js
16 | var res = new LS.Resource();
17 | res.filename = "guest/temp/foo.json";
18 | res.data = JSON.stringify({ name: "javi" });
19 |
20 | DriveModule.saveResource( res );
21 | ```
22 |
--------------------------------------------------------------------------------
/guides/graphs.md:
--------------------------------------------------------------------------------
1 | # Graphs
2 |
3 | WebGLStudio allows to use graphs to control the behaviour or to connect properties of different components.
4 |
5 | This makes it easier than coding and less prone to errors, but it is also very limited.
6 |
7 | Using graphs we can assign values to properties of our scene just by dragging wires.
8 |
9 | Values could come from other properties on the scene or by more complex computations (using random, trigonometry, math operations, etc).
10 |
11 | It is very handy when you just want to ensure two properties have the same value (or a value related to each other). For instance, when we move one scene node there is another that updates its Y position to match the one on the first node.
12 |
13 | # Usage
14 |
15 | To use graphs in our scene first you need to create a GraphComponent in any of the nodes in our scene.
16 |
17 | There are different Graph component clases depending if the graph is for behaviour or for rendering (```GraphComponent```, ```FXGraphComponent```).
18 |
19 | Also you can choose when a graph is executed (before rendering, after rendering, during the update, on startup, on trigger etc).
20 |
21 | To edit a graph click the ```Edit Graph``` button in the component, this will bring the graph editor view.
22 |
23 | Once the graph is visible there are different ways to create nodes.
24 |
25 | Right-clicking in the canvas will show the menu to add a new node, there are lots of nodes sorted by categories. Select any of them and it will appear in the canvas.
26 |
27 | If what we want is bring any property from our scene to the canvas, just drag the component or property from the inspector into the canvas.
28 |
29 | To drag components you must drag the component icon next to the name in the inspector.
30 |
31 | To drag properties you must drag the ball icon next to the name of the property.
32 |
33 | Once you drag them into the canvas a new GraphNode will appear in the canvas.
34 |
35 | GraphNodes have inputs and outputs by default, but you can add new input/outputs right-clicking in the node and choosing from the inputs outputs menu. It depends in the node itself.
36 |
37 | When you want to connect the values between two nodes, you just drag the output slot of the node to the input slot of the other node.
38 |
39 | To break a connection just click in the input node connection.
40 |
41 | To edit the properties of any node double-click on it and check the inspector info.
42 |
43 | ## Documentation
44 |
45 | To know more about graph check the [LiteGraph documentation](https://github.com/jagenjo/litegraph.js).
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/guides/imgs/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/guides/imgs/tutorial_shaders_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/guides/imgs/tutorial_shaders_1.png
--------------------------------------------------------------------------------
/guides/imgs/tutorial_shaders_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/guides/imgs/tutorial_shaders_2.png
--------------------------------------------------------------------------------
/guides/imgs/tutorial_shaders_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/guides/imgs/tutorial_shaders_3.png
--------------------------------------------------------------------------------
/guides/imgs/webglstudio_interface.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/guides/imgs/webglstudio_interface.png
--------------------------------------------------------------------------------
/guides/plugins.md:
--------------------------------------------------------------------------------
1 | # Plugins
2 | You can create your own plugins for WebGLStudio, this way if you miss some functionality in the editor you can coded it easily.
3 |
4 | The plugin can be loaded from the Edit -> Preferences -> Plugins menu.
5 |
6 | Plugins are javascript files loaded once the application has been loaded, they can add new options to the menus, new buttons in the interface, new parsers, etc. Plugins shouldn't be used to add new features to the engine LiteScene, because plugins are not exported with the scenes. New features for the engine should be in a script that is included in the scene, and a plugin can be made to add an editor to that feature.
7 |
8 | To code plugins you must understand a little bit how WebGLStudio is organized, check the WebGLStudio [architecture guide](editor_architecture.md).
9 |
10 | You also need to use the LiteGUI library that allows you to create panels, widgets, contextual menus, etc.
11 |
12 | ## Registering the Plugin
13 |
14 | You must create a class that contains the next methods:
15 |
16 | * ```init```: called once the plugin is loaded in memory, after the system is ready
17 | * ```deinit```: called if the user decides to remove the plugin from memory
18 |
19 | Also if your plugin requires to save information locally you can store them in the preferences property of the plugin.
20 |
21 | And after defining your class you must register it:
22 |
23 | ```js
24 | CORE.registerPlugin( MyPlugin );
25 | ```
26 |
27 | ## Creating panels
28 |
29 | The first use of plugins is to create new panels that can be openend for special purposes.
30 |
31 | Here is an example of how to create a simple dialog using LiteGUI:
32 |
33 | ```js
34 | showDialog: function()
35 | {
36 | var dialog = new LiteGUI.Dialog({title:"Editor", close: true, width: 300, height: 120, scroll: false, draggable: true});
37 | var widgets = new LiteGUI.Inspector();
38 | dialog.add(widgets);
39 | widgets.addButton("My button","Click", function(){ console.log("clicked"); });
40 | dialog.show();
41 | dialog.adjustSize();
42 | }
43 | ```
44 |
45 | For more info about LiteGUI check [the repository and guides for LiteGUI](https://github.com/jagenjo/litegui.js/tree/master).
46 |
47 | ## Adding entries to the menus
48 |
49 | Probably you want to have a menu option to open your special panels. To do that you need to:
50 | ```js
51 | //in the plugin init...
52 | LiteGUI.menubar.add("Window/MyPanel", { callback: function() { MyPlugin.showDialog(); }});
53 |
54 | //in the plugin deinit...
55 | LiteGUI.menubar.remove("Window/MyPanel");
56 | ```
57 |
58 | ## Creating components for LiteScene
59 |
60 | You can create new components from the plugin. This components will only be available if the plugin is loaded so it is more a temporary way for developing components than a final solution.
61 |
62 | Check the [guide to create components](https://github.com/jagenjo/litescene.js/blob/master/guides/programming_components.md) to know more.
63 |
64 | ## Example
65 |
66 | ```js
67 | var MyPlugin = {
68 | name: "myplugin",
69 |
70 | preferences: {},
71 |
72 | init: function()
73 | {
74 | //in case it needs to load other JS files
75 | LiteGUI.requireScript(["..."], inner );
76 |
77 | function inner(v)
78 | {
79 | console.log("plugin loaded");
80 | }
81 | },
82 |
83 | deinit: function()
84 | {
85 | //called when the plugin has been removed
86 | }
87 | };
88 |
89 | CORE.registerPlugin( MyPlugin );
90 | ```
91 |
--------------------------------------------------------------------------------
/guides/tools.md:
--------------------------------------------------------------------------------
1 | # Tools
2 |
3 | To interact with the scene we resort to tools that transform our mouse inputs to actions.
4 |
5 | Common tools are Move, Rotate, Scale, but also Disable GUI, etc.
6 |
7 | Tool buttons are distributed around the Canvas.
8 |
9 | In case you want to create your own tool here is a simple guide.
10 |
11 | # Create an object
12 |
13 | The object that holds a tool can have the next properties:
14 |
15 | - **name**: used to assign the tool
16 | - **description**: shown when the mouse is over the button
17 | - **section**: sections are used to group buttons together
18 | - **icon**: url to the icon to show in the button
19 | - **keyShortcut**: optional, in case you want to show the icon in the button
20 | - **enabled**: in case it must be drawn like enabled
21 |
22 | And the next methods:
23 |
24 | - **callback**: called when the user clicks the button
25 | - **mousedown**, **mousemove**, **mouseup**, **mousewheel**: to catch mouse events
26 | - **renderEditor**: to render helpers. Check the [LS.Draw guide to render](https://github.com/jagenjo/litescene.js/blob/master/guides/draw.md)
27 |
28 | # Register the class
29 |
30 | Tools must be registered to be available from the system.
31 |
32 | ```js
33 | ToolsModule.registerTool( moveTool );
34 | ```
35 |
--------------------------------------------------------------------------------
/plugins/list.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts":[
3 | {
4 | "name":"Animation Retargeting",
5 | "author":"Javi Agenjo",
6 | "version": "0.1",
7 | "script_url":"scripts/retargeting.js",
8 | "includes":[],
9 | "description":"Transform animation to match another skeleton"
10 | },
11 | {
12 | "name":"FBX Importer (experimental)",
13 | "author":"Javi Agenjo",
14 | "version": "0.1",
15 | "script_url":"scripts/fbxconv.js",
16 | "includes":[],
17 | "description":"Allows to import FBXs by sending the file to the server."
18 | },
19 | {
20 | "name":"SpriteSheet",
21 | "author":"Javi Agenjo",
22 | "version": "0.1",
23 | "script_url":"scripts/spritesheet.js",
24 | "includes":[],
25 | "description":"Allows to create sprite sheets from an animated 3D model."
26 | },
27 | {
28 | "name":"Deployer",
29 | "author":"Javi Agenjo",
30 | "version": "0.1",
31 | "script_url":"scripts/deployer.js",
32 | "includes":[],
33 | "description":"Allows to sync a project with a remote server, useful to publish your project somewhere else."
34 | },
35 | {
36 | "name":"Mitsuba Importer",
37 | "author":"Javi Agenjo",
38 | "version": "0.1",
39 | "script_url":"scripts/mitsuba.js",
40 | "includes":[],
41 | "description":"Imports XML files from mitsuba"
42 | }
43 | ]
44 | }
--------------------------------------------------------------------------------
/plugins/scripts/ctmparser.js:
--------------------------------------------------------------------------------
1 | //this is a file that is not included in the config.json, the purpose is to test the CTM Parser
2 |
3 | //http://fractalfantasy.net/#/4/uncanny_valley
4 | //http://fractalfantasy.net/uncannyvalley/assets/Head_03.ctm
5 | //http://fractalfantasy.net/uncannyvalley/assets/Head_03_Colour_2K.jpg
6 | //http://fractalfantasy.net/uncannyvalley/assets/Head_03_Gloss_2k.jpg
7 | //http://fractalfantasy.net/uncannyvalley/assets/Head_03_Bump_2K.jpg
8 |
9 | var CTMParser = {
10 |
11 | name: "ctmparser",
12 | type: "mesh",
13 | format: "text",
14 | dataType:'text',
15 | mimeType: "text/plain; charset=x-user-defined",
16 |
17 | init: function()
18 | {
19 | /*
20 | LiteGUI.requireScript([], inner );
21 |
22 | function retrieve(url, callback){
23 | var request = new XMLHttpRequest();
24 | request.open("GET", url, true);
25 | request.overrideMimeType("text/plain; charset=x-user-defined");
26 | request.send();
27 | request.onload = callback;
28 | return request;
29 | };
30 |
31 | function inner()
32 | {
33 | //var request = retrieve("url to ctm file to test", loaded );
34 | }
35 | */
36 | },
37 |
38 | deinit: function()
39 | {
40 | },
41 |
42 | showDialog: function()
43 | {
44 | var dialog = new LiteGUI.Dialog("dialog_daylight", {title:"Day light editor", close: true, width: 300, height: 120, scroll: false, draggable: true});
45 | dialog.show('fade');
46 | },
47 |
48 | parse: function(data)
49 | {
50 | var stream = new CTM.Stream(data);
51 | var file = new CTM.File(stream);
52 | if(!file)
53 | return;
54 | console.log( file );
55 | var mesh = GL.Mesh.load({ vertices: file.body.vertices, triangles: file.body.indices, normals: file.body.normals, coords: file.body.uvMaps[0].uv });
56 | LS.RM.registerResource( "test.ctm", mesh );
57 | console.log("Mesh registered");
58 | return mesh;
59 | }
60 | }
61 |
62 | LS.Network.requestScript("js/plugins/extra/lzma.js");
63 | LS.Network.requestScript("js/plugins/extra/ctm.js");
64 | LS.Formats.addSupportedFormat( "ctm", CTMParser );
65 |
66 |
67 |
--------------------------------------------------------------------------------
/plugins/scripts/daylight.js:
--------------------------------------------------------------------------------
1 | //this is a file that is not included in the config.json, the purpose is to test the
2 |
3 |
4 | var DayLightTool = {
5 |
6 | name: "daylight",
7 |
8 | init: function()
9 | {
10 | LiteGUI.menubar.add("Actions/Tools/day light", { callback: function() { DayLightTool.showDialog(); }});
11 | }
12 |
13 | showDialog: function()
14 | {
15 | var dialog = new LiteGUI.Dialog("dialog_daylight", {title:"Day light editor", close: true, width: 300, height: 120, scroll: false, draggable: true});
16 | dialog.show('fade');
17 |
18 | var scene = LS.GlobalScene;
19 | var light = scene.root.light;
20 |
21 | var sun_height = scene.extra.sun_height || 1;
22 | var sun_orientation = scene.extra.sun_orientation || 0;
23 | var sun_distance = scene.extra.sun_distance || vec3.dist( light.position, light.target);
24 | var change_color = false;
25 |
26 | var widgets = new LiteGUI.Inspector();
27 | widgets.addSlider("Sun Height", sun_height, { min:0, max:1, step:0.001, callback: function(v) { sun_height = v; inner_update(); }});
28 | widgets.addSlider("Sun Orientation", sun_orientation, { min:0, max:360, step:1, callback: function(v) { sun_orientation = v; inner_update(); }});
29 | widgets.addSlider("Sun Distance", sun_distance, { min:0, max:1000, step:1, callback: function(v) { sun_distance = v; inner_update(); }});
30 | widgets.addCheckbox("Change color", change_color, { callback: function(v) { change_color = v; inner_update(); }});
31 | dialog.add(widgets);
32 |
33 | var gradient_sun = [[0,0,0],[0.4,0.512,0.2],[1,0.68,0.2],[1,0.93,0.7],[1,1,1],[1,1,1]];
34 | var gradient_sky = [[0,0,0],[0.1752,0.22272,0.24], [0.7,0.4,0.02],[0.55,0.74,0.94],[0.75,0.91,0.97],[0.75,0.91,0.97]];
35 |
36 | inner_update();
37 |
38 | function inner_update()
39 | {
40 | light.type = Light.DIRECTIONAL;
41 | light.size = 140;
42 |
43 | //color
44 | if(change_color)
45 | {
46 | var c = null;
47 | var c1 = Math.floor(sun_height * (gradient_sun.length-1));
48 | var c2 = Math.ceil(sun_height * (gradient_sun.length-1));
49 | var f = sun_height * (gradient_sun.length-1) % 1;
50 |
51 | vec3.lerp( light.color, gradient_sun[c1], gradient_sun[c2],f );
52 | if(scene.info)
53 | {
54 | vec3.lerp( scene.info.background_color, gradient_sky[c1], gradient_sky[c2],f);
55 | vec3.lerp( scene.info.ambient_color, gradient_sky[c1], gradient_sky[c2],f );
56 | vec3.scale( scene.info.ambient_color, scene.info.ambient_color, 0.8 );
57 | }
58 | }
59 |
60 | //position
61 | var rot_pitch = quat.setAxisAngle( quat.create(), [1,0,0], (1-sun_height) * Math.PI * 0.5 );
62 | vec3.transformQuat( light.position, [0,sun_distance,0], rot_pitch);
63 |
64 | var rot_yaw = quat.setAxisAngle(quat.create(), [0,1,0], sun_orientation * 0.0174532925);
65 | vec3.transformQuat(light.position, light.position, rot_yaw);
66 | light.target.set([0,0,0]);
67 |
68 | scene.extra.sun_height = sun_height;
69 | scene.extra.sun_orientation = sun_orientation;
70 | scene.extra.sun_distance = sun_distance;
71 |
72 | RenderModule.requestFrame();
73 | }
74 | }
75 | }
76 |
77 | CORE.registerModule( DayLightTool );
78 |
--------------------------------------------------------------------------------
/plugins/scripts/recorder.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/press/images/interface.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/press/images/interface.jpg
--------------------------------------------------------------------------------
/press/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onedit/editor/c1cef60780ac2bd8e3dbf967c68152bba263cad2/press/images/logo.png
--------------------------------------------------------------------------------
/serverapps/fbxconv/README.md:
--------------------------------------------------------------------------------
1 | fbx-conv
2 | ========
3 |
4 | [](http://144.76.220.132:8080/job/fbx-conv/)
5 |
6 | Command line utility using the FBX SDK to convert [FBX/Collada/Obj files](http://docs.autodesk.com/FBX/2014/ENU/FBX-SDK-Documentation/files/GUID-0B122E01-7DB8-48E3-AADA-5E85A197FEE1.htm)
7 | to more runtime friendly formats. The FBX content is parsed into an
8 | in-memory datastructure. Pluggable writers then take this datastructure
9 | to generate the output. Send us a pull request if you want the writer
10 | for your engine/framework/app to be integrated. We'll build the
11 | converter for Windows, Linux and Mac.
12 |
13 | The FBX parser is largely based on GamePlay SDK's encoder. We'll try to
14 | back-port any bug fixes or improvements.
15 |
16 | Hangout notes https://docs.google.com/document/d/1nz-RexbymNtA4pW1B5tXays0tjByBvO8BJSKrWeU69g/edit#
17 |
18 | Command-line Usage
19 | ====================
20 | * Windows - `fbx-conv-win32.exe [options] [
3 | 