Embedding ChakraHost (c#) for WebGL example

I have looked into the example involving embedding the javascript framework (paper.js) for drawing output to XAML's CanvasControl through the JsBridge implementation of ChakraHost.

To include the paper.js framework and the javascript to call the framework (e.g. the paper.js's tadpoles example), we only need these statements:

await host.ReadAndExecute("paper-core.js", "paperjs-refs");
await host.ReadAndExecute("tadpoles.js", "paperjs-refs");

To embed a WebGL javascript framework using e.g. WebGL lesson3 , in addition to include the javascript library and calling code e.g. lesson3.js, these shader codes are needed.

<script id="shader-fs" type="x-shader/x-fragment">
 precision mediump float;

 varying vec4 vColor;

 void main(void) {
     gl_FragColor = vColor;
 }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec4 aVertexColor;

 uniform mat4 uMVMatrix;
 uniform mat4 uPMatrix;

 varying vec4 vColor;

 void main(void) {
     gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
     vColor = aVertexColor;
 }
</script>

Questions:

(1) How do include these shader javascript code into the lesson3 webgl jsbridge c# example?

// WebGl lesson3
await host.ReadAndExecute("glMatrix-0.9.5.min.js", "webgl-refs");
await host.ReadAndExecute("webgl-utils.js", "webgl-refs");
await host.ReadAndExecute("lesson3.js", "webgl-refs");

Revision 14th Sept 2016 When I post this question back in Feb 2016, I have not figured out how the example provided by ChakraBridge is limited to Canvas2D. I revisited this question recently and realize that to make ChakraBridge to work with WebGl.js or derived framework e.g. Three.js, one needs to address multiple gaps to target WebGL 3D context:

  1. For UWP, the first step is to get OpenGL ES for c# to work through the Microsoft Angle
  2. Using the OpenGL ES C# interface to develop WebGL4UWP libraries and then test that with WebGL lesson3
  3. Then it is feasible to bring (b) to ChakraBridge to address the question which started this project.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.