CMSC427 Fall 2017 OpenGL Notes A: Starting with JOGL and OpenGL Objectives of notes Readings Computer Graphics Programming in OpenGL with Java

Similar documents
CMSC427 OpenGL and JOGL

OUTLINE. Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system

OPENGL AND GLSL. Computer Graphics

Programming of Graphics

An Introduction to 2D OpenGL

INSTANCE VARIABLES (1/2) P. 1

INTRODUCTION. Computer Graphics

COMP3421 Computer Graphics

Lecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation

Shaders. Slide credit to Prof. Zwicker

OPENGL RENDERING PIPELINE

Today s Agenda. Basic design of a graphics system. Introduction to OpenGL

CS4621/5621 Fall Computer Graphics Practicum Intro to OpenGL/GLSL

JOGL 3D GRAPHICS. Drawing a 3D line. In this chapter, let us see how to deal with 3D graphics.

C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev

CS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J.

Programming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico

OUTLINE. Hierarchical Models Z-Fighting Primitives Besides Triangles Back Face Culling

1 Preview. Dr. Scott Gordon Computer Science Dept. CSUS. Virtual Cameras, Viewing Transformations: CSc-155 Advanced Computer Graphics

SHADER PROGRAMMING. Based on Jian Huang s lecture on Shader Programming

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.

Sign up for crits! Announcments

WebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015

Homework 3: Programmable Shaders

CS 381 Computer Graphics, Fall 2012 Midterm Exam Solutions. The Midterm Exam was given in class on Tuesday, October 16, 2012.

Programming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico

Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics. Sean Ellis Consultant Graphics Engineer ARM, Maidenhead

We assume that you are familiar with the following:

Mobile Application Programing: Android. OpenGL Operation

BCA611 Video Oyunları için 3B Grafik

Graphics Programming. Computer Graphics, VT 2016 Lecture 2, Chapter 2. Fredrik Nysjö Centre for Image analysis Uppsala University

WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

COMP3421/9415 Computer Graphics

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 4: Three Dimensions

CS 381 Computer Graphics, Fall 2008 Midterm Exam Solutions. The Midterm Exam was given in class on Thursday, October 23, 2008.

Shadows. Prof. George Wolberg Dept. of Computer Science City College of New York

CS559 Computer Graphics Fall 2015

The Projection Matrix

Lecture 9(B): GPUs & GPGPU

GLSL Overview: Creating a Program

Programming with OpenGL Part 3: Shaders. Ed Angel Professor of Emeritus of Computer Science University of New Mexico

CS 4620 Program 3: Pipeline

CS 432 Interactive Computer Graphics

CSE 4431/ M Advanced Topics in 3D Computer Graphics. TA: Margarita Vinnikov

Overview. By end of the week:

Mobile Application Programing: Android. OpenGL Operation

CSE 167: Introduction to Computer Graphics Lecture #13: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015

COMP371 COMPUTER GRAPHICS

CS 432 Interactive Computer Graphics

Mobile graphics API Overview

OpenGL SUPERBIBLE. Fifth Edition. Comprehensive Tutorial and Reference. Richard S. Wright, Jr. Nicholas Haemel Graham Sellers Benjamin Lipchak

WebGL A quick introduction. J. Madeira V. 0.2 September 2017

Shader Programs. Lecture 30 Subsections 2.8.2, Robb T. Koether. Hampden-Sydney College. Wed, Nov 16, 2011

Tutorial 04. Harshavardhan Kode. September 14, 2015

Shaders CSCI 4229/5229 Computer Graphics Fall 2017

Introductory Seminar

COMP3421. Particle Systems, Rasterisation

The Projection Matrix

object (say a cube) will be made up of triangles, each with three vertices, each with known object coordinates.

JOGL: An OpenGL Based Graphics Domain for PtolemyII Yasemin Demir

Blis: Better Language for Image Stuff Project Proposal Programming Languages and Translators, Spring 2017

