sketchpunk / FunWithWebGL2

Fun with WebGL 2.0 Youtube Tutorial Series
666 stars 141 forks source link

The issue of you being amazing... #2

Closed ghost closed 6 years ago

ghost commented 6 years ago

I was going to note that I had issues detaching the shader in Chrome 60. But you already noted it. Is this a sign of breaking changes and implementations from chromium or google or is it just automatically handled to some degree?

I more importantly also ask if there is relevant material on uploading/manipulating objects with the webGL context. I'm not sure how to model and implement photo editing to a middle visual 'layer', plenty to learn upto that but that is my goal.

sketchpunk commented 6 years ago

Its been a long while so I dont remember what the issue with detaching shaders are but I'm sure the browser unloads them when the page closes or the webgl context is deleted since all GPU related things with webgl is tied to the context, like you can't use the same shader for two different canvases even if they're in the same page.

Not exactly sure what you mean by uploading/manipulating objects.

Photo editing, this can mean two things. Doing brush like operations on an image or running filters on an image. Either way, you most likely will be using a quad and drawing a texture to it. Once you have a texture uploaded to the GPU and a quad to render it, you can then have different shaders to apply filters on the image. Good way to search is by using the filter you want plus glsl. For example "blur glsl", from there you'll find code sames of shaders that can perform a blur.

I dont know how to actually draw with brushes with a webGL canvas but again, you must likely will have a texture or a framebuffer that will hold all your pixel data that will be drawn with a quad. I'm sure if you read up on 2D with webgl you might find some help there, I've been focusing on only 3D.

Here's an article about an open source editor written in C++ and OpenGL. WebGL is a slimmed down version of OpenGL, so the article and the apps code could help fill in any "drawing using webgl" type of info. http://apoorvaj.io/building-a-fast-modern-image-editor.html

This stuff is hard, but if you don't give up and put the time in you'll eventually get it. Look at me, one year ago I couldn't draw a quad, now I understand how ray casting works and implementing my own skeleton animation framework. So if I can do it, so can everyone else.

Good luck!

ghost commented 6 years ago

Thank you very much for the feedback, two weeks without guidance on it and I was worried noone would cover this in a clear and concise way.

The goal revolves around normal mapping a graphic shops online editor mockups. I have only found a couple of implementations though hardly a beginner tutorial. Visually grepping the repo's for implementations and references, decoupling the frameworks from what I'm figuring out on my own.

I'll close the issue before I log out, unless you'd like to. I am anxious to know what you've found in normal mapping though if you happen to be around. sending all my friends to your tutorials btw if you made with a udemy course, I'd pay, there are only two on the subject and not vanilla. Look at the unfulfilled common searches. lookatthat

sketchpunk commented 6 years ago

"goal revolves around normal mapping a graphic shops online editor mockups" Sorry, but I don't understand what you meant here. I haven't really done anything with normal mapping but I have read into the basic idea of it months ago when I was dealing with textures. The most I know is that each pixel in a normal map is just the normal direction for a pixel in a texture which is to be used to compare the angle of where the light exists. So if you haven't spent time learning lighting, you should understand that first before dealing with normal maps, since the idea is the same with the difference being doing it per vertex or per pixel.

I have a video I think is called phong lighting and you can research that topic further online to help get a better grasp of the idea of lighting since normals be it texture maps or vector data uses the same concepts and math.

About udemy, I honestly don't have the time nor the teaching skills to sit down to create a curriculum for the site. On top of that, I'm a firm believer of open source and free knowledge. Everything I know is thanks to people putting time to put out free knowledge on the internet where I am able to piece together and learn. The only thing I'm doing is taking that knowledge and spitting it back out in how I've interpreted it plus giving out as bare bones code as possible since for me, thats the best way that I learn by taking apart simple examples to understand concepts then build up from that. The whole reason my youtube channel exists is because a year ago it took me 2 months to get a simple understanding of webgl and my biggest complaint was that tutorials online don't teach well enough for me to understand the ideas, so I said on reddit maybe I should teach it my way and others said do it.... so I did. So yea, with keeping with the udemy and free knowledge thing I setup a patreon as a nice middle ground. I give out knowledge for free and if people want to tip me they can but I try to not mention nor ask people to donate, feels weird to me, kinda like begging for money, I'm weird.

Anyway.... I googled around and found some good samples related to drawing and filters with webgl, some are bare bones so you can take apart and learn how they function. One of the links is pretty effing awesome that I myself have to look into how it works since It can be useful down the line for terrain editing.

Normal Mapping http://voxelent.com/html/beginners-guide/chapter_10/ch10_NormalMap.html

Found a codepin that creates a simple paint app with webGL https://codepen.io/Vemulo/pen/LVgdwL

Another one, Really awesome https://github.com/dli/paint

Another https://github.com/myurtoglu/painting

Photo Filters http://evanw.github.io/webgl-filter/

How to chain filters together, looks neet http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl

ghost commented 6 years ago

And the issue was closed with a resounding fanfare! You're my hero. I love your coding style, ethics, and attention to detail. I hope to follow in your footsteps.

I'll be sure to notify you of my implementation and cite you for the functional variation on the usual boilerplate, love it too much to use the others now.