Skip to content

Adds Texture Upload and Custom Uniforms #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open

Adds Texture Upload and Custom Uniforms #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
9ac2a57
Allow Custom Model Files
Dec 11, 2016
edc2399
Added javascript uniform support
josepharhar Dec 9, 2016
9b4e880
Lol, someone forgot to close parentheses...
Dec 11, 2016
baaac5f
Added easier UI for entering Uniforms
atran67 Dec 11, 2016
0c52694
Added vec2 and bool support
atran67 Dec 12, 2016
0ab1c24
Merge branch 'build-with-npm'
Dec 12, 2016
994a41f
Merge branch 'custom-model-upload'
Dec 12, 2016
089433b
Merge branch 'uniforms'
Dec 12, 2016
5349130
Fixed merge issue
Dec 12, 2016
2a043ed
Allow user to specify texture, need to let them upload it somewhere
Dec 12, 2016
bc1ab46
Added UI
Dec 13, 2016
30a8aae
Texture Upload and example works
Dec 13, 2016
eae5cfd
Better looking snippet
Dec 13, 2016
c8642e1
Merge branch 'master' of https://github.com/BKcore/Shdr
Dec 13, 2016
211a686
Readme merge error
Dec 13, 2016
d305d54
Removed some log statements
Dec 13, 2016
732c0f8
Minor fixes to app and texture:
Dec 13, 2016
9627cfe
Added Error messages and bug fix for vec4
atran67 Dec 13, 2016
ae05df7
Updated draw distance, made model selection text look nicer
Dec 13, 2016
26a1db0
cleaned up and unified with upstream
josepharhar Dec 13, 2016
302a620
Better texture snippet
Dec 13, 2016
a29a2de
Merge branch 'master' of https://github.com/alexottoboni/Shdr
Dec 13, 2016
52b3b7b
Test out github pages
Dec 13, 2016
3a1df45
Added index page:
Dec 13, 2016
64f0cb8
Adds Texture Upload and Custom Uniforms
Dec 20, 2016
9f966a2
Cleanup extra leftovers
Dec 20, 2016
1454d66
Remove console log statements
Dec 20, 2016
54abaeb
Add UV coordinate access to default snippet
Dec 21, 2016
8fa675c
Better color for readability
Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions build/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ var files = [
base+"libs/zip/rawinflate.js",
base+"shdr/App.js",
base+"shdr/Models.js",
base+"shdr/Textures.js",
base+"shdr/Snippets.js",
base+"shdr/Storage.js",
base+"shdr/UI.js",
Expand Down
189 changes: 189 additions & 0 deletions docs/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shdr Editor</title>
<meta name="description" content="Shdr is a live ESSL (GLSL) shader editor, viewer and validator powered by WebGL and built by Thibaut Despoulain (BKcore).">
<meta name="viewport" content="width=device-width">
<meta name="google-site-verification" content="9aMzbIqnVsSKifyPR9OdN8HoKfTbsE3W8lSQ9M66zwk">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/ubuntu-mono/font.css">
</head>
<body>

<!-- inline preloader -->
<div id="main-loader" style="position: absolute; z-index: 10000; top: 0; bottom: 0; left: 0; right: 0; background: #000; color: #000; font-family: Arial, 'Ubuntu sans', sans-serif; font-size: 32px; font-weight: bold;">
<div style="position: absolute; z-index: 10001; top: 50%; left: 0; width: 100%; background: #191919; text-align: center; line-height: 60px; margin-top: -30px; border-top: 1px solid #333; border-bottom: 1px solid #333;">
<img src="img/loader.gif" height="32" width="32" alt="Loading..." style="margin-bottom: -4px"> Fetching stuff.
</div>
</div>

<!-- app structure -->
<div id="panel-top">
<div class="menu" id="menu-new" data-action="new">
<button type="button" class="menu-trigger menu-icon-only"><i class="icon-file"></i></button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="confirm">Confirm</button>
<button type="button" class="menu-item" data-index="cancel">Cancel</button>
</div>
</div>
<div class="menu" id="menu-load" data-action="load">
<button type="button" class="menu-trigger menu-icon-only"><i class="icon-folder-open-alt"></i></button>
<div class="menu-list"></div>
</div>
<div class="menu" id="menu-save" data-action="save">
<button type="button" class="menu-button menu-icon-only"><i class="icon-save"></i></button>
</div>
<div class="menu" id="menu-name" data-action="name">
<div class="menu-blank">
<input type="text" value="Untitled" id="save-name">
</div>
</div>
<div class="menu" id="menu-remove" data-action="remove">
<button type="button" class="menu-trigger menu-icon-only"><i class="icon-trash"></i></button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="confirm">Confirm</button>
<button type="button" class="menu-item" data-index="cancel">Cancel</button>
</div>
</div>
<div class="menu" id="menu-mode" data-action="mode">
<button type="button" class="menu-trigger"><i class="icon-pencil"></i><span>Fragment</span></button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="0">Fragment</button>
<button type="button" class="menu-item" data-index="1">Vertex</button>
<button type="button" class="menu-item" data-index="2">Uniforms</button>
</div>
</div>
<div class="menu" id="menu-update" data-action="update">
<button type="button" class="menu-trigger"><i class="icon-circle"></i>Auto update</button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="0"><i class="icon-circle"></i>Auto Update</button>
<button type="button" class="menu-item" data-index="1"><i class="icon-adjust"></i>ENTER Update</button>
<button type="button" class="menu-item" data-index="2"><i class="icon-circle-blank"></i>Ctrl+S Update</button>
</div>
</div>
<div class="menu" id="menu-snippets" data-action="snippets">
<button type="button" class="menu-trigger"><i class="icon-plus"></i>Snippets</button>
<div class="menu-list"></div>
</div>
<div class="menu" id="menu-download" data-action="download">
<button type="button" class="menu-button"><i class="icon-download-alt"></i>Download</button>
</div>
<div class="menu" id="menu-upload" data-action="upload">
<button type="button" class="menu-button"><i class="icon-upload-alt"></i>Upload Model</button>
</div>
<div class="menu" id="menu-texture" data-action="texture">
<button type="button" class="menu-button"><i class="icon-upload-alt"></i>Upload Texture</button>
</div>
<div class="menu" id="menu-share" data-action="share">
<button type="button" class="menu-button"><i class="icon-share-alt"></i>Share</button>
</div>
<!-- LEFT/RIGHT -->
<div class="menu menu-right" id="menu-models" data-action="models">
<button type="button" class="menu-trigger"><i class="icon-reorder"></i><span>Suzanne (high)</span></button>
<div class="menu-list"></div>
</div>
<div class="menu menu-right" id="menu-rotate" data-action="rotate">
<button type="button" class="menu-toggle menu-icon-only" data-current="0" data-off="1" data-on="0">
<i class="icon-play" data-on="icon-pause" data-off="icon-play"></i>
</button>
</div>
</div>

<div id="panel-main">
<div id="panel-left">
<div id="editor"></div>
</div>
<div id="panel-right">
<div id="viewer"></div>
<div id="shdr">Shdr</div>
<div id="model-loader">
<img src="img/loader.gif" height="32" width="32" alt="Loading model...">
</div>
</div>
</div>

<div id="panel-bottom">
<div id="status">
<span class="status-success"><i class="icon-ok-sign"></i><b>Ready</b></span>
</div>
<div id="footer">
<div class="menu menu-right menu-status" id="menu-about" data-action="about">
<button type="button" class="menu-button"><i class="icon-info-sign"></i>About Shdr</button>
</div>
<div class="menu menu-right menu-status" id="menu-help" data-action="help">
<button type="button" class="menu-button"><i class="icon-question-sign"></i>Help</button>
</div>
</div>
</div>

<div id="box-upload" class="box">
<h1 class="title">Upload Model File</h1>
<div class="content">
<input type="file" name="object" id='box-upload-input' accept='.js'>
<button id="box-upload-submit" class="menu-button">Upload</button>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="box-texture" class="box">
<h1 class="title">Upload Texture File</h1>
<div class="content">
<p> Your texture can be accessed as a uniform in the 'Uniforms' tab. </p>
<p> Example code is available in snippets under 'Texture' </p>
<input type="file" name="object" id='box-texture-input'>
<button id="box-texture-submit" class="menu-button">Upload</button>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="box-share" class="box">
<h1 class="title">Share URL</h1>
<div class="content">
<input type="text" value="" id="box-share-url" readonly><button id="box-share-shorten" class="menu-button">Shorten</button>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="box-about" class="box">
<h1 class="title">About Shdr</h1>
<div class="content">
<p>
Shdr is an online ESSL (GLSL) shader editor, viewer and validator powered by WebGL.
</p>
<p>
<b>Author:</b> <a href="bkcore.com" target="_blank">Thibaut Despoulain</a>
<br><b>Version:</b> 0.1.130311
</p>
<p>
Inspired by MrDoob's live HTML editor.
<br>Powered by Three.js, Ace.js, RawDeflate.js and jQuery.
<br>Icons by FontAwesome, Suzanne from Blender, HexMKII from HexGL.
</p>
<p>
Issues, feature requests, contributions:
<a href="https://github.com/BKcore/Shdr" target="_blank">Fork me on GitHub!</a>
</p>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="mid-separator"></div>
<div id="top-separator"></div>
<div id="bottom-separator"></div>

<script src="build/shdr.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
189 changes: 189 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shdr Editor</title>
<meta name="description" content="Shdr is a live ESSL (GLSL) shader editor, viewer and validator powered by WebGL and built by Thibaut Despoulain (BKcore).">
<meta name="viewport" content="width=device-width">
<meta name="google-site-verification" content="9aMzbIqnVsSKifyPR9OdN8HoKfTbsE3W8lSQ9M66zwk">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/ubuntu-mono/font.css">
</head>
<body>

<!-- inline preloader -->
<div id="main-loader" style="position: absolute; z-index: 10000; top: 0; bottom: 0; left: 0; right: 0; background: #000; color: #000; font-family: Arial, 'Ubuntu sans', sans-serif; font-size: 32px; font-weight: bold;">
<div style="position: absolute; z-index: 10001; top: 50%; left: 0; width: 100%; background: #191919; text-align: center; line-height: 60px; margin-top: -30px; border-top: 1px solid #333; border-bottom: 1px solid #333;">
<img src="img/loader.gif" height="32" width="32" alt="Loading..." style="margin-bottom: -4px"> Fetching stuff.
</div>
</div>

<!-- app structure -->
<div id="panel-top">
<div class="menu" id="menu-new" data-action="new">
<button type="button" class="menu-trigger menu-icon-only"><i class="icon-file"></i></button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="confirm">Confirm</button>
<button type="button" class="menu-item" data-index="cancel">Cancel</button>
</div>
</div>
<div class="menu" id="menu-load" data-action="load">
<button type="button" class="menu-trigger menu-icon-only"><i class="icon-folder-open-alt"></i></button>
<div class="menu-list"></div>
</div>
<div class="menu" id="menu-save" data-action="save">
<button type="button" class="menu-button menu-icon-only"><i class="icon-save"></i></button>
</div>
<div class="menu" id="menu-name" data-action="name">
<div class="menu-blank">
<input type="text" value="Untitled" id="save-name">
</div>
</div>
<div class="menu" id="menu-remove" data-action="remove">
<button type="button" class="menu-trigger menu-icon-only"><i class="icon-trash"></i></button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="confirm">Confirm</button>
<button type="button" class="menu-item" data-index="cancel">Cancel</button>
</div>
</div>
<div class="menu" id="menu-mode" data-action="mode">
<button type="button" class="menu-trigger"><i class="icon-pencil"></i><span>Fragment</span></button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="0">Fragment</button>
<button type="button" class="menu-item" data-index="1">Vertex</button>
<button type="button" class="menu-item" data-index="2">Uniforms</button>
</div>
</div>
<div class="menu" id="menu-update" data-action="update">
<button type="button" class="menu-trigger"><i class="icon-circle"></i>Auto update</button>
<div class="menu-list">
<button type="button" class="menu-item" data-index="0"><i class="icon-circle"></i>Auto Update</button>
<button type="button" class="menu-item" data-index="1"><i class="icon-adjust"></i>ENTER Update</button>
<button type="button" class="menu-item" data-index="2"><i class="icon-circle-blank"></i>Ctrl+S Update</button>
</div>
</div>
<div class="menu" id="menu-snippets" data-action="snippets">
<button type="button" class="menu-trigger"><i class="icon-plus"></i>Snippets</button>
<div class="menu-list"></div>
</div>
<div class="menu" id="menu-download" data-action="download">
<button type="button" class="menu-button"><i class="icon-download-alt"></i>Download</button>
</div>
<div class="menu" id="menu-upload" data-action="upload">
<button type="button" class="menu-button"><i class="icon-upload-alt"></i>Upload Model</button>
</div>
<div class="menu" id="menu-texture" data-action="texture">
<button type="button" class="menu-button"><i class="icon-upload-alt"></i>Upload Texture</button>
</div>
<div class="menu" id="menu-share" data-action="share">
<button type="button" class="menu-button"><i class="icon-share-alt"></i>Share</button>
</div>
<!-- LEFT/RIGHT -->
<div class="menu menu-right" id="menu-models" data-action="models">
<button type="button" class="menu-trigger"><i class="icon-reorder"></i><span>Suzanne (high)</span></button>
<div class="menu-list"></div>
</div>
<div class="menu menu-right" id="menu-rotate" data-action="rotate">
<button type="button" class="menu-toggle menu-icon-only" data-current="0" data-off="1" data-on="0">
<i class="icon-play" data-on="icon-pause" data-off="icon-play"></i>
</button>
</div>
</div>

<div id="panel-main">
<div id="panel-left">
<div id="editor"></div>
</div>
<div id="panel-right">
<div id="viewer"></div>
<div id="shdr">Shdr</div>
<div id="model-loader">
<img src="img/loader.gif" height="32" width="32" alt="Loading model...">
</div>
</div>
</div>

<div id="panel-bottom">
<div id="status">
<span class="status-success"><i class="icon-ok-sign"></i><b>Ready</b></span>
</div>
<div id="footer">
<div class="menu menu-right menu-status" id="menu-about" data-action="about">
<button type="button" class="menu-button"><i class="icon-info-sign"></i>About Shdr</button>
</div>
<div class="menu menu-right menu-status" id="menu-help" data-action="help">
<button type="button" class="menu-button"><i class="icon-question-sign"></i>Help</button>
</div>
</div>
</div>

<div id="box-upload" class="box">
<h1 class="title">Upload Model File</h1>
<div class="content">
<input type="file" name="object" id='box-upload-input' accept='.js'>
<button id="box-upload-submit" class="menu-button">Upload</button>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="box-texture" class="box">
<h1 class="title">Upload Texture File</h1>
<div class="content">
<p> Your texture can be accessed as a uniform in the 'Uniforms' tab. </p>
<p> Example code is available in snippets under 'Texture' </p>
<input type="file" name="object" id='box-texture-input'>
<button id="box-texture-submit" class="menu-button">Upload</button>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="box-share" class="box">
<h1 class="title">Share URL</h1>
<div class="content">
<input type="text" value="" id="box-share-url" readonly><button id="box-share-shorten" class="menu-button">Shorten</button>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="box-about" class="box">
<h1 class="title">About Shdr</h1>
<div class="content">
<p>
Shdr is an online ESSL (GLSL) shader editor, viewer and validator powered by WebGL.
</p>
<p>
<b>Author:</b> <a href="bkcore.com" target="_blank">Thibaut Despoulain</a>
<br><b>Version:</b> 0.2.161211
</p>
<p>
Inspired by MrDoob's live HTML editor.
<br>Powered by Three.js, Ace.js, RawDeflate.js and jQuery.
<br>Icons by FontAwesome, Suzanne from Blender, HexMKII from HexGL.
</p>
<p>
Issues, feature requests, contributions:
<a href="https://github.com/BKcore/Shdr" target="_blank">Fork me on GitHub!</a>
</p>
</div>
<button type="button" class="close">
<i class="icon-remove"></i>
</button>
</div>

<div id="mid-separator"></div>
<div id="top-separator"></div>
<div id="bottom-separator"></div>

<script src="build/shdr.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
721 changes: 721 additions & 0 deletions docs/shdr.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading