Tutorial WebGL Sample - Versionsgeschichte

Coolcat: Anpassung an die aktuelle Spezifikation

2009-12-13T12:00:24Z

Anpassung an die aktuelle Spezifikation

Änderungen zeigen

Coolcat: Kommando zurück....das ist irgnedwas faul...

2009-11-03T09:27:23Z

Kommando zurück....das ist irgnedwas faul...

Coolcat: Verhalten von vertexAttribPointer hat sich im Firefox geändert

2009-11-03T09:21:33Z

Verhalten von vertexAttribPointer hat sich im Firefox geändert

Coolcat am 31. Oktober 2009 um 14:43 Uhr

2009-10-31T14:43:14Z

Coolcat: vec2

2009-10-30T11:13:22Z

vec2

Coolcat: Links aktualisiert

2009-10-27T20:55:34Z

Links aktualisiert

Coolcat: hat „Benutzer:Coolcat/Tutorial WebGL Sample“ nach „Tutorial WebGL Sample“ verschoben: Das Tutorial ist nun öffentlich, entsprechend sollte auch das Sample an einer passenden Stelle sein. Ich hoffe das ist ok. :)

2009-10-27T20:54:58Z

hat „Benutzer:Coolcat/Tutorial WebGL Sample“ nach „Tutorial WebGL Sample“ verschoben: Das Tutorial ist nun öffentlich, entsprechend sollte auch das Sample an einer passenden Stelle sein. Ich hoffe das ist ok. :)

I0n0s: Rechtschreibung korrigiert

2009-10-26T13:43:34Z

Rechtschreibung korrigiert

Coolcat am 26. Oktober 2009 um 09:05 Uhr

2009-10-26T09:05:11Z

Coolcat: Beispielanwendung für WebGL Tutorial

2009-10-26T08:55:27Z

Beispielanwendung für WebGL Tutorial

Neue Seite

Dies ist eine Beispiel Anwendung zum [[Benutzer:Coolcat/Tutorial_WebGL|WebGL-Tutorial]]. Zum ausprobieren den Quelltext in eine Datei kopieren und mit einem [[Benutzer:Coolcat/Tutorial_WebGL|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren stelle sicher, dass die Textur erreichbar ist.

<source lang="html4strict">
<html>


<head>
<script type="text/javascript">
var gl = null; // our WebGL rendering context
var viewportWidth;
var viewportHeight;

var program; // shader program object
var vbo; // vertexbufferobject
var texture; // texture object

function init() {
// request rendering context from the canvas
// =================================================
var canvas = document.getElementById("canvas");
viewportWidth = canvas.width;
viewportHeight = canvas.height;
try {
// using Mozilla? (e.g. Firefox, ...)
if (!gl) { gl = canvas.getContext("moz-webgl"); }
} catch (e) { }
try {
// using Webkit? (e.g. Google Chrome, ...)
if (!gl) { gl = canvas.getContext("webkit-3d"); }
} catch (e) { }

if (!gl) {
alert("No known OpenGL context detected! Is it enabled?");
return;
}

// basic settings
// =================================================
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);

// setup shaders
// =================================================
var vertexShaderSource = getShaderSource("shader-vs");
var fragmentShaderSource = getShaderSource("shader-fs");

var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) {
alert("Shader problem");
}

// create program object
program = gl.createProgram();

// attach our two shaders to the program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// setup attributes and uniforms (optional)
gl.bindAttribLocation(program, 0, "aPosition");
gl.bindAttribLocation(program, 1, "aNormal");
gl.bindAttribLocation(program, 2, "aTexCoord");
gl.uniform1i(gl.getUniformLocation(program, "uTexture"), 0);

// linking
gl.linkProgram(program);
if (!gl.getProgrami(program, gl.LINK_STATUS)) {
alert(gl.getProgramInfoLog(program));
}

// setup VBO
// =================================================

// define some vertexdata
var vertices = [
// position XYZ, normal XYZ, texcoord UV => 8 floats per vertex
-0.5, 0.5, 0.0, 0.6, 0.0, 0.8, 0.0, 0.0,
0.5, 0.5, 0.0, 0.6, 0.0, 0.8, 1.0, 0.0,
-0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0,
0.5, -0.5, 0.0, 0.0, 0.6, 0.8, 1.0, 1.0,

// add an additional vertex, this is an workaround for this bug:
// https://bugzilla.mozilla.org/show_bug.cgi?id=521667
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0
];
// create VBO
vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(vertices), gl.STATIC_DRAW);

// create texture
// =================================================
texture = loadTexture("http://wiki.delphigl.com/wiki.png");
}

function getShaderSource(id) {
var script = document.getElementById(id);
if (!script) { return null; }

var source = "";
var child = script.firstChild;
while (child) {
// node is a "textnode" ?
if (child.nodeType == 3) {
source += child.textContent;
}
child = child.nextSibling;
}
return source;
}

function loadShader(shaderType, shaderSource) {
var shader = gl.createShader(shaderType);
if (!shader) { return null; }
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);

if (!gl.getShaderi(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

function loadTexture(filename) {
// preparations
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
var image = new Image();

// register event handlers
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, image);
gl.generateMipmap(gl.TEXTURE_2D);
draw(); // texture now available, we can redraw the scene
}
image.onerror = function() {
alert("error while loading image '"+filename+"'.");
}

// request image from server
image.src = filename;

// return texture object (asynchronous loading, texture NOT available yet!)
return texture;
}