CMSC427 Advanced shading getting global illumination by local methods. Credit: slides Prof. Zwicker

From system point of view, a graphics application handles the user input, changes the internal state, called the virtual world by modeling or

Open GL Framework For A Computer Graphics Course

CMSC427 Final Practice v2 Fall 2017

Mobile Application Programming: Android. OpenGL Operation

LSU EE Homework 5 Solution Due: 27 November 2017

We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

Lab 2-3D Transformations and Vertex Shaders

OpenGL shaders and programming models that provide object persistence

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

Introduction to OpenGL. CS 4620 Balazs Kovacs, 2014 Daniel Schroeder, 2013 Pramook Khungurn, 2012

Introduction to Shaders.

EDAF80 Introduction to Computer Graphics. Seminar 3. Shaders. Michael Doggett. Slides by Carl Johan Gribel,

Ciril Bohak. - INTRODUCTION TO WEBGL

Programming shaders & GPUs Christian Miller CS Fall 2011

Shader Programming 1. Examples. Vertex displacement mapping. Daniel Wesslén 1. Post-processing, animated procedural textures

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Spring 2017 Open GL Shader Language GLSL

Com S 336 Final Project Ideas

Supplement to Lecture 22

Computer Graphics (CS 4731) Lecture 11: Implementing Transformations. Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)

CSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016

Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014

Dave Shreiner, ARM March 2009

CS 428: Fall Introduction to. OpenGL primer. Andrew Nealen, Rutgers, /13/2010 1

CPSC 436D Video Game Programming

Hands-On Workshop: 3D Automotive Graphics on Connected Radios Using Rayleigh and OpenGL ES 2.0

Rasterization Overview

Android and OpenGL. Android Smartphone Programming. Matthias Keil. University of Freiburg

Computer Graphics Coursework 1

X. GPU Programming. Jacobs University Visualization and Computer Graphics Lab : Advanced Graphics - Chapter X 1

CS452/552; EE465/505. Review & Examples

Virtual Cameras and The Transformation Pipeline

MORE OPENGL. Pramook Khungurn CS 4621, Fall 2011

CMSC427 Transformations II: Viewing. Credit: some slides from Dr. Zwicker

Computergrafik. Matthias Zwicker. Herbst 2010

Computer Graphics (CS 543) Lecture 10: Soft Shadows (Maps and Volumes), Normal and Bump Mapping

Lecture 12: Mid-term test solution & project. CITS 3003 Graphics & Animation

Transcription:

CMSC427 Fall 2017 OpenGL Notes A: Starting with JOGL and OpenGL Objectives of notes Show how to program full OpenGL in JOGL Start on shader programing Readings Computer Graphics Programming in OpenGL with Java, Gordon and Clevenger 2017 Chapters 2, 4 OpenGL SuperBible, Sellers et al, 2017 Chapters 2, 3, 5 and 6 (although 5 and 6 have more detail than needed now.) Note: both books have chapters on math required for graphics (Chapter 3 in Gordon, Chapter 4 in the SuperBible up to page 89) which reviews much of the math we re done so far. These chapters may help you review this material. Step 1: Configuring and compiling On the class web page is a new file CMSC427OpenGLCode.zip. Download and unzip that. In the folder are OpenGL/JOGL programs from Chapter 2 and 4 of the Gordon textbook. There s two pdfs in the zip file on how to install JOGL and graphicslib3d. If you have already done the Microlab to get an OpenGL program running in Eclipse, then you have JOGL (and a JOGL project). Assuming you ve done this, you can add these examples to Eclipse. You can also add the file graphics3dlib.jar to the JOGL project you have in Eclipse, add that to the project libraries dependencies, and then have At least on a Mac is also easy to add JOGL jar and graphics3dlib.jar files to the /Library/Java/Extensions folder and set the CLASSPATH variable. Then you can compile and run these files with javac and java easily. My folder looks like this: I ve modified most of the examples to run on a Mac using these instructions: http://athena.ecs.csus.edu/~gordonvs/erratamac.html If this causes problems on a window machine you can reverse the changes by looking the comments in each file the original mycanvas=new GLCanvas() line is still there, just commented out. Key is knowing your OpenGL version and making sure the code is set to that version.

