Skip to content

Home

Jump to bottom
Joseph Arhar edited this page Dec 13, 2016 · 24 revisions

#Welcome to the Shdr wiki!

Shdr is an online ESSL (GLSL) shader editor, viewer, and validator powered by WebGL. The work being done on this fork is an attempt to add support for custom uniforms to the current Shdr, as a final project for a graphics course at Cal Poly SLO.

##Team Melee is made up of:

  • Joey Arhar (Code)
  • Ansley Chen (Video)
  • Evan Cooper (Documentation)
  • Alex Ottoboni (Code)
  • Andrew Tran (Code)

##Abstract

On this fork we will be adding support for custom uniforms to Shdr. This will allow users to control things like color and specularity within the program. We are also adding the capability to upload and display custom 3D models in .js format. Currently, shdr uses a prebuilt set of uniforms within WebGL. We will be editing this to allow users to create and add their own uniforms to this set.

##Video Demo

demo demo

##Screenshots

Model Selection

Model Upload Model Selection

Textures and Uniforms

Uniforms Texture Upload Texture Uniform

##Usage To add a uniform value to the shader, enter a statement in the following form in the Uniforms menu: = ;

Some examples of valid uniform statements include: vec3 test = vec3(1.0, 1.0, 1.0); bool foo = false; int value = 3; float fVal = 3.5;

The following types are supported as custom uniforms: int float bool vec2 vec3 vec4

The following syntax errors are indicated in the console for the user:

  • Not typing a statement of the above form.
  • Not using the assignment operator in the statement.
  • Using the wrong number of arguments when adding a vec2, vec3, or vec4 uniform.

##Description of Methods Used

  • Javascript to parse user-friendly uniform statements to objects for THREE.js parameters
  • Three.js documentation to add uniforms and textures
  • Mozilla Developer Network for Javascript documentation
  • Adobe Premier Pro to create the video

##Summary and Future Work

Over the past few weeks working on this project, we've all gotten better acquainted with Shdr and the languages that it uses, JavaScript and WebGL. As the result of our research, we were relatively quickly able to find a way to add the functionality we wanted to.

The potential for future work is extensive, since there are still many things that Shdr does not support, but are capabilities of WebGL. Any member of the team could decide to continue working with the original creator to add more and more functionality to Shdr in a myriad of ways.

Clone this wiki locally