8Observer8

Members
  • Content count

    30
  • Joined

  • Last visited

Community Reputation

160 Neutral

About 8Observer8

  • Rank
    Member

Personal Information

  • Interests
    |programmer|
  1. 2D game programming book

    This book: Build your own 2D Game Engine Or Discover Phaser Learn Pixi.js
  2. Let's create WebGL examples for practice

    WebGL 1.0. Pass a point color to a fragment shader https://jsfiddle.net/8Observer8/x77vfnxk/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Pass a point color to a fragment shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_PointColor; void main() { gl_FragColor = vec4(u_PointColor, 1.0); } `; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var u_PointColor = gl.getUniformLocation(program, "u_PointColor"); var r = 0.5, g = 0.8, b = 0.5; gl.uniform3f(u_PointColor, r, g, b); gl.drawArrays(gl.POINTS, 0, 1); </script> </body> </html> WebGL 2.0. Pass a point color to a fragment shader https://jsfiddle.net/8Observer8/vm1m4xhm/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Pass a point color to a fragment shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `#version 300 es void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_PointColor; out vec4 outColor; void main() { outColor = vec4(u_PointColor, 1.0); } `; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var u_PointColor = gl.getUniformLocation(program, "u_PointColor"); var r = 0.5, g = 0.8, b = 0.5; gl.uniform3f(u_PointColor, r, g, b); gl.drawArrays(gl.POINTS, 0, 1); </script> </body> </html>
  3. Let's create WebGL examples for practice

    WebGL 1.0. Drawing points in a circle by formulas: x = radius * cos(angle) y = radius * sin(angle) https://jsfiddle.net/8Observer8/k3o8yz4q/1/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drawing points in a circle by formulas</title> </head> <body> <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 4.0; }`; var fragmentShaderSource = `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); var radius = 0.7; for (var angle = 0; angle < 360; angle += 10) { var x = radius * Math.cos(angle * Math.PI / 180); var y = radius * Math.sin(angle * Math.PI / 180); gl.vertexAttrib2f(a_Position, x, y); gl.drawArrays(gl.POINTS, 0, 1); } } main(); </script> </body> </html> WebGL 2.0. Drawing points in a circle by formulas: x = radius * cos(angle) y = radius * sin(angle) https://jsfiddle.net/8Observer8/6L2uyka4/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drawing points in a circle by formulas</title> </head> <body> <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 4.0; }`; var fragmentShaderSource = `#version 300 es precision mediump float; out vec4 outColor; void main() { outColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); var radius = 0.7; for (var angle = 0; angle < 360; angle += 10) { var x = radius * Math.cos(angle * Math.PI / 180); var y = radius * Math.sin(angle * Math.PI / 180); gl.vertexAttrib2f(a_Position, x, y); gl.drawArrays(gl.POINTS, 0, 1); } } main(); </script> </body> </html>
  4. Let's create WebGL examples for practice

    WebGL 1.0. Pass a point coordinate to a shader https://jsfiddle.net/8Observer8/oLq23Lac/1/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pass a point coordinate to a shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttrib2f(a_Position, -0.7, 0.2); gl.drawArrays(gl.POINTS, 0, 1); } main(); </script> </body> </html> WebGL 2.0. Pass a point coordinate to a shader https://jsfiddle.net/8Observer8/wabur00e/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pass a point coordinate to a shader</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 10.0; }`; var fragmentShaderSource = `#version 300 es precision mediump float; out vec4 outColor; void main() { outColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttrib2f(a_Position, -0.7, 0.2); gl.drawArrays(gl.POINTS, 0, 1); } main(); </script> </body> </html>
  5. Let's create WebGL examples for practice

    Draw a point with the standard WebGL 2.0 https://jsfiddle.net/8Observer8/9b2k6mr8/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shortest Program</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid rgb(159, 133, 230);"></canvas> <script> var vertexShaderSource = `#version 300 es void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }` var fragmentShaderSource = `#version 300 es precision mediump float; out vec4 outColor; void main() { outColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById('renderCanvas').getContext('webgl2'); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); gl.drawArrays(gl.POINTS, 0, 1); } main(); </script> </body> </html>
  6. Let's create WebGL examples for practice

    WebGL 1.0. Draw a point https://jsfiddle.net/8Observer8/L20s5nut/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shortest Program</title> </head> <body> <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid rgb(159, 133, 230);"></canvas> <script> var vertexShaderSource = `void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }` var fragmentShaderSource = `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`; function main() { var gl = document.getElementById('renderCanvas').getContext('webgl'); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); gl.drawArrays(gl.POINTS, 0, 1); } main(); </script> </body> </html>
  7. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  8. Maybe my port of program "ClickedPoints" will be useful for someone. These programs are equivalent: ClickedPoints (WebGL) DrawPointsByClick (OpenTK) Screenshot:  
  9. This code draws the point in mouse click position: protected override void OnMouseDown(MouseButtonEventArgs e) { base.OnMouseDown(e); if (e.Button == MouseButton.Left) { float x = (e.X - Width / 2f) / (Width / 2f); float y = -(e.Y - Height / 2f) / (Height / 2f); // Pass coordinates of point to a_Position GL.VertexAttrib2(a_Position, x, y); Console.WriteLine(x + " " + y); } }
  10. The solution:   1. Open to: C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE 2. Right click on devenv.exe. 3. Hover to the "Run with graphics processor..." 4. Select "High-end NVidia processor".   This solution I found here: https://connect.microsoft.com/VisualStudio/feedback/details/1216990/visual-studio-2013-lacks-nvidia-optimus-profile-but-it-can-run-nvidia-graphics-processor-directly
  11. Hello, I try to port this example from WebGL: ch02/ClickedPoints in OpenTK. This example draws the points in position of mouse click. I draw one point in my example. In beginning the point is drawn in (0, 0.5). Drawing loop is 30 frames per second. When I click on the window area the point must to be redrawn in (0, 0) position. You can run and test my problem in VS2012 - VS2015: DrawPointsByClick_Problem.zip VertexShader.glsl #version 330 in vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; } FragmentShader.glsl #version 330 out vec4 fragColor; void main() { fragColor = vec4(0.0, 1.0, 1.0, 1.0); } Program.cs namespace DrawPointsByClick { class Program { static void Main(string[] args) { using (var mainWindow = new MainWindow()) { mainWindow.Run(30); } } } } MainWindow.cs using System; using System.Drawing; using OpenTK; using OpenTK.Graphics.OpenGL; using Utils; using OpenTK.Input; namespace DrawPointsByClick { class MainWindow : GameWindow { private int program; private bool canDraw = false; private int a_Position; protected override void OnLoad(EventArgs e) { base.OnLoad(e); // Load shaders from files string vShaderSource = null; string fShaderSource = null; ShaderLoader.LoadShader("./Shaders/VertexShader.glsl", out vShaderSource); ShaderLoader.LoadShader("./Shaders/FragmentShader.glsl", out fShaderSource); if (vShaderSource == null || fShaderSource == null) { Logger.Append("Failed to load shaders from files"); return; } // Initialize the shaders if (!ShaderLoader.InitShaders(vShaderSource, fShaderSource, out program)) { Logger.Append("Failed to initialize the shaders"); return; } // Get the storage location of a_Position a_Position = GL.GetAttribLocation(program, "a_Position"); if (a_Position < 0) { Logger.Append("Failed to get the storage location of a_Position"); return; } // Pass coordinates of point to a_Position GL.VertexAttrib2(a_Position, 0f, 0.5f); // Enable Point Size GL.Enable(EnableCap.ProgramPointSize); // Specify the color for clearing the canvas GL.ClearColor(Color.OliveDrab); canDraw = true; } protected override void OnRenderFrame(FrameEventArgs e) { GL.Viewport(0, 0, Width, Height); base.OnRenderFrame(e); // Clear the canvas with current color GL.Clear(ClearBufferMask.ColorBufferBit); if (canDraw) { // Draw the points GL.DrawArrays(PrimitiveType.Points, 0, 1); } GL.Flush(); SwapBuffers(); } protected override void OnMouseDown(MouseButtonEventArgs e) { base.OnMouseDown(e); Console.WriteLine("OnMouseDown"); // Pass coordinates of point to a_Position GL.VertexAttrib2(a_Position, 0f, 0f); } } } Utils.cs using System; using OpenTK.Graphics.OpenGL; using System.IO; namespace Utils { public class ShaderLoader { ///<summary> ///Create a program object and make current ///</summary> ///<param name="vShader">a vertex shader program</param> ///<param name="fShader">a fragment shader program</param> ///<param name="program">created program</param> ///<returns> ///return true, if the program object was created and successfully made current ///</returns> public static bool InitShaders(string vShaderSource, string fShaderSource, out int program) { program = CreateProgram(vShaderSource, fShaderSource); if (program == 0) { Logger.Append("Failed to create program"); return false; } GL.UseProgram(program); return true; } ///<summary> ///Load a shader from a file ///</summary> ///<param name="errorOutputFileName">a file name for error messages</param> ///<param name="fileName">a file name to a shader</param> ///<param name="shaderSource">a shader source string</param> public static void LoadShader(string shaderFileName, out string shaderSource) { if (File.Exists(Logger.logFileName)) { // Clear File File.WriteAllText(Logger.logFileName, ""); } shaderSource = null; using (StreamReader sr = new StreamReader(shaderFileName)) { shaderSource = sr.ReadToEnd(); } } private static int CreateProgram(string vShader, string fShader) { // Create shader object int vertexShader = LoadShader(ShaderType.VertexShader, vShader); int fragmentShader = LoadShader(ShaderType.FragmentShader, fShader); if (vertexShader == 0 || fragmentShader == 0) { return 0; } // Create a program object int program = GL.CreateProgram(); if (program == 0) { return 0; } // Attach the shader objects GL.AttachShader(program, vertexShader); GL.AttachShader(program, fragmentShader); // Link the program object GL.LinkProgram(program); // Check the result of linking int status; GL.GetProgram(program, GetProgramParameterName.LinkStatus, out status); if (status == 0) { string errorString = string.Format("Failed to link program: {0}" + Environment.NewLine, GL.GetProgramInfoLog(program)); Logger.Append(errorString); GL.DeleteProgram(program); GL.DeleteShader(vertexShader); GL.DeleteShader(fragmentShader); return 0; } return program; } private static int LoadShader(ShaderType shaderType, string shaderSource) { // Create shader object int shader = GL.CreateShader(shaderType); if (shader == 0) { Logger.Append("Unable to create shader"); return 0; } // Set the shader program GL.ShaderSource(shader, shaderSource); // Compile the shader GL.CompileShader(shader); // Check the result of compilation int status; GL.GetShader(shader, ShaderParameter.CompileStatus, out status); if (status == 0) { string errorString = string.Format("Failed to compile {0} shader: {1}", shaderType.ToString(), GL.GetShaderInfoLog(shader)); Logger.Append(errorString); GL.DeleteShader(shader); return 0; } return shader; } } public class Logger { public static string logFileName = "info.txt"; /// <summary> /// Write a message to a log file /// </summary> /// <param name="message">a message that will append to a log file</param> public static void Append(string message) { File.AppendAllText(logFileName, message + Environment.NewLine); } } }
  12. OpenGL gl_PointSize doesn't work

    Now it works!     I forgot to initialise the shaders.   The project: PointWithCustomSizeAndColour.zip   vShader.glsl #version 330   void main() {     gl_Position = vec4(0.8, 0.0, 0.0, 1.0);     gl_PointSize = 10.0; }   fShader.glsl #version 330   out vec4 fragColor;   void main() {     fragColor = vec4(1.0, 0.0, 0.0, 1.0); }   Program.cs namespace PointWithCustomSizeAndColour {     class Program     {         static void Main(string[] args)         {             using (MainWindow mainWindow = new MainWindow())             {                 mainWindow.Run(30);             }         }     } }   MainWindow.cs using System; using System.Drawing; using OpenTK; using OpenTK.Graphics.OpenGL; using System.IO; namespace PointWithCustomSizeAndColour { class MainWindow : GameWindow { string vShaderSource = null; string fShaderSource = null; bool canDraw = false; string infoFileName = "info.txt"; int program; protected override void OnLoad(EventArgs e) { base.OnLoad(e); Title = "Point With Custom Size And Colour"; Width = 512; Height = 512; // Load shaders from files ShaderLoader.LoadShader(infoFileName, "./Shaders/vShader.glsl", out vShaderSource); ShaderLoader.LoadShader(infoFileName, "./Shaders/fShader.glsl", out fShaderSource); if (vShaderSource == null || fShaderSource == null) { File.AppendAllText(infoFileName, "Failed to load shaders from files" + Environment.NewLine); return; } // Initialize shaders if (!ShaderLoader.InitShaders(vShaderSource, fShaderSource, out program)) { File.AppendAllText(infoFileName, "Failed to initialize the shaders" + Environment.NewLine); return; } // Specify the color for clearing GL.ClearColor(Color.Black); GL.Enable(EnableCap.ProgramPointSize); canDraw = true; } protected override void OnRenderFrame(FrameEventArgs e) { base.OnRenderFrame(e); GL.Viewport(0, 0, Width, Height); if (!canDraw) return; GL.Clear(ClearBufferMask.ColorBufferBit); // Draw a point GL.DrawArrays(PrimitiveType.Points, 0, 1); GL.Flush(); SwapBuffers(); } } }   ShaderLoader.cs using System.IO; using OpenTK.Graphics.OpenGL; using System;   namespace PointWithCustomSizeAndColour {     class ShaderLoader     {         private static string infoFileName = null;           ///<summary>         ///Create a program object and make current         ///</summary>        ///<param name="vShader">a vertex shader program</param>         ///<param name="fShader">a fragment shader program</param>         ///<param name="program">created program</param>         ///<returns>         ///return true, if the program object was created and successfully made current         ///</returns>         public static bool InitShaders(string vShader, string fShader, out int program)         {             program = CreateProgram(vShader, fShader);             if (program == 0)             {                 File.AppendAllText(infoFileName, "Failed to create program" + Environment.NewLine);                 return false;             }               GL.UseProgram(program);               return true;         }           ///<summary>         ///Load a shader from a file         ///</summary>         ///<param name="infoFileName">a file name for errors</param>         ///<param name="fileName">a file name to a shader</param>         ///<param name="shaderSource">a shader source string</param>         public static void LoadShader(string infoFileName, string fileName, out string shaderSource)         {             ShaderLoader.infoFileName = infoFileName;               if (File.Exists(infoFileName))             {                 // Clear File                 File.WriteAllText(infoFileName, "");             }               shaderSource = null;               using (StreamReader sr = new StreamReader(fileName))             {                 shaderSource = sr.ReadToEnd();             }         }           private static int CreateProgram(string vShader, string fShader)         {             // Create shader object             int vertexShader = LoadShader(ShaderType.VertexShader, vShader);             int fragmentShader = LoadShader(ShaderType.FragmentShader, fShader);             if (vertexShader == 0 || fragmentShader == 0)             {                 return 0;             }               // Create a program object             int program = GL.CreateProgram();             if (program == 0)             {                 return 0;             }               // Attach the shader objects             GL.AttachShader(program, vertexShader);             GL.AttachShader(program, fragmentShader);               // Link the program object             GL.LinkProgram(program);               // Check the result of linking             int status;             GL.GetProgram(program, GetProgramParameterName.LinkStatus, out status);             if (status == 0)             {                 string errorString = string.Format("Failed to link program: {0}" + Environment.NewLine, GL.GetProgramInfoLog(program));                 File.AppendAllText(infoFileName, errorString);                 GL.DeleteProgram(program);                 GL.DeleteShader(vertexShader);                 GL.DeleteShader(fragmentShader);                 return 0;             }               return program;         }           private static int LoadShader(ShaderType shaderType, string shaderSource)         {             // Create shader object             int shader = GL.CreateShader(shaderType);             if (shader == 0)             {                 File.AppendAllText(infoFileName, "Unable to create shader" + Environment.NewLine);                 return 0;             }               // Set the shader program             GL.ShaderSource(shader, shaderSource);               // Compile the shader             GL.CompileShader(shader);               // Check the result of compilation             int status;             GL.GetShader(shader, ShaderParameter.CompileStatus, out status);             if (status == 0)             {                 string errorString = string.Format("Failed to compile {0} shader: {1}" + Environment.NewLine, shaderType.ToString(), GL.GetShaderInfoLog(shader));                 File.AppendAllText(infoFileName, errorString);                 GL.DeleteShader(shader);                 return 0;             }               return shader;         }     } }
  13. The solution. You need to set for files "vShader.glsl" and "fShader.glsl" in settings: "Copy to Output Directory" to "Copy always".
  14. Hello, This version of my program works perfect. It gets shaders from strings: string vShaderSource = "#version 330\n" + "in vec4 a_Position;\n" + "void main() {\n" + "gl_Position = a_Position;\n" + "}\n"; string fShaderSource = "#version 330\n" + "out vec4 outColor;\n" + "void main() {\n" + "outColor = vec4(1.0, 0.0, 0.0, 1.0);\n" + "}\n"; Screenshot Download the Project: Triangle_StringShaders.zip But when I want to load shaders from files I receive the error, see shreenshot Download the Project: Triangle_FileShaderError.zip string vShaderSource = null; string fShaderSource = null; // ... private void renderCanvas_Load(object sender, EventArgs e) { // ... // Load shaders from files LoadShader("./Shaders/vShader.glsl", out vShaderSource); LoadShader("./Shaders/fShader.glsl", out fShaderSource); if (vShaderSource == null || fShaderSource == null) { File.AppendAllText(infoFileName, "Failed to load shaders from files"); return; } // ... } private void LoadShader(string fileName, out string shaderSource) { shaderSource = null; using (StreamReader sr = new StreamReader(fileName)) { shaderSource = sr.ReadToEnd(); } }
  15. OpenGL gl_PointSize doesn't work

    I know the solution: https://github.com/opentk/opentk/issues/489#issuecomment-282549309 gl_PointSize doens't work in OpenTK. We need to use GL.PointSize(float) (see glPointSize)