Translation of Agal shaders to be used with three.js -any advise?

Questions
1

Hi, as I’m migrating from Flash, I need to translate some unique Agal shaders (from Stage3D Flash) that I’ve made, to WebGl and use them with three.js. The problem is I’m new to three.js and most books are rather outdated, and I can’t find documentation about this.
So my questions are:

  1. Is it possible to have the same performance and direct access without limited intermediates?
  2. What is the level of difficulty to make a custom shader for three.js from scratch?
  3. What is the most efficient path to follow -any pointers, hints?
2

I don’t know this thing you used, but creating custom shaders in THREE is very easy. Use THREE.ShaderMaterial if you want some basic things getting setup for you manually (like matrices, cameraPosition etc.), or THREE.RawShaderMaterial for using a blank fragment and vertex program.

If discourse wouldn’t ruin my idnentations it looks like:

const myMaterial = new THREE.ShaderMaterial({
 uniforms: {
myParameter:  {
 type: 'v2',
 value: new THREE.Vector2
 }
 },
 fragmentShader: '', // fragment code goes here
 vertexShader: '' // vertex code goes here
});

If you look at the examples you’ll find complete ones.

1 Like
3

Thanks Fyrestar for the example, it does look easy and gives me hope. :+1:

4

Writing GLSL is going to be about 27 times easier than writing agal. Assembly and opcodes - generally hard.

1 Like