August 3, 2010 1 Comment
I’m at a block here…
When I last talked about createGraphics, I said I had it working with 3D. This was partly true. I had an oversight and assumed all was done. 3D was working as long as the initial context for the sketch was 2D. I figured this out last week as I was trying to use createGraphics for textMode. My naïvety made me think this would just work while the context was originally 3D. Of course, it didn’t. Trying to render 2D or 3D on an original 3D context didn’t work. That’s because we didn’t handle it. Now, I’m trying to fix that to implement textMode.
Since I couldn’t get it to work, I started by stripping Processing.js from my test case. I went with Learning WebGL lesson 5. This was my initial test case and my objective at the beginning was to use another canvas as the texture. That was simple enough to get working and the example of that can be seen below.
So after I got that working, I did a double objective test. The first objective was to get the test working with a dynamically created canvas (like I did before). The second objective was to try and make it interactive (kind of). The interactivity, well isn’t really interactive. I just basically got the background of the canvas to change colours. I, also, compared code to another example much like the one I’m trying to create. Anyway, here’s my example:
This seemed to work okay as well, so my next task is putting it in Pjs. This is the portion I need advice/direction on. I applied all my knowledge of the existing subject and am still having trouble. The test case is a little different as I’m rendering a quad instead of a box and the actual object is more interactive than just the background of the canvas changing colours. However, it should still work and for some reason the image inside isn’t refreshing. Here’s the test case online:
Now that I’ve given you background on what my objective is, I’ll start talking about the code. First, we’ll begin with the Pjs sketch. I’ve stripped out and commented the unnecessary code. That’s why the background for the bigger canvas is defaulted to grey. So, the only really working factor is the quad is getting drawn and it’s using the smaller canvas as it’s origin. The important part of the sketch is the image() function… it’s the point where the smaller canvas is being rendered onto the quad.
I took the important part of the image function out and put it in this pastebin. This is the part that applies to this subject. Basically, it takes all the information from the p.texture and p.vertex calls and renders the quad at p.endShape. p.texture is where the texture is binded to the quad. Here’s the important part. Now, the binding for this almost exactly the same as my Learning WebGL example above. However, I’m still getting problems with the redraw/re-render. So, it could be within the endShape that I’m getting problems. The section that renders the quad is called fill3D. That’s where the points and values get passed onto the program object which uses our shaders. Now, if you’re wondering about the shaders… here they are. Could anyone out there guide me on where I’m going wrong? I am stumped.