Can I write WebGL with FShade ? an integrate it with Fable.io? #14
Comments
|
This sounds like a fun exercise to test lol. |
|
Hi, An OpenGL ES backend should be fairly easy to implement, and (when compositions are statically known) the resulting code could somehow be 'injected' into the resulting javascript code. I'll definitely look into that when I have the time. |
|
https://github.com/fable-compiler/Fable/blob/master/tests/Main/ReflectionTests.fs For the record I think this is super cool but we also shouldn't derail your project with it even if it is possible or easy. Don't be blinded by the beauty of feature creep @krauthaufen , let the community explore FShade for fable. |
First attemptMissing QuotationsSeems like the major barring factor to even generating GLSL is that quotations aren't supported in fable. Fable can't find or resolve things,This is likely caused by the framework mismatch ConclusionLess stuff broke than I thought, but most things broke. module App
(**
The famous Increment/Decrement ported from Elm.
You can find more info about Emish architecture and samples at https://elmish.github.io/
*)
open Elmish
open Elmish.React
open Fable.Helpers.React
open Fable.Helpers.React.Props
open Aardvark.Base
open FShade
// MODEL
type Model = int
type Msg =
| Increment
| Decrement
type Data = {pos: V4d; tc : V2d}
let shader (d: Data) =
vertex {
let mvp : M44d = uniform?ModelViewProjMatrix
return { pos = mvp * d.pos; tc = 2.0 * d.tc }
}
let effect = Effect.ofFunction shader
let s =
effect
|> Effect.toModule {
EffectConfig.empty with
lastStage = ShaderStage.Vertex
outputs = Map.ofList ["pos", (typeof<V4d>, 0)]
}
|> ModuleCompiler.compileGLSL glsl410
// |> GLSL.Assembler.assemble glsl410
let init() : Model = 0
// UPDATE
let update (msg:Msg) (model:Model) =
match msg with
| Increment -> model + 10
| Decrement -> model - 1
// VIEW (rendered with React)
let view (model:Model) dispatch =
div []
[ button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
div [] [ str (string model) ]
div [] [str (string s)]
button [ OnClick (fun _ -> dispatch Decrement) ] [ str "-" ] ]
// App
Program.mkSimple init update view
|> Program.withReact "elmish-app"
|> Program.withConsoleTrace
|> Program.run
ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs ERROR in ./src/App.fs |
|
Hi, it would be extremely awesome to see FShade working in Fable. Here's a little outline of the things FShade currently uses internally:
The real problem here is, that we need runtime-type information for exprs in order to generate GLSL. |
|
Maybe something more near term that could be fun is using say Giraffe and FShade to generate GLSL and incorporate that into a page to be sent as a page request. Building that would require no changes to either fable or fshade, and using Fable.Bridge you could have the GLSL change without page refresh. I doubt adding quotations is extremely high on Fable's priority list. |
|
Hi, Cheers |
|
Looks like quotation are not coming anytime soon to Fabel: https://twitter.com/alfonsogcnunez/status/1066996863449075714?s=21 |
|
quotations completely depend on reflection, you can sort of fool things a little but it depends on the use case. |
|
Quotations can be transformed to AST, I do this in Falanx, and AST becomes TAST on compile, you can compile the AST too via an interface into the compiler that takes the AST as input. (Here AST refers to the parse tree) |
|
@krauthaufen I wouldn't worry about removing quotations and increasing the complexity of FShade. I didn't mean a website where users submit fsharp and get shaders and canvas out but just an example where GLSL gets generated from F# (that you wrote) and then injected into a page which gets rendered and the fsharp and glsl gets shown in the example. I wouldn't focus on making FShade fable compliant right now, more full documentation, and more examples on the website would be preferred. Some code with some associated pictures for example of things you can render with it would be nice. What would the value of the intermediate language provide? I noticed you remarked on the site that DU's aren't easily supported, I wonder if that could be hacked up via faux enums, aka consts with the GetHashCode of the DU cases. Since we already have the compile time checks in F# I would think we don't have to worry so much about the generated GLSL being insane. |
|
@7sharp9 @voronoipotato I couldn't stop thinking about the idea of FShade running in a browser and after approximately 4 weeks of work i finally got fshade running in fable 😁 I extended fable with quotation support (see fable-compiler/Fable#1818), ported some components of aardvark.base and aardvark.rendering and FShade. The thing is currently very fragile and various features don't work, but here's a video showing the basic functionality: https://www.youtube.com/watch?v=s5rO0RUXXmo The implementation is private atm. but I intend to make it open-source when it's done. |
|
Any hopes opening it up so we can hack on it :)? |
|
Hey, I'll try to make it public, but currently it's very interwoven with a commercial project which we can't open-source yet. |
|
I appreciate it, and I also understand. Sometimes it's not quite so easy :). |
|
This would be awesome! |
|
Pretty late, but now there is something using FShade in the browser (not fable though). |
This is a question not an issue. I am new to Shaders (but not F#) . Can I use this to write WebGL? What would be the best strategy to integrate it with Fable.io?
The text was updated successfully, but these errors were encountered: