Shader String P5js WebGL

nabr

Hello As far as i get it i have to rewrite the hole P5 loadShader, if i want to use a shader (with template literals most modern browsers) direct in my Scetch, i write small scetches an load files from external source is mostly a overkill. i looking for this kind of code:

    p5.fragFragmentShader["fragSource"]=`
    void main () {
    gl_FragColor=vec4(1.);
    }
    ` 

the problem here is that the _getShader uses window.loadString https://github.com/processing/p5.js/blob/master/src/webgl/p5.RendererGL.js#L132

My Question: How to pass a String direct in my p5 Scetch internal (singel js file). Do i miss something, a Javascript (hack) workaround? Just a missed feature?

nabr

Yes, found it. A pretty simple hack. Problem solved.

kfrajer

Could you share your solution?

Kf

nabr

@kfrajer

You can play sound and such things in p5js for the rest you need to learn webgl. Costom shaders in p5js are currently under construction, maybe.

It's a hack. Not the best one.

hit run after the site is loaded
=>comment noLoop in setup
=>and with auto-refresh you got a live shader editor :)

http://alpha.editor.p5js.org/nabr/sketches/Sk-hp7slb

@kfrajer updated

http://alpha.editor.p5js.org/nabr/sketches/BJSEMgalW

nabr

Yes i push this up again. Sorry guys.

I looking for collaborative work! @GoToLoop @Lord_of_the_Galaxy @kfrajer @HBo @jeremydouglass @cansik

This is what i got so far

http://alpha.editor.p5js.org/nabr/sketches/S1clfrTeb

Hack the error: filelocation unknown

The Conditions: it is not allowed to rewrite the library itself only build in and custom functions in the editor are allowed

I looking for a nice and easy way. if(filelocation ==xy) run();

HBo

uff - sorry, but i'm out. that's somewhere beyond my horizont...

nabr

@HBo

OpenGL/WebGL tutorial

You have lot of triangles that is your shape
You have a piramide that is your camera

You need to squeeze the pyramide into a rectangle (canvas) that is your screen.

This is done my 3 Matrices (Projection * View * Model) . And one in particular the Projection Matrix (research the web for near, far, clipplane).
The other two are for transformations of your shape. First you move the Shape than you squeeze the pyramide with the shape into a rectangle. (this can become complicated math, but at the very end, as a programer, you just copy +paste the same "nummbers" over and over again )

[some other boring, minimal stuff ] ....

allocate / bind / free the Memory. (for Shapes, for Matrices, more ...args )

you done. :)

I know at the beginning everything might look confusing, but more you focus your self for understand it, than more, you see, how simply everything becomes.

I think processing has great build in functions to explore it, start and change some nummbers
https://processing.org/reference/camera_.html
https://processing.org/reference/frustum_.html
https://processing.org/reference/perspective_.html
https://processing.org/reference/applyMatrix_.html
https://processing.org/reference/PShape.html

https://processing.org/tutorials/p3d/

HBo

@nabr i think you misunderstood. i won't give up the whole thing of course. i only refered to your comment above about the unknown filelocation problem ;)

Lord_of_the_Galaxy

Right now, I'm busy, but I'll help you if the problem still exists till the weekend. Sorry

nabr

@HBo Okay, sorry man.

@Lord_of_the_Galaxy would be great, we can make a pull on github, then.

cansik

I'm sorry, I've never worked with p5.js, so I'm not the best help I think ;)

But wouldn't it be easy to just convert your text into a base64 data uri and pass it to the loadShader method of processing?

kfrajer

This might be relevant... a discussion about base64. I am sure there must be a JS version...

https://forum.processing.org/two/discussion/comment/97657/#Comment_97657

Kf

nabr

Thank you all for you help!

Now i think their is a porpose P5js don't use Inline Shaders, people could train themselfs for Project Management, Unit Test, Coding Style.

I my case: I'm 18 and i do what i want. I would like to write my own wrapper, but curently my time managment don't allow me to. Provisional name : OhMYGodwitHthisLibraryIwillStaYpRobablyFOrtheRestofMyLifeAProgramerNoob.js

I was just a spontaneos request here, it is not an priority for me right now.

Take care
Best