I need some help with rendering a NURBS surface in webGL.
Some days ago our professor assigned us to draw with NURBS a flag and to animate it.
We have to use webGL (and cannot trhee.js...).
I have no idea on how to proceed (even though I know the theory about NURBS and tessellation more or less).
Any hint?
Disclaimer: I'm not asking for a solution. It's against the rules and I want to get it myself. I just need to be pointed on the right direction.
Thanks in advance
Just because you can't use three.js doesn't mean you can't look at it to figure out how it works! This example renders NURBS and you can view the source code. (Hint: It uses THREE.NURBSSurface, THREE.NURBSUtils, etc... which is then plugged into a ParametricBufferGeometry)
As for the WebGL part, if you're familiar with OpenGL, it's a lot of the same stuff just cut back a bit on features. You need to make a canvas with a context WebGL, generate all your data on the CPU (definitions of the surface, tessellation, etc), and then pass all the vertex and index data to the GPU rendering it all with a shader.
I would suggest you to start with following two lectures:
Drawing Bézier Curves
Drawing Lines is Hard
and finally, use this WebGL example as starting point for your assignement:
Resolution independent rendering of Bezier curves in WebGL
Good luck and happy coding! If you achieve something good, please let us know!
Related
I am searching a tool like Tiled but allowing to make free shapes (not only rectangles or circles). Shapes with curves and such. Could you help me please?
Thank you.
I would suggest using Inkscape.
Though, if you're looking for a tool very much like Tiled but with support for curves, be sure to add a comment to the spline objects feature request and consider helping to finish this pull request.
I'm working on a paint application with canvas, and trying to make some better tools.
now i have one tool that only connects lines while following the mouse movement.
can you think of a good tutorial or a good idea for other tools like spary, or brush?
thanks
You might find the following resources useful:
Create a Drawing App with HTML5 Canvas and JavaScript
Create a Paint Bucket Tool in HTML5 and JavaScript
Overview of JavaScript Application Development - Case CanvasDraw
Presentation - Intro to HTML5 Canvas
Feel free to contact me if you need more specific pointers. I think those above should at least help you to get started. :)
Please have a look at this code project article.
it may be useful to you.
http://www.codeproject.com/Articles/427422/Paint-Brush-Application-Using-HTML5-Canvas
thanks
I don't have a tutorial, but I think you should simply use thicker lines to create a brush tool.
A spray tool could draw random points in a circle with random alpha(that's quite easy to implement), but that might be extremely slow on some browsers. Drawing using pre-generated images would be much better but harder to implement.
I am trying to generate some sun 'rays' which I can best describe as looking like the blade of a krisknife, such as the blade portion of this picture.
This is just an example. I only need a triangular shape with two or three waves that I can close and fill.
Better yet, is there some HTML5 app with which I can draw a complex figure and then export the javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Something similar to HTML5 Bezier Sketcher but which saves the javascript. Trying to draw complex figures blind is very difficult and I don't want to switch to SVG if it is not necessary.
Thanks 1,000,000
Edit: I have now also looked at all the options at this site. None will allow me to draw and fill simple curves and then see/save canvs commands. All that show commands show them in new libraries like fabric or jsDraw2D.
You can parse SVG into an html5 canvas with fabric.js.
That might do the trick for you.
https://github.com/kangax/fabric.js
Beside SVG it can help you with a nice API to canvas drawing.
I found the answer among the solutions for Convert SVG to Canvas friendly output. The author didn't think it worked for him, but I think it's as perfect as any I have seen.
Professor Cloud (...is frikkin' amazing! This isn't the first thing he's done I have found incredibly useful.) created a site to take SVG input and product Canvas output. You can see it here, at Professor Cloud SVG-to-Canvas.
Using this site, I can draw something or even take a stock vector image in AI, export as SVG, cut out the commands and past them into Prof. Clouds amazing SVG-chipper, and get Canvas code. I understand it doesn't support full SVG capabilities, but then, neither does Canvas. Great for me.
Your solution is probably best but just for the record, I tried experimenting with some graph plotting, and got some nice results:
The equations are:
sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10
You can plot them using: http://www.graphsketch.com/
It looks good with 0 < x < 25
Can anyone recommend a decent tutorial, add-on or approach to creating a page rip off effect in flash?
I want to create a notepad where each page can be ripped off to reveal further content.
Thanks
Paul
are you looking for a pageFlip with a tearing feature? if so it does exist even though I can't find the link (anyway it was AS2).
if you want more flexibility, you can take a look at a cloth simulation ; derschmale did a great example and pixelero did sort of the same with linked lists (=faster)
there's also this particle physics engine called Traer that have been ported from java and that allows you to get the cloth behaviour with fewer lines of code and some fine tuning (stiffness, damping a.s.o. ).
the general idea is to subdivide the displayObject you want to tear off into a series of triangles, take a snapshot of that object in a BitmapData, then redraw the distorted grid with the drawTriangles() method.
I think it is how they do the thing in the cloth examples.
Just starting to experiment with filling the canvas, and I'm trying to apply a texture to an object (the blobs from the blob example - http://www.blobsallad.se/). This example is using the 2D context, and doesn't appear to be implementing webGL. All the information on texturing I could find uses webGL, and I was wondering how easy it would be to accomplish this feat. Is there anyway I could incorporate the texturing features of webGL to this canvas without rewriting the code? Summed up, I guess this question is asking whether or not the methods available to the 2D context are also available to the webGL context... If so I suppose I could just change the context and apply my texture? If I'm thinking about this all wrong or am confused conceptually, please let me know.
Thanks,
Brandon
I've experimented with drawing an image to a 2d canvas before using it as a texture for a WebGL canvas. It works, but the performance is horrible (it really varies from browser to browser). I'm currently considering a few other options for refactoring it. I wouldn't recommend it for anything that more than statically drawing an image to one or two 2d canvases.
You can see an example of the craziness in lanyard/src/render/SurfaceTileRenderer.js in the project at: http://github.com/fintler/lanyard
Are you looking to apply a texture to a 2D shape?
Try something like this
http://jsfiddle.net/3U9pm/