Sunday, August 9, 2015

WegGL Trial with Dartlang fragment shader test

fragment shader test. draw circle at mouse position.


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import 'dart:html' as html;
import 'dart:web_gl' as webgl;
import 'dart:typed_data' as data;
import 'dart:async';

void main() {
  var canvas = new html.CanvasElement(width: 500, height: 500);
  html.document.body.append(canvas);
  double x = 0.0;
  double y = 0.0;
  canvas.onMouseMove.listen((html.MouseEvent e) {
    html.Rectangle t =  canvas.getBoundingClientRect();
    x = e.clientX - t.left;
    y = e.clientY - t.top;
  });

  webgl.RenderingContext GL = canvas.getContext3d();

  // setup shader
  webgl.Shader vertexShader = loadShader(GL,
      webgl.RenderingContext.VERTEX_SHADER,
          "attribute vec3 vp;\n" +
          "void main() {\n" +
          "  gl_Position = vec4(vp, 1.0);\n" +
          "}\n");

  webgl.Shader fragmentShader = loadShader(GL,
      webgl.RenderingContext.FRAGMENT_SHADER, 
      "precision mediump float;\n" +
      "uniform float t;\n" +
      "uniform float x;\n" +
      "uniform float y;\n" +
      "void main() {\n" +
      " float r = (cos(t)+1.0)/2.0;\n"
      " float a = (sin(t)+1.0)/2.0;\n"
      " float gb = 100.0-sqrt((gl_FragCoord.x-x)*(gl_FragCoord.x-x)+(gl_FragCoord.y-y)*(gl_FragCoord.y-y));\n"
      " gl_FragColor = vec4(r, gb/100.0, gb/100.0, a);\n" +
     "}\n");

  webgl.Program shaderProgram = GL.createProgram();
  GL.attachShader(shaderProgram, fragmentShader);
  GL.attachShader(shaderProgram, vertexShader);
  GL.linkProgram(shaderProgram);
  GL.useProgram(shaderProgram);

  if (false ==
      GL.getProgramParameter(
          shaderProgram, webgl.RenderingContext.LINK_STATUS)) {
    String message = "alert: Failed to linked shader";
    throw new Exception("${message}\n");
  }

  //
  // setup
  // leftup (x, y, z), leftdown, rightup, rightdown
  data.TypedData rectData = new data.Float32List.fromList(
      [-0.8, 0.8, 0.0, -0.8, -0.8, 0.0, 0.8, 0.8, 0.0, 0.8, -0.8, 0.0]);
  data.TypedData rectDataIndex =
      new data.Uint16List.fromList([0, 1, 2, 1, 3, 2]);

  webgl.Buffer rectBuffer = GL.createBuffer();
  GL.bindBuffer(webgl.RenderingContext.ARRAY_BUFFER, rectBuffer);
  GL.bufferData(
      webgl.ARRAY_BUFFER, rectData, webgl.RenderingContext.STATIC_DRAW);

  webgl.Buffer rectIndexBuffer = GL.createBuffer();
  GL.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, rectIndexBuffer);
  GL.bufferDataTyped(webgl.RenderingContext.ELEMENT_ARRAY_BUFFER, rectDataIndex,
      webgl.RenderingContext.STATIC_DRAW);

  //
  // draw

  int startTime = new DateTime.now().millisecondsSinceEpoch;
  int count = 0;
  render(_) {
    count++;
    GL.clearColor(0.6, 0.2, 0.2, 1.0);
    GL.clear(webgl.RenderingContext.COLOR_BUFFER_BIT);

    int locationVertexPosition = GL.getAttribLocation(shaderProgram, "vp");
    GL.vertexAttribPointer(
        locationVertexPosition, 3, webgl.RenderingContext.FLOAT, false, 0, 0);
    GL.enableVertexAttribArray(locationVertexPosition);

    int lastTime = new DateTime.now().millisecondsSinceEpoch;
    double t = (lastTime - startTime) *0.001;
    //print("##${t}");

    webgl.UniformLocation timeLocation = GL.getUniformLocation(shaderProgram, "t");
    GL.uniform1f(timeLocation, t);
    
    webgl.UniformLocation mouseX = GL.getUniformLocation(shaderProgram, "x");
    webgl.UniformLocation mouseY = GL.getUniformLocation(shaderProgram, "y");
    GL.uniform1f(mouseX, x);
    GL.uniform1f(mouseY, 500-y);

    GL.drawElements(webgl.RenderingContext.TRIANGLES, 6,
        webgl.RenderingContext.UNSIGNED_SHORT, 0);

    new Future.delayed(new Duration(milliseconds:10)).then((render));
    if(count %100 == 0) {
      print("fps=${count/t.toInt()};x=${x};y=${y}");
    }
  }

  render(0);
}

webgl.Shader loadShader(webgl.RenderingContext context, int type, var src) {
  webgl.Shader shader = context.createShader(type);
  context.shaderSource(shader, src);
  context.compileShader(shader);
  if (false ==
      context.getShaderParameter(
          shader, webgl.RenderingContext.COMPILE_STATUS)) {
    String message =
        "Error compiling shader ${context.getShaderInfoLog(shader)}";
    context.deleteShader(shader);
    throw new Exception("${message}\n");
  }
  return shader;
}
>
-------
Kyorohiro work

kyorohiro.strikingly.com


No comments:

Post a Comment