gpjt / webgl-lessons Goto Github PK
View Code? Open in Web Editor NEWhttps://github.com/tparisi/webgl-lessons is now the officially maintained fork for this project
Home Page: http://learningwebgl.com/lessons/
License: MIT License
https://github.com/tparisi/webgl-lessons is now the officially maintained fork for this project
Home Page: http://learningwebgl.com/lessons/
License: MIT License
------------------------------------------------------------------ The official maintained repository for this project is now https://github.com/tparisi/webgl-lessons -- please fork from and send pull requests to there rather than here. ------------------------------------------------------------------ Some lessons in WebGL --------------------- This repository contains a series of simple lessons in WebGL, plus some related examples. The folders named lesson01, lesson02, and so on are a sequential tutorial and are best understood using the explanatory text at: <http://learningwebgl.com/lessons/> The form of the first ten lessons is *very* loosely based on NeHe Productions' well-known OpenGL tutorial, which can be found here: <http://nehe.gamedev.net/> The lessons from 11 onwards are not related to the NeHe ones. The folders named example01 etc are example code for interesting stuff outside the scope of the tutorial, and have their own README.txt files with details. Problems seeing the lessons? ---------------------------- When experimenting with the lessons later than #5 you may encounter errors resulting from "cross-origin" file access. This is caused by the browsers' security systems: * Browsers want to stop pages from one server ("origin") from gaining access to data from another origin except under closely-controlled circumstances. (For example, imagine if a hostile website tried to gain access to data from the online banking window you had open in another tab.) * Unfortunately, when files are loaded from the filesystem, the browser sees each file as a separate origin. So when one of these examples tries to load, say, a texture to display on a cube, it will fail. There are two ways you can work around this. The best, safest way is to use a local webserver, but an alternative if you're careful about it is to temporarily disable the cross-origin restrictions. The dangerous way ~~~~~~~~~~~~~~~~~ Switch off the same-origin policy. This is perfectly safe if you're only going to use the browser for testing your own code, but isn't a good idea in general (it's all too easy to casually browse over to an internet site without thinking about it). Still, if you want to do this: * Firefox: set the security.fileuri.strict_origin_policy setting in about: config to "false". * Chrome: use the the --allow-file-access-from-files and --disable-web-security switches command-line options (ideally just the first). If you're using a Mac, Stuart Carnie has written a convenient application bundle for this here: <http://aussiebloke.blogspot.com/2011/08/local-file-system-development-with.html> The safe way ~~~~~~~~~~~~ Here are instructions on how to run a local web server to host these lessons using Apache under Mac OS X; GNU/Linux will be similar. If you're on Windows, check out Xampp at <http://www.apachefriends.org/en/xampp.html> 1) Add an entry for webgl-lessons.local in /etc/hosts. This will need to be done as the root user using your preferred editor: $ sudo <editor> /etc/hosts Add the following line and save the file: 127.0.0.1 webgl-lessons.local Tell the operating system to flush and reload the local DNS cache: dscacheutil -flushcache Test to see if http://webgl-lessons.local/ is working: $ dscacheutil -q host -a name http://webgl-lessons.local/ name: http://webgl-lessons.local/ ip_address: <ip_address> 2) Add an Apache vhost configuration: This will need to be done as the root user using your preferred editor: $ sudo <editor> /private/etc/apache2/extra/httpd-vhosts.conf Add the following vhost configuration replacing <path-to-webgl-lessons> with the actual path on your filesystem: <VirtualHost webgl-lessons.local:80> ServerName webgl-lessons DocumentRoot <path-to-webgl-lessons>/ <Directory <path-to-webgl-lessons>> Options +Indexes +FollowSymLinks +MultiViews +Includes AllowOverride All Order allow,deny Allow from all DirectoryIndex index.html </Directory> </VirtualHost> After making the change in the Apache vhost configuration first confirm the syntax for the Apache configuration is still correct: $ apachectl configtest Syntax OK If the syntax is OK then restart Apache: $ sudo apachectl restart Now you can open the webgl-lessons in any local browser at this url: <http://webgl-lessons.local/>
Just wanted to provide a quick Linux server option to go with the section on XAMPP.
terminal
.nodejs
with your package manager.nodejs
comes with the npm
market, so use npm
to install http-server
with the -g
flag (likely npm install http-server -g
). -g
is to install http-server
with the global npm
install instead of just in the current directory.http-server --cors
(cors is for the whole cross origin thing) in the directory with your working files.So the API for glMatrix has changed since these tutorials were written.
I have completed tutorial_001 and found that these areas need to be changed:
mat4.perspective() now requires the output matrix be the first parameter and mat4.translate() now requires three params: outMat, inMat, translationVector:
so inside drawScene() from
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
to
function drawScene () {
gl.viewport (0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear (gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective (pMatrix, 45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
mat4.identity (mvMatrix);
var translation = vec3.create ();
//draw the triangle
vec3.set (translation, -1.5, 1.0, -7.0);
mat4.translate (mvMatrix, mvMatrix, translation);
gl.bindBuffer (gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer (shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms ();
gl.drawArrays (gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
// draw the square
vec3.set (translation, 3.0, 0.0, 0.0);
mat4.translate (mvMatrix, mvMatrix, translation);
gl.bindBuffer (gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer (shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms ();
gl.drawArrays (gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
You don't have to do the translation vector the way I did it, but it's there in case anyone wants cares.
In general, the new glMatrix API is much more consistent; the docs are at the URL above.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.