function draw() {
gl.viewport(0, 0, viewportWidth, viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

// setup shader
gl.useProgram(program);

// setup interleaved VBO
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8, 0); // position
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8, 3); // normal
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 6); // texcoord

// setup texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

// draw the buffer
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec3 aTexCoord;
varying vec3 vNormal;
varying vec2 vTexCoord;
void main() {
gl_Position = vec4(aPosition, 1.0);
vTexCoord = aTexCoord;
vNormal = aNormal;
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
varying vec3 vNormal;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
void main() {
gl_FragColor = texture2D(uTexture, vTexCoord);
}
</script>
</head>
<body onload="init()">
<div style="text-align: center">
<canvas id="canvas" width="512" height="512"></canvas>
</div>
</body>
</html>
</source>

← Nächstältere Version		Version vom 27. Oktober 2009, 20:55 Uhr
Zeile 1:		Zeile 1:
−	Dies ist eine Beispielanwendung zum [[~~Benutzer:Coolcat/~~Tutorial_WebGL\|WebGL-Tutorial]]. Zum Ausprobieren den Quelltext in eine Datei kopieren und mit einem [[~~Benutzer:Coolcat/~~Tutorial_WebGL\|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren, stelle sicher, dass die Textur erreichbar ist.	+	Dies ist eine Beispielanwendung zum [[Tutorial_WebGL\|WebGL-Tutorial]]. Zum Ausprobieren den Quelltext in eine Datei kopieren und mit einem [[Tutorial_WebGL\|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren, stelle sicher, dass die Textur erreichbar ist.

	Das Ganze sollte ungefähr so aussehen:		Das Ganze sollte ungefähr so aussehen:

@@ Zeile 1: / Zeile 1: @@
-Dies ist eine Beispiel Anwendung zum [[Benutzer:Coolcat/Tutorial_WebGL|WebGL-Tutorial]]. Zum ausprobieren den Quelltext in eine Datei kopieren und mit einem [[Benutzer:Coolcat/Tutorial_WebGL|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren stelle sicher, dass die Textur erreichbar ist.
+Dies ist eine Beispielanwendung zum [[Benutzer:Coolcat/Tutorial_WebGL|WebGL-Tutorial]]. Zum Ausprobieren den Quelltext in eine Datei kopieren und mit einem [[Benutzer:Coolcat/Tutorial_WebGL|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren, stelle sicher, dass die Textur erreichbar ist.
-Das ganze sollte ungefähr so aussehen:
+Das Ganze sollte ungefähr so aussehen:
 [[Bild:webgl-sample.jpg|320px]]

← Nächstältere Version		Version vom 26. Oktober 2009, 09:05 Uhr
Zeile 1:		Zeile 1:
	Dies ist eine Beispiel Anwendung zum [[Benutzer:Coolcat/Tutorial_WebGL\|WebGL-Tutorial]]. Zum ausprobieren den Quelltext in eine Datei kopieren und mit einem [[Benutzer:Coolcat/Tutorial_WebGL\|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren stelle sicher, dass die Textur erreichbar ist.		Dies ist eine Beispiel Anwendung zum [[Benutzer:Coolcat/Tutorial_WebGL\|WebGL-Tutorial]]. Zum ausprobieren den Quelltext in eine Datei kopieren und mit einem [[Benutzer:Coolcat/Tutorial_WebGL\|WebGL-fähigen Browser]] öffnen. Es wird eine Textur von der URL <tt><nowiki>"http://wiki.delphigl.com/wiki.png"</nowiki></tt> geladen. Sollte die Anwendung nicht funktionieren stelle sicher, dass die Textur erreichbar ist.
		+
		+	Das ganze sollte ungefähr so aussehen:
		+
		+	[[Bild:webgl-sample.jpg\|320px]]

	<source lang="html4strict">		<source lang="html4strict">

@@ Zeile 182: / Zeile 182: @@
                  gl.enableVertexAttribArray(1);
                  gl.enableVertexAttribArray(2);
-                 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8*4, 0); // position
+                 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8, 0); // position
-                 gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8*4, 3); // normal
+                 gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8, 3); // normal
-                 gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8*4, 6); // texcoord
+                 gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 6); // texcoord
                  // setup texture

@@ Zeile 74: / Zeile 74: @@
                  gl.attachShader(program, fragmentShader);
-                 // setup attributes and uniforms (optional)
+                 // setup attributes (optional)
                  gl.bindAttribLocation(program, 0, "aPosition");
                  gl.bindAttribLocation(program, 1, "aNormal");
                  gl.bindAttribLocation(program, 2, "aTexCoord");
                  // linking
@@ Zeile 85: / Zeile 84: @@
                      alert(gl.getProgramInfoLog(program));
+                 }
                  // setup VBO

@@ Zeile 195: / Zeile 195: @@
              attribute vec3 aPosition;
              attribute vec3 aNormal;
-             attribute vec3 aTexCoord;
+             attribute vec2 aTexCoord;
              varying vec3 vNormal;
              varying vec2 vTexCoord;

← Nächstältere Version	Version vom 27. Oktober 2009, 20:54 Uhr
(kein Unterschied)