Step 2: Creating a GLCanvas The first example (Gordon 2.1) shows how to create a window in Java and add a GLCanvas to the window. A GLCanvas is a region of screen into which we can render OpenGL. The JFrame is the window and the GLCanvas is the drawable region inside of it. We ll use this code for future programs. public class Code extends JFrame implements GLEventListener { private GLCanvas mycanvas; public Code() { settitle("chapter2 - program1"); setsize(600,400); setlocation(200,200); // Added for Mac GLProfile glp = GLProfile.getMaxProgrammableCore(true); GLCapabilities caps = new GLCapabilities(glp); mycanvas = new GLCanvas(caps); // Replacing this line //mycanvas = new GLCanvas(); mycanvas.addgleventlistener(this); getcontentpane().add(mycanvas); setvisible(true); This example doesn t do much, only clearing the window to a fixed color. But it show the use of a GL4 object for making OpenGL calls. If your system doesn t support GL4, you can use GL3 instead. public void display(glautodrawable drawable) { GL4 gl = (GL4) GLContext.getCurrentGL(); float bkg[] = { 1.0f, 1.0f, 0.0f, 1.0f ; FloatBuffer bkgbuffer = Buffers.newDirectFloatBuffer(bkg); gl.glclearbufferfv(gl_color, 0, bkgbuffer); System.out.println("display"); The OpenGL command glclearbufferfv() illustrates two things. First, OpenGL commands want Java NIO buffers, not basic arrays, which is why we promote bkg to a buffer. And OpenGL commands come in different flavors: glclearbufferfv() has fv at the end to show it takes a float vector (or buffer). You can have glclearbufferiv() for int buffer. OpenGL is based on C so functions are not properly overloaded. If you want a proper Java application with buttons and other controls you can use a JPanel instead of a JFrame to host the GLCanvas.

Step 3: Compiling shaders The second example (Gordon 2.2) uses shaders. A full OpenGL program uses these to determine the processing of vertices and fragments. You must have a vertex and a fragment shader. There s two ways to include them: as strings in your program: String vshadersource[] = { " \n", " \n", "{ gl_position = vec4(0.0, 0.0, 0.0, 1.0); \n" ; String fshadersource[] = { " \n", "out vec4 color; \n", " \n", "{ color = vec4(0.0, 0.0, 1.0, 1.0); \n" ; Or as external files you read into your program (here with the help of a utility function from graphcis3dlib.jar.) String vshadersource[] = util.readshadersource("code/vert.shader"); String fshadersource[] = util.readshadersource("code/frag.shader"); int lengths[]; Either way you read in the shaders you have to compile and link them as follows: int vshader = gl.glcreateshader(gl_vertex_shader); int fshader = gl.glcreateshader(gl_fragment_shader); gl.glshadersource(vshader, vshadersource.length, vshadersource, null, 0); gl.glcompileshader(vshader); gl.glshadersource(fshader, fshadersource.length, fshadersource, null, 0); gl.glcompileshader(fshader); int vfprogram = gl.glcreateprogram(); gl.glattachshader(vfprogram, vshader); gl.glattachshader(vfprogram, fshader); gl.gllinkprogram(vfprogram); gl.gldeleteshader(vshader); gl.gldeleteshader(fshader); return vfprogram; Compiled shaders should return a small positive integer if you get -1 there has been an error. The final result is the shader program which you use to render your scenes. The examples in Gordon 2.3 show how to more thoroughly check for shader compilation errors.

Step 4: Reading shaders We re still on Gordon example 2.2. Shaders for OpenGL are typically written in GLSL (GL shader language) which is based on C. We ll over more through the semester. What we need to know now is the following: We need two, the vertex shader which processes each vertex in the pipeline, and the fragment shader, which processes each pixel belonging to a fragment. Each shader starts with a version number. Mac OS only runs up to version 4.1 at the moment, so if a shader has 430 (as Gordon does) it won t run on a Mac. The version number is important. Each shader has a main routine and can have other functions. GLSL has new types, such as vec2, vec3 and vec4 for small arrays. There are a few fixed variables, including gl_position, which are built-in. Vert.shader: This shader sets a fixed location for every vertex. { gl_position = vec4(0.0, 0.0, 0.5, 1.0); Frag.shader: This shader sets a fixed color for every pixel. out vec4 color; { color = vec4(0.0, 0.0, 1.0, 1.0); These shader programs are ultimately invoked by the following two lines in display(): gl.gluseprogram(rendering_program); gl.gldrawarrays(gl_points,0,1); This says to use the compiled and linked shader programs, and to draw one vertex starting at vertex 0.

Step 5: Reading shaders, second example In Gordon example 2.5 draws a triangle. There s two significant changes. First, the vertex shader now changes the point depending on the vertex id. The vertex id is a built-in predefined variable passed to the shader. { if (gl_vertexid == 0) gl_position = vec4( 0.25,-0.25, 0.0, 1.0); else if (gl_vertexid == 1) gl_position = vec4(-0.25,-0.25, 0.0, 1.0); else gl_position = vec4( 0.25, 0.25, 0.0, 1.0); Second, the command to actually draw, gldrawarrays(), is updated to indicate three vertices are to be drawn as a triangle: public void display(glautodrawable drawable) { GL4 gl = (GL4) GLContext.getCurrentGL(); gl.gluseprogram(rendering_program); gl.gldrawarrays(gl_triangles,0,3); System.out.println("display");

Step 6: Animation The animation example (Gordon 2.6) introduces Uniform shader variables. These are values that remain the same for all vertices and are passed in as discrete items. We use these for transforms (camera matrix, etc.) To animate a JOGL program we include an animator object and start it they can also be stopped and paused, and vary the framerate: FPSAnimator animator = new FPSAnimator(myCanvas, 30); animator.start(); Now the vertex shader has a new uniform variable inc. Since it is declared uniform, it is expected not to vary from vertex to vertex. The built-in variable gl_vertexid does varying, indexing into the vertices 0 to n, depending on how many are expected (that s given the the gldrawarrays() call). uniform float inc; { if (gl_vertexid == 0) gl_position = vec4( 0.25+inc,-0.25, 0.0, 1.0); else if (gl_vertexid == 1) gl_position = vec4(-0.25+inc,-0.25, 0.0, 1.0); else gl_position = vec4( 0.25+inc, 0.25, 0.0, 1.0); To get the value of a uniform variable into a shader, one way is to query the shader for an integer offset, and them use that offset to pass in a value to the uniform variable (x is a float here): x += inc; int offset_loc = gl.glgetuniformlocation(rendering_program, "inc"); gl.glprogramuniform1f(rendering_program, offset_loc, x);

Step 7: Passing in vertices In this final example (Gordon 4.1a) we will have a relatively complete program with camera, perspective, color and a polygonal mesh (a box made of triangles.) We ve covered all the concepts but not the details of OpenGL. There s three key sections of the program that do specific computation for the scene. First are lines 80-81 in display() that set the camera and cube locations: camerax = 0.0f; cameray = 0.0f; cameraz = 8.0f; cubelocx = 0.0f; cubelocy = -2.0f; cubelocz = 0.0f; No rotation so the camera matrix calculation is simplified. Second are lines 86-98 in setupvertices that record the vertex positions. Each triangle is given separately so vertices are repeated: private void setupvertices() { GL4 gl = (GL4) GLContext.getCurrentGL(); float[] vertex_positions = { -1.0f, 1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, -1.0f, And third is line 50 which sets the perspective transformation: Matrix3D pmat = perspective(60.0f, aspect, 0.1f, 1000.0f); This last example is long and complex we ll review it in class.