tutorials/01-triangle/TriangleTutorial.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Hello Triangle"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Welcome to your very first tutorial on rendering opengl using pyside2.\n",
    "\n",
    "What we are going to do now is pretty simple. We shall draw the `Hello Triangle` more specifically a single yellow triangle.\n",
    "You shall see that once you can draw a triangle, or better a cube, in a graphics api, you would understand the stages of rendering pretty well."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now run the cell below to see the final version of our triangle"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "CompletedProcess(args=['python', './app.py'], returncode=0)"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import subprocess\n",
    "\n",
    "subprocess.run([\"python\", \"./app.py\"])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Cool eh!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's do a fresh start and create a directory under this one called `myTriangle`.\n",
    "\n",
    "- Open the terminal\n",
    "- Go to this directory `cd PATH_TO_GITPROJECT/tutorials/01-triangle/`\n",
    "- Create a new directory `mkdir myTriangle`\n",
    "- Inside create to files `touch app.py` and `touch myGLWidget.py`\n",
    "\n",
    "The `app.py` will hold the window in which the gl widget would live, and `myGLWidget.py` simply defines the OpenGL rendering widget.\n",
    "\n",
    "Let's start by filling the easy one the `app.py`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Window Containing the OpenGL Rendering Widget\n",
    "\n",
    "This is essentially no different from a window containing any other widget, which is one of the reasons why you might want to use `pyside2` in the first place. It gives you to capacity to mix up an opengl widget with other traditional ones."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is the list of things we would need:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from PySide2 import QtWidgets, QtCore, QtGui\n",
    "from myGLWidget import TriangleGL\n",
    "from tutorials.utils.window import GLWindow as AppWindow\n",
    "import sys"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Obviously we have not made a TriangleGL widget yet, but we do need the other ones.\n",
    "\n",
    "The `window.py` contains an application window that contains several widgets alongside of an opengl one. \n",
    "We shall see how they would interract with each other in other tutorials. \n",
    "For now just remember that resizing the window resizes the opengl widget as well.\n",
    "Since this is not a tutorial on how to make a qt application we skip the explanation about the code in `window.py`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "So our `app.py` looks like the following. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from PySide2 import QtWidgets\n",
    "from myGLWidget import TriangleGL\n",
    "from tutorials.utils.window import GLWindow as AppWindow\n",
    "import sys\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app = QtWidgets.QApplication(sys.argv)\n",
    "    window = AppWindow(glwidget=TriangleGL)\n",
    "    window.show()\n",
    "    res = app.exec_()\n",
    "    sys.exit(res)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The last part with `if __name__ == '__main__'` is for dealing with `import` statements.\n",
    "\n",
    "As you can see it is a fairly simple window which contains 3 sliders and an opengl widget.\n",
    "\n",
    "Now let's create our OpenGL widget. First, let's see what objects we shall use for the widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import numpy as np  # facilitates interfacing with c \n",
    "import os  # general path manipulation\n",
    "import sys  # to send the exit signal if necessary\n",
    "import ctypes  # a must for communicating with c code under the opengl hood\n",
    "\n",
    "from PySide2 import QtWidgets, QtCore, QtGui\n",
    "from PySide2.QtGui import QVector3D  # for attribute/uniform values of type vec3 in shaders\n",
    "from PySide2.QtGui import QOpenGLVertexArrayObject  # the VAO in opengl jargon\n",
    "from PySide2.QtGui import QOpenGLBuffer  # a buffer object for storing your data\n",
    "from PySide2.QtGui import QOpenGLShaderProgram  # the shader program to which we can attach shaders\n",
    "from PySide2.QtGui import QOpenGLShader  # represents a shader\n",
    "from PySide2.QtGui import QOpenGLContext  # an opengl context in which a drawing occurs\n",
    "from PySide2.QtGui import QMatrix4x4  # for attribute/uniform values of type mat4 in shaders\n",
    "from PySide2.QtGui import QVector4D  # for attribute/uniform values of type vec4 in shaders\n",
    "\n",
    "from PySide2.QtWidgets import QApplication  # need to display error message \n",
    "from PySide2.QtWidgets import QMessageBox  # the box in which the message will appear\n",
    "from PySide2.QtWidgets import QOpenGLWidget  # the abstract class that we will inherit \n",
    "# for constructing our widget\n",
    "\n",
    "from PySide2.QtCore import QCoreApplication\n",
    "\n",
    "from PySide2.shiboken2 import VoidPtr  # needed for attribute pointer function"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A crucial library for accessing opengl related flags is `pyopengl`. \n",
    "So we need to check if it exists if we want to do anything related to opengl in python."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "try:\n",
    "    from OpenGL import GL as pygl\n",
    "except ImportError:\n",
    "    app = QApplication(sys.argv)\n",
    "    messageBox = QMessageBox(QMessageBox.Critical, \"OpenGL hellogl\",\n",
    "                             \"PyOpenGL must be installed to run this example.\",\n",
    "                             QMessageBox.Close)\n",
    "    messageBox.setDetailedText(\n",
    "        \"Run:\\npip install PyOpenGL PyOpenGL_accelerate\")\n",
    "    messageBox.exec_()\n",
    "    sys.exit(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's see now the actual glwidget constructor."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "class TriangleGL(QOpenGLWidget):\n",
    "    def __init__(self, parent=None):\n",
    "        QOpenGLWidget.__init__(self, parent)\n",
    "\n",
    "        # shaders etc\n",
    "        triangleTutoDir = os.path.dirname(__file__)\n",
    "        # triangleTutoDir = os.path.join(triangleTutoDir, os.pardir)\n",
    "        shaderDir = os.path.join(triangleTutoDir, \"shaders\")\n",
    "        availableShaders = [\"triangle\"]\n",
    "        self.shaders = {\n",
    "            name: {\n",
    "                \"fragment\": os.path.join(shaderDir, name + \".frag\"),\n",
    "                \"vertex\": os.path.join(shaderDir, name + \".vert\")\n",
    "            } for name in availableShaders\n",
    "        }\n",
    "        self.core = \"--coreprofile\" in QCoreApplication.arguments()\n",
    "\n",
    "        # opengl data related\n",
    "        self.context = QOpenGLContext()\n",
    "        self.vao = QOpenGLVertexArrayObject()\n",
    "        self.vbo = QOpenGLBuffer(QOpenGLBuffer.VertexBuffer)\n",
    "        self.program = QOpenGLShaderProgram()\n",
    "\n",
    "        # some vertex data for corners of triangle\n",
    "        # please do note that the dimension of the array is 1\n",
    "        # we shall specify the offset and stride for the\n",
    "        # vertices of the triangle\n",
    "\n",
    "        self.vertexData = np.array(\n",
    "            [-0.5, -0.5, 0.0,  # x, y, z\n",
    "             0.5, -0.5, 0.0,  # x, y, z\n",
    "             0.0, 0.5, 0.0],  # x, y, z\n",
    "            dtype=ctypes.c_float # notice the ctype for interfacing the underlaying c lib\n",
    "        )\n",
    "        # triangle color\n",
    "        self.triangleColor = QVector4D(0.5, 0.5, 0.0, 0.0)  # yellow triangle\n",
    "        # notice the correspondance the vec4 of fragment shader \n",
    "        # and our choice here"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "It is important to check the state of opengl in our machine. We can do so with the following method. Do not forget that your version of opengl has implication on the functions and the shaders you can use in your code."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "    def getGlInfo(self):\n",
    "        \"Get opengl info\"\n",
    "        info = \"\"\"\n",
    "            Vendor: {0}\n",
    "            Renderer: {1}\n",
    "            OpenGL Version: {2}\n",
    "            Shader Version: {3}\n",
    "            \"\"\".format(\n",
    "            pygl.glGetString(pygl.GL_VENDOR),\n",
    "            pygl.glGetString(pygl.GL_RENDERER),\n",
    "            pygl.glGetString(pygl.GL_VERSION),\n",
    "            pygl.glGetString(pygl.GL_SHADING_LANGUAGE_VERSION)\n",
    "        )\n",
    "        return info"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Since shaders are a big part of opengl. Let's see the shader related part of our glwidget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "    def loadShader(self,\n",
    "                   shaderName: str,\n",
    "                   shaderType: str):\n",
    "        \"Load shader\"\n",
    "        shader = self.shaders[shaderName]  # we choose the shader from available shaders\n",
    "        shaderSource = shader[shaderType]  # we take the source of the shader\n",
    "        if shaderType == \"vertex\":  # Notice that we specify the type of the shader in the\n",
    "            shader = QOpenGLShader(QOpenGLShader.Vertex)  # constructor of the qt-shader object \n",
    "        else:\n",
    "            shader = QOpenGLShader(QOpenGLShader.Fragment)\n",
    "        #\n",
    "        isCompiled = shader.compileSourceFile(shaderSource) # compilation of the shader\n",
    "        # we can not attach the shader to program before compilation\n",
    "        # so it is important check if the compilation occured without error\n",
    "\n",
    "        if isCompiled is False:\n",
    "            print(shader.log())\n",
    "            raise ValueError(\n",
    "                \"{0} shader {2} known as {1} is not compiled\".format(\n",
    "                    shaderType, shaderName, shaderSource\n",
    "                )\n",
    "            )\n",
    "        return shader\n",
    "\n",
    "    def loadVertexShader(self, shaderName: str):  # loads vertex shader\n",
    "        \"load vertex shader\"\n",
    "        return self.loadShader(shaderName, \"vertex\")\n",
    "\n",
    "    def loadFragmentShader(self, shaderName: str):  # loads fragment shader\n",
    "        \"load fragment shader\"\n",
    "        return self.loadShader(shaderName, \"fragment\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's see the actual drawing code which corresponds to the drawing loop in an equivalent c/c++ code. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    " def paintGL(self):  # Notice the uppercase of GL because this paintGL function corresponds to \n",
    "        \"drawing loop\" # a virtual function in c code some you need to implement this function\n",
    "                       # if you want to draw anything \n",
    "        # functions that are available for our current drawing context\n",
    "        funcs = self.context.functions()\n",
    "\n",
    "        # clean up what was drawn in the previous frame\n",
    "        funcs.glClear(pygl.GL_COLOR_BUFFER_BIT)\n",
    "\n",
    "        # actual drawing code\n",
    "        vaoBinder = QOpenGLVertexArrayObject.Binder(self.vao)  # we bind the vertex array object\n",
    "        self.program.bind()  # we bind the program means we activate the program\n",
    "        funcs.glDrawArrays(pygl.GL_TRIANGLES, # we draw the triangle\n",
    "                           0,\n",
    "                           3)\n",
    "        self.program.release()  # the frame is drawn so we can deactivate the program\n",
    "        vaoBinder = None  # we can unbind the vao since again the frame is drawn"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "What if we resize the viewport"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "    def resizeGL(self, width: int, height: int):\n",
    "        \"Resize the viewport\"\n",
    "        funcs = self.context.functions()  # get the functions available for our context\n",
    "        funcs.glViewport(0, 0, width, height)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "What if we close the opengl program, we should release the ressources."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "    def cleanUpGl(self):\n",
    "        \"Clean up everything\"\n",
    "        self.context.makeCurrent()  # we first make the context we want to release current\n",
    "        self.vbo.destroy()  # we destroy the buffer that holds the data\n",
    "        del self.program  # we delete the shader program, thus free the memory from it\n",
    "        self.program = None  # we change the value of the pointed reference \n",
    "        self.doneCurrent() # we make no context current in the current thread "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's see the most daunting part of the code that is initialization of the gl widget.\n",
    "First let's see the creation of the context in which the drawing would occur."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "    def initializeGL(self):\n",
    "        print('gl initial')\n",
    "        print(self.getGlInfo())\n",
    "        # create context \n",
    "        self.context.create()\n",
    "        # if the close signal is given we clean up the ressources as per defined above\n",
    "        self.context.aboutToBeDestroyed.connect(self.cleanUpGl)       "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We initialize the function that are available for the current context."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "        # initialize functions\n",
    "        funcs = self.context.functions()  # we obtain functions for the current context\n",
    "        funcs.initializeOpenGLFunctions() # we initialize functions\n",
    "        funcs.glClearColor(1, 1, 1, 1) # the color that will fill the frame when we call the function\n",
    "        # for cleaning the frame in paintGL"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's see how we initialize the shaders and shader program."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "        # deal with shaders\n",
    "        shaderName = \"triangle\"\n",
    "        vshader = self.loadVertexShader(shaderName)\n",
    "        fshader = self.loadFragmentShader(shaderName)\n",
    "\n",
    "        # creating shader program\n",
    "        self.program = QOpenGLShaderProgram(self.context)\n",
    "        self.program.addShader(vshader)  # adding vertex shader\n",
    "        self.program.addShader(fshader)  # adding fragment shader\n",
    "\n",
    "        # bind attribute to a location\n",
    "        self.program.bindAttributeLocation(\"aPos\", 0) # notice the correspondance of the\n",
    "        # name aPos in the vertex shader source\n",
    "\n",
    "        # link shader program\n",
    "        isLinked = self.program.link()\n",
    "        print(\"shader program is linked: \", isLinked)\n",
    "        # if the program is not linked we won't have any output so\n",
    "        # it is important to check for it\n",
    "\n",
    "        # bind the program == activate the program\n",
    "        self.program.bind()\n",
    "\n",
    "        # specify uniform value\n",
    "        colorLoc = self.program.uniformLocation(\"color\") \n",
    "        # notice the correspondance of the\n",
    "        # name color in fragment shader\n",
    "        # we also obtain the uniform location in order to \n",
    "        # set value to it\n",
    "        self.program.setUniformValue(colorLoc,\n",
    "                                     self.triangleColor)\n",
    "        # notice the correspondance of the color type vec4 \n",
    "        # and the type of triangleColor"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's create the vao which holds the vertex structure data, and buffer which holds the data itself."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "        # create vao and vbo\n",
    "\n",
    "        # vao\n",
    "        isVao = self.vao.create()\n",
    "        vaoBinder = QOpenGLVertexArrayObject.Binder(self.vao)\n",
    "\n",
    "        # vbo\n",
    "        isVbo = self.vbo.create()\n",
    "        isBound = self.vbo.bind()\n",
    "\n",
    "        # check if vao and vbo are created\n",
    "        print('vao created: ', isVao)\n",
    "        print('vbo created: ', isVbo)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let us allocate the space necessary for holding data in buffer."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "        floatSize = ctypes.sizeof(ctypes.c_float)\n",
    "\n",
    "        # allocate space on buffer\n",
    "        self.vbo.allocate(self.vertexData.tobytes(),  # the actual content of the data\n",
    "                          floatSize * self.vertexData.size  # the size of the data\n",
    "                         )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's see how to use vertex array object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "        funcs.glEnableVertexAttribArray(0)  \n",
    "        # 0 represent the location of aPos\n",
    "        # we know this number because it is us who bind it to that location above\n",
    "        nullptr = VoidPtr(0)  # no idea what we do with this thing.\n",
    "        funcs.glVertexAttribPointer(0,  # the location of aPos attribute\n",
    "                                    3,  # 3 for vec3\n",
    "                                    int(pygl.GL_FLOAT),  # type of value in the coordinates\n",
    "                                    # notice that we use a flag from opengl\n",
    "                                    int(pygl.GL_FALSE),  # should we normalize the coordinates\n",
    "                                    # or not\n",
    "                                    3 * floatSize, # stride. That is when does the next vertice\n",
    "                                    # start in the array\n",
    "                                    nullptr  # offset. From where the coordinates starts\n",
    "                                    # in the array, since we only have vertex coordinates \n",
    "                                    # in the array, we start from 0\n",
    "                                   )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we are done with all the steps. We should release the ressources."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "        self.vbo.release()\n",
    "        self.program.release()\n",
    "        vaoBinder = None"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is all of the method for initializing the glwidget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "    def initializeGL(self):\n",
    "        print('gl initial')\n",
    "        print(self.getGlInfo())\n",
    "        # create context and make it current\n",
    "        self.context.create()\n",
    "        self.context.aboutToBeDestroyed.connect(self.cleanUpGl)\n",
    "            \n",
    "        # initialize functions\n",
    "        funcs = self.context.functions()\n",
    "        funcs.initializeOpenGLFunctions()\n",
    "        funcs.glClearColor(1, 1, 1, 1)\n",
    "\n",
    "        # deal with shaders\n",
    "        shaderName = \"portableTriangle\"\n",
    "        vshader = self.loadVertexShader(shaderName)\n",
    "        fshader = self.loadFragmentShader(shaderName)\n",
    "\n",
    "        # creating shader program\n",
    "        self.program = QOpenGLShaderProgram(self.context)\n",
    "        self.program.addShader(vshader)  # adding vertex shader\n",
    "        self.program.addShader(fshader)  # adding fragment shader\n",
    "\n",
    "        # bind attribute to a location\n",
    "        self.program.bindAttributeLocation(\"aPos\", 0)\n",
    "\n",
    "        # link shader program\n",
    "        isLinked = self.program.link()\n",
    "        print(\"shader program is linked: \", isLinked)\n",
    "\n",
    "        # bind the program\n",
    "        self.program.bind()\n",
    "\n",
    "        # specify uniform value\n",
    "        colorLoc = self.program.uniformLocation(\"color\")\n",
    "        self.program.setUniformValue(colorLoc,\n",
    "                                     self.triangleColor)\n",
    "\n",
    "        # deal with vao and vbo\n",
    "\n",
    "        # create vao and vbo\n",
    "\n",
    "        # vao\n",
    "        isVao = self.vao.create()\n",
    "        vaoBinder = QOpenGLVertexArrayObject.Binder(self.vao)\n",
    "\n",
    "        # vbo\n",
    "        isVbo = self.vbo.create()\n",
    "        isBound = self.vbo.bind()\n",
    "\n",
    "        # check if vao and vbo are created\n",
    "        print('vao created: ', isVao)\n",
    "        print('vbo created: ', isVbo)\n",
    "\n",
    "        floatSize = ctypes.sizeof(ctypes.c_float)\n",
    "\n",
    "        # allocate space on buffer\n",
    "        self.vbo.allocate(self.vertexData.tobytes(),\n",
    "                          floatSize * self.vertexData.size)\n",
    "        funcs.glEnableVertexAttribArray(0)\n",
    "        nullptr = VoidPtr(0)\n",
    "        funcs.glVertexAttribPointer(0,\n",
    "                                    3,\n",
    "                                    int(pygl.GL_FLOAT),\n",
    "                                    int(pygl.GL_FALSE),\n",
    "                                    3 * floatSize,\n",
    "                                    nullptr)\n",
    "        self.vbo.release()\n",
    "        self.program.release()\n",
    "        vaoBinder = None"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now let's see all of our class which represent the widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "class TriangleGL(QOpenGLWidget):\n",
    "    def __init__(self, parent=None):\n",
    "        QOpenGLWidget.__init__(self, parent)\n",
    "\n",
    "        # shaders etc\n",
    "        projectdir = os.getcwd()\n",
    "        self.shaders = {\n",
    "            \"portableTriangle\": {\n",
    "                \"fragment\": \"\"\"\n",
    "uniform mediump vec4 color;\n",
    "\n",
    "void main(void)\n",
    "{\n",
    "    gl_FragColor = color;\n",
    "}\"\"\",\n",
    "                \"vertex\": \"\"\"\n",
    "attribute highp vec3 aPos;\n",
    "void main(void)\n",
    "{\n",
    "    gl_Position = vec4(aPos, 1.0);\n",
    "}\n",
    "\n",
    "\"\"\",\n",
    "\n",
    "            }\n",
    "        }\n",
    "        self.core = \"--coreprofile\" in QCoreApplication.arguments()\n",
    "\n",
    "        # opengl data related\n",
    "        self.context = QOpenGLContext()\n",
    "        self.vao = QOpenGLVertexArrayObject()\n",
    "        self.vbo = QOpenGLBuffer(QOpenGLBuffer.VertexBuffer)\n",
    "        self.program = QOpenGLShaderProgram()\n",
    "\n",
    "        # some vertex data for corners of triangle\n",
    "        self.vertexData = np.array(\n",
    "            [-0.5, -0.5, 0.0,  # x, y, z\n",
    "             0.5, -0.5, 0.0,  # x, y, z\n",
    "             0.0, 0.5, 0.0],  # x, y, z\n",
    "            dtype=ctypes.c_float\n",
    "        )\n",
    "        # triangle color\n",
    "        self.triangleColor = QVector4D(0.5, 0.5, 0.0, 0.0)  # yellow triangle\n",
    "        # notice the correspondance the vec4 of fragment shader \n",
    "        # and our choice here\n",
    "\n",
    "    def loadShader(self,\n",
    "                   shaderName: str,\n",
    "                   shaderType: str):\n",
    "        \"Load shader\"\n",
    "        shader = self.shaders[shaderName]\n",
    "        shaderSource = shader[shaderType]\n",
    "        if shaderType == \"vertex\":\n",
    "            shader = QOpenGLShader(QOpenGLShader.Vertex)\n",
    "        else:\n",
    "            shader = QOpenGLShader(QOpenGLShader.Fragment)\n",
    "        #\n",
    "        isCompiled = shader.compileSourceCode(shaderSource)\n",
    "\n",
    "        if isCompiled is False:\n",
    "            print(shader.log())\n",
    "            raise ValueError(\n",
    "                \"{0} shader {2} known as {1} is not compiled\".format(\n",
    "                    shaderType, shaderName, shaderSource\n",
    "                )\n",
    "            )\n",
    "        return shader\n",
    "\n",
    "    def loadVertexShader(self, shaderName: str):\n",
    "        \"load vertex shader\"\n",
    "        return self.loadShader(shaderName, \"vertex\")\n",
    "\n",
    "    def loadFragmentShader(self, shaderName: str):\n",
    "        \"load fragment shader\"\n",
    "        return self.loadShader(shaderName, \"fragment\")\n",
    "\n",
    "    def getGlInfo(self):\n",
    "        \"Get opengl info\"\n",
    "        info = \"\"\"\n",
    "            Vendor: {0}\n",
    "            Renderer: {1}\n",
    "            OpenGL Version: {2}\n",
    "            Shader Version: {3}\n",
    "            \"\"\".format(\n",
    "            pygl.glGetString(pygl.GL_VENDOR),\n",
    "            pygl.glGetString(pygl.GL_RENDERER),\n",
    "            pygl.glGetString(pygl.GL_VERSION),\n",
    "            pygl.glGetString(pygl.GL_SHADING_LANGUAGE_VERSION)\n",
    "        )\n",
    "        return info\n",
    "\n",
    "    def initializeGL(self):\n",
    "        print('gl initial')\n",
    "        print(self.getGlInfo())\n",
    "        # create context and make it current\n",
    "        self.context.create()\n",
    "        self.context.aboutToBeDestroyed.connect(self.cleanUpGl)\n",
    "            \n",
    "        # initialize functions\n",
    "        funcs = self.context.functions()\n",
    "        funcs.initializeOpenGLFunctions()\n",
    "        funcs.glClearColor(1, 1, 1, 1)\n",
    "\n",
    "        # deal with shaders\n",
    "        shaderName = \"portableTriangle\"\n",
    "        vshader = self.loadVertexShader(shaderName)\n",
    "        fshader = self.loadFragmentShader(shaderName)\n",
    "\n",
    "        # creating shader program\n",
    "        self.program = QOpenGLShaderProgram(self.context)\n",
    "        self.program.addShader(vshader)  # adding vertex shader\n",
    "        self.program.addShader(fshader)  # adding fragment shader\n",
    "\n",
    "        # bind attribute to a location\n",
    "        self.program.bindAttributeLocation(\"aPos\", 0)\n",
    "\n",
    "        # link shader program\n",
    "        isLinked = self.program.link()\n",
    "        print(\"shader program is linked: \", isLinked)\n",
    "\n",
    "        # bind the program\n",
    "        self.program.bind()\n",
    "\n",
    "        # specify uniform value\n",
    "        colorLoc = self.program.uniformLocation(\"color\")\n",
    "        self.program.setUniformValue(colorLoc,\n",
    "                                     self.triangleColor)\n",
    "\n",
    "        # self.useShader(\"triangle\")\n",
    "\n",
    "        # deal with vao and vbo\n",
    "\n",
    "        # create vao and vbo\n",
    "\n",
    "        # vao\n",
    "        isVao = self.vao.create()\n",
    "        vaoBinder = QOpenGLVertexArrayObject.Binder(self.vao)\n",
    "\n",
    "        # vbo\n",
    "        isVbo = self.vbo.create()\n",
    "        isBound = self.vbo.bind()\n",
    "\n",
    "        # check if vao and vbo are created\n",
    "        print('vao created: ', isVao)\n",
    "        print('vbo created: ', isVbo)\n",
    "\n",
    "        floatSize = ctypes.sizeof(ctypes.c_float)\n",
    "\n",
    "        # allocate space on buffer\n",
    "        self.vbo.allocate(self.vertexData.tobytes(),\n",
    "                          floatSize * self.vertexData.size)\n",
    "        funcs.glEnableVertexAttribArray(0)\n",
    "        nullptr = VoidPtr(0)\n",
    "        funcs.glVertexAttribPointer(0,\n",
    "                                    3,\n",
    "                                    int(pygl.GL_FLOAT),\n",
    "                                    int(pygl.GL_FALSE),\n",
    "                                    3 * floatSize,\n",
    "                                    nullptr)\n",
    "        self.vbo.release()\n",
    "        self.program.release()\n",
    "        vaoBinder = None\n",
    "\n",
    "    def cleanUpGl(self):\n",
    "        \"Clean up everything\"\n",
    "        self.context.makeCurrent()\n",
    "        self.vbo.destroy()\n",
    "        del self.program\n",
    "        self.program = None\n",
    "        self.doneCurrent()\n",
    "\n",
    "    def resizeGL(self, width: int, height: int):\n",
    "        \"Resize the viewport\"\n",
    "        funcs = self.context.functions()\n",
    "        funcs.glViewport(0, 0, width, height)\n",
    "\n",
    "    def paintGL(self):\n",
    "        \"drawing loop\"\n",
    "        funcs = self.context.functions()\n",
    "\n",
    "        # clean up what was drawn\n",
    "        funcs.glClear(pygl.GL_COLOR_BUFFER_BIT)\n",
    "\n",
    "        # actual drawing\n",
    "        vaoBinder = QOpenGLVertexArrayObject.Binder(self.vao)\n",
    "        self.program.bind()\n",
    "        funcs.glDrawArrays(pygl.GL_TRIANGLES,\n",
    "                           0,\n",
    "                           3)\n",
    "        self.program.release()\n",
    "        vaoBinder = None"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "All done! If you have come so far, congragulations. Try your triangle by executing the following cell."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import os\n",
    "import subprocess\n",
    "subprocess.run(\n",
    "    [\"python\", os.path.join(\"myTriangle\", \"app.py\")]\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}