jmoenig / Snap

a visual programming language inspired by Scratch
http://snap.berkeley.edu
GNU Affero General Public License v3.0
1.51k stars 745 forks source link

[library] OpenGL/WebGL Utility library #2069

Open dekrain opened 6 years ago

dekrain commented 6 years ago

I've made a project/library that wraps some of the functionality of WebGL in Snap !. It covers all that is needed to make some basic rendering (and a little more). I've included a basic program that renders a color image of Mandelbrot Set in the project. For the methods that are not wrapped there are three blocks that call any function or fetches any property of the GL object. Link: https://snap.berkeley.edu/snapsource/snap.html#cloud:Username=dekrain&ProjectName=Web%20GL.

jmoenig commented 6 years ago

interesting! The project doesn't do anything for me, what am I doing wrong?

dekrain commented 6 years ago

I don't know what might be the case, but I force-disabled the retina canvases I create. Maybe it'll help (my browsers don't support retina canvases, so I can't check if it does any difference).

SimHacker commented 6 years ago

Wow, it works great for me! Very powerful! Thanks for posting this.

When you set the sprite's costume to the gl canvas, does that mean it will update live when you re-draw the gl graphics? Or is it just a snapshot? Is there a way to make that happen? I guess you could just make the canvas visible and plop it on the screen somewhere, but using it live as a turtle would be awesome (especially if it rotated around properly)!

SimHacker commented 6 years ago

The "call gl gl> @ prop with args..." block is generally useful for invoking methods on JavaScript objects, and could be named something like "call object object> method method with args..." and included in an extensions utility library!

Is anyone working on such a library?

I saw this library for integrating Python based extensions with Snap! and Scratch, but it hasn't been updated recently. But I think Snap! needs a nice extensions utility library that makes it really easy to plug in JavaScript all kinds of code and libraries, like you've done here for GL! So you can avoid a lot of boilerplate code and just pass in some JSON and function maps to configure it.

https://github.com/blockext/blockext

dekrain commented 6 years ago

@SimHacker: If you look at the Costume constructor, you see it calls normalizeCanvas method, which makes a snapshot of provided canvas. I know that the invoke block can be applied to any object, but I just did leave it like that.