Databases
StackOverflow2013
Postsdbo
PODart WebGL window rendering not working
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODart WebGL window rendering not working
    primarykey
    data
    text
    <p>I'm trying to delve into dart's Web GL support, but I can not get it to work. I'm familiar with the "old" version of OpenGL in java (No shaders and such), and I got a pretty good idea of how GL works.</p> <p>However, I have a problem with my dart WebGL code which I cannot seem to be able to solve. Here's my code:</p> <pre class="lang-dart prettyprint-override"><code>import 'dart:html'; import 'dart:web_gl' as WebGL; import 'dart:typed_data'; import 'dart:math'; import 'package:vector_math/vector_math.dart'; WebGL.RenderingContext gl; CanvasElement canvas; Quad quad; void main() { canvas = querySelector("#game_canvas"); gl = canvas.getContext("experimental_webgl"); if (gl == null) { gl = canvas.getContext("webgl"); } if (gl == null) { canvas.remove(); querySelector("#error_log").text = "No WebGL"; return; } quad = new Quad(new Shader(""" precision highp float; attribute vec3 a_pos; uniform mat4 u_transform; uniform mat4 u_view; void main() { gl_Position = u_view * u_transform * vec4(a_pos, 1.0); } """, """ precision highp float; uniform vec4 u_color; void main() { gl_FragColor = u_color; } """ )); gl.enable(WebGL.DEPTH_TEST); gl.clearColor(0.0, 0.0, 0.0, 1.0); render(); } void render() { gl.viewport(0, 0, canvas.width, canvas.height); gl.clear(WebGL.COLOR_BUFFER_BIT | WebGL.DEPTH_BUFFER_BIT); Matrix4 view = makePerspectiveMatrix(70.0*PI/180.0, canvas.width / canvas.height, 0.1, 100.0); quad.setView(view); quad.render(new Vector3(150.0, 150.0, 30.0), 100, 100, new Vector4(1.0, 0.0, 0.0, 1.0)); //quad.render(new Vector3(450.0, 150.0, 0.0), 100, 100, new Vector4(0.0, 1.0, 1.0, 1.0)); } class Quad { Shader shader; int posLocation; WebGL.UniformLocation transformLocation, colorLocation, viewLocation; Quad(this.shader) { posLocation = gl.getAttribLocation(shader.program, "a_pos"); transformLocation = gl.getUniformLocation(shader.program, "u_transform"); colorLocation = gl.getUniformLocation(shader.program, "u_color"); viewLocation = gl.getUniformLocation(shader.program, "u_view"); Float32List vertexArray = new Float32List(4 * 3); vertexArray.setAll(0 * 3, [0.0, 0.0, 0.0]); vertexArray.setAll(1 * 3, [1.0, 0.0, 0.0]); vertexArray.setAll(2 * 3, [1.0, 1.0, 0.0]); vertexArray.setAll(3 * 3, [0.0, 1.0, 0.0]); Int16List indexArray = new Int16List(6); indexArray.setAll(0, [0, 1, 2, 0, 2, 3]); gl.useProgram(shader.program); gl.enableVertexAttribArray(posLocation); WebGL.Buffer vertexBuffer = gl.createBuffer(); gl.bindBuffer(WebGL.ARRAY_BUFFER, vertexBuffer); gl.bufferDataTyped(WebGL.ARRAY_BUFFER, vertexArray, WebGL.STATIC_DRAW); gl.vertexAttribPointer(posLocation, 3, WebGL.FLOAT, false, 0, 0); WebGL.Buffer indexBuffer = gl.createBuffer(); gl.bindBuffer(WebGL.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferDataTyped(WebGL.ELEMENT_ARRAY_BUFFER, indexArray, WebGL.STATIC_DRAW); gl.bindBuffer(WebGL.ELEMENT_ARRAY_BUFFER, indexBuffer); } void setView(Matrix4 view) { gl.uniformMatrix4fv(viewLocation, false, view.storage); } Matrix4 matrix = new Matrix4.identity(); void render(Vector3 pos, int w, int h, Vector4 color) { matrix.setIdentity(); matrix.translate(pos.x - w / 2.0, pos.y - h / 2.0, pos.z); matrix.scale(w * 1.0, h * 1.0, 0.0); gl.uniformMatrix4fv(transformLocation, false, matrix.storage); gl.uniform4fv(colorLocation, color.storage); gl.drawElements(WebGL.TRIANGLES, 6, WebGL.UNSIGNED_SHORT, 0); } } class Shader { String vsSource, fsSource; WebGL.Shader vertexShader, fragmentShader; WebGL.Program program; Shader(this.vsSource, this.fsSource) { compile(); } void compile() { vertexShader = gl.createShader(WebGL.VERTEX_SHADER); gl.shaderSource(vertexShader, vsSource); gl.compileShader(vertexShader); if (!gl.getShaderParameter(vertexShader, WebGL.COMPILE_STATUS)) { throw gl.getShaderInfoLog(vertexShader); } fragmentShader = gl.createShader(WebGL.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fsSource); gl.compileShader(fragmentShader); if (!gl.getShaderParameter(fragmentShader, WebGL.COMPILE_STATUS)) { throw gl.getShaderInfoLog(fragmentShader); } program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, WebGL.LINK_STATUS)) { throw gl.getProgramInfoLog(program); } } } </code></pre> <p>and my html file:</p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href="test.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="error_log"&gt;&lt;/p&gt; &lt;div&gt; &lt;canvas id="game_canvas" width="600" height="300"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;script type="application/dart" src="test.dart"&gt;&lt;/script&gt; &lt;script src="packages/browser/dart.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>All I get is a completely black (color depends on clear color) window. I had similar problems when working in java, and then it was the viewport which was causing it.</p> <p>However, I'm not sure if that's the problem here.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGünter Zöchbauer
    1. USDramentiaras
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODart WebGL window rendering not working
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. PODart WebGL window rendering not working
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. PODart WebGL window rendering not working
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload