GWT‎ > ‎GwtGL‎ > ‎

GLSL

OpenGL Shading Languageの略
shader 記述言語

WebGLが難しいと感じる最大の要因では?
変わりに、複雑なことを高速に動作できるようです。

頂点処理がVertex Shaderで画素処理がFragment Shader

Shaderに合わせて、値を引数で渡す感じでしょうか。
難しい、Shaderを記述するのではなく、自分が必要な物を、オープンソースなサンプルから見つけるのがよさそうです。

skybox by webgl

Vertex
attribute vec3 vertexPosition;
attribute vec2 texPosition;
uniform mat4 projectionMatrix;
varying vec2 texCoord;
void main() {
    gl_Position = projectionMatrix * vec4(vertexPosition, 1.0);
    texCoord = texPosition;
}

Fragment
#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D tex;
varying vec2 texCoord;
void main() {
    gl_FragColor = texture2D(tex, texCoord);
}

WebGL draw()
protected void draw() {
        glContext.clear(WebGLRenderingContext.COLOR_BUFFER_BIT | WebGLRenderingContext.DEPTH_BUFFER_BIT);
        // Use the program object
        glContext.useProgram(shaderProgram);

        // Load the vertex data
        glContext.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, buffer);
        glContext.vertexAttribPointer(vertexPositionAttribute, 3, WebGLRenderingContext.FLOAT, false, 0, 0);

        glContext.vertexAttribPointer(textureCoordAttribute, 2, WebGLRenderingContext.FLOAT, false, 0, texCoordsOffset);
        WebGLUniformLocation mvUniform = glContext.getUniformLocation(shaderProgram, "projectionMatrix");

        perspectiveMatrix = MatrixUtil.createPerspectiveMatrix(45, 1.0f, 0.1f, 100);
        translationMatrix = MatrixUtil.createTranslationMatrix(0, 0, translateZ);
        rotationMatrix = MatrixUtil.createRotationMatrix(camera.getRotationXAxis(), camera.getRotationYAxis(), 0);
        resultingMatrix = perspectiveMatrix.multiply(translationMatrix).multiply(rotationMatrix);

        glContext.uniformMatrix4fv(mvUniform, false, resultingMatrix.getColumnWiseFlatData());
        glContext.uniform1i(textureUniform, 0);
       
        glContext.activeTexture(WebGLRenderingContext.TEXTURE0);
       
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, textureBack);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 6);
       
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, textureFront);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 6, 6);
       
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, textureLeft);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 12, 6);
       
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, textureRight);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 18, 6);
       
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, textureTop);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 24, 6);
       
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, textureBottom);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 30, 6);
       
        checkErrors();
        glContext.flush();
        checkErrors();
    }



texturedcube by webgl

Vertex
attribute vec3 vertexPosition;
attribute vec2 texPosition;
uniform mat4 projectionMatrix;
varying vec2 texCoord;
void main() {
    gl_Position = projectionMatrix * vec4(vertexPosition, 1.0);
    texCoord = texPosition;
}

Fragment
#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D tex;
varying vec2 texCoord;
void main() {
    gl_FragColor = texture2D(tex, texCoord);
}

WebGL draw()
 
   protected void draw() {
        angleX = (angleX + 1) % 360;
        angleY = (angleY + 1) % 360;
        // angleZ=(angleZ+2)%360;

        glContext.clear(WebGLRenderingContext.COLOR_BUFFER_BIT | WebGLRenderingContext.DEPTH_BUFFER_BIT);

        glContext.vertexAttribPointer(vertexPositionAttribute, 3,
                WebGLRenderingContext.FLOAT, false, 0, 0);

        // Load the vertex data
        glContext.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, vertexBuffer);
        glContext.vertexAttribPointer(vertexPositionAttribute, 3, WebGLRenderingContext.FLOAT, false, 0, 0);
       
        // Load the texture coordinates data
        glContext.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, vertexTextureCoordBuffer);
        glContext.vertexAttribPointer(textureCoordAttribute, 2, WebGLRenderingContext.FLOAT, false, 0, 0);

        perspectiveMatrix = MatrixUtil.createPerspectiveMatrix(45, 1.0f, 0.1f, 100);
        translationMatrix = MatrixUtil.createTranslationMatrix(0, 0, translateZ);
        rotationMatrix = MatrixUtil.createRotationMatrix(angleX, angleY, angleZ);
        resultingMatrix = perspectiveMatrix.multiply(translationMatrix).multiply(rotationMatrix);

        glContext.uniformMatrix4fv(projectionMatrixUniform, false, resultingMatrix.getColumnWiseFlatData());
       
        // Bind the texture to texture unit 0
        glContext.activeTexture(WebGLRenderingContext.TEXTURE0);
        glContext.bindTexture(WebGLRenderingContext.TEXTURE_2D, texture);

        // Point the uniform sampler to texture unit 0
        glContext.uniform1i(textureUniform, 0);
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 36);
        glContext.flush();
        checkErrors();
    }

color-triangle by webgl

Vertex
attribute vec3 vertexPosition;
attribute vec4 vertexColor;
uniform mat4 projectionMatrix;
varying vec4 vColor;

void main(void) {
    gl_Position = projectionMatrix * vec4(vertexPosition, 1.0);
    vColor = vertexColor;
}

Fragment
#ifdef GL_ES
precision highp float;
#endif

varying vec4 vColor;

void main(void)
{
    gl_FragColor = vColor;
}

WebGL draw()
protected void draw() {
        // Clear the color buffer and the depth buffer
        glContext.clear(WebGLRenderingContext.COLOR_BUFFER_BIT | WebGLRenderingContext.DEPTH_BUFFER_BIT);

        glContext.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, vertexBuffer);
        glContext.vertexAttribPointer(vertexPositionAttribute, 3, WebGLRenderingContext.FLOAT, false, 0, 0);
        glContext.enableVertexAttribArray(vertexPositionAttribute);

        glContext.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, colorBuffer);
        glContext.vertexAttribPointer(vertexColorAttribute, 4, WebGLRenderingContext.FLOAT, false, 0, 0);
        glContext.enableVertexAttribArray(vertexColorAttribute);
       
        glContext.bindBuffer(WebGLRenderingContext.ELEMENT_ARRAY_BUFFER, indexBuffer);

        // Bind the projection matrix to the shader
        glContext.uniformMatrix4fv(projectionMatrixUniform, false, projectionMatrix.getColumnWiseFlatData());

        // Draw the polygon
        glContext.drawElements(WebGLRenderingContext.TRIANGLES, 3, WebGLRenderingContext.UNSIGNED_SHORT, 0);
//        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 3);
        glContext.flush();
        checkErrors();
    }

white-triangle by webgl

Vertex
attribute vec3 vertexPosition;
uniform mat4 projectionMatrix;
void main(void) {
    gl_Position = projectionMatrix * vec4(vertexPosition, 1.0);
}

Fragment
#ifdef GL_ES
precision highp float;
#endif

void main(void)
{
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

WebGL draw()
protected void draw() {
        glContext.clear(WebGLRenderingContext.COLOR_BUFFER_BIT | WebGLRenderingContext.DEPTH_BUFFER_BIT);

        glContext.vertexAttribPointer(vertexPositionAttribute, 3, WebGLRenderingContext.FLOAT, false, 0, 0);

        glContext.uniformMatrix4fv(projectionMatrixUniform, false, projectionMatrix.getColumnWiseFlatData());
        glContext.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 3);
    }


shiny-teapot by Google


Vertex
var bumpReflectVertexSource = [ "attribute vec3 g_Position;", "attribute vec3 g_TexCoord0;", "attribute vec3 g_Tangent;", "attribute vec3 g_Binormal;", "attribute vec3 g_Normal;", "", "uniform mat4 world;", "uniform mat4 worldInverseTranspose;", "uniform mat4 worldViewProj;", "uniform mat4 viewInverse;", "", "varying vec2 texCoord;", "varying vec3 worldEyeVec;", "varying vec3 worldNormal;", "varying vec3 worldTangent;", "varying vec3 worldBinorm;", "", "void main() {", " gl_Position = worldViewProj * vec4(g_Position.xyz, 1.);", " texCoord.xy = g_TexCoord0.xy;", " worldNormal = (worldInverseTranspose * vec4(g_Normal, 1.)).xyz;", " worldTangent = (worldInverseTranspose * vec4(g_Tangent, 1.)).xyz;", " worldBinorm = (worldInverseTranspose * vec4(g_Binormal, 1.)).xyz;", " vec3 worldPos = (world * vec4(g_Position, 1.)).xyz;", " worldEyeVec = normalize(worldPos - viewInverse[3].xyz);", "}" ].join("\n");

Fragment
var bumpReflectFragmentSource = [ "precision mediump float;\n", "const float bumpHeight = 0.2;", "", "uniform sampler2D normalSampler;", "uniform samplerCube envSampler;", "", "varying vec2 texCoord;", "varying vec3 worldEyeVec;", "varying vec3 worldNormal;", "varying vec3 worldTangent;", "varying vec3 worldBinorm;", "", "void main() {", " vec2 bump = (texture2D(normalSampler, texCoord.xy).xy * 2.0 - 1.0) * bumpHeight;", " vec3 normal = normalize(worldNormal);", " vec3 tangent = normalize(worldTangent);", " vec3 binormal = normalize(worldBinorm);", " vec3 nb = normal + bump.x * tangent + bump.y * binormal;", " nb = normalize(nb);", " vec3 worldEye = normalize(worldEyeVec);", " vec3 lookup = reflect(worldEye, nb);", " vec4 color = textureCube(envSampler, lookup);", " gl_FragColor = color;", "}" ].join("\n");

flat by Gwt-g3d

fragment
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 uColor;

void main() {
  gl_FragColor = uColor;
}
vertex

uniform mat4 uModelViewMatrix, uProjectionMatrix;

attribute vec3 aPosition;

void main() {
  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}


lambetrian by Gwt-g3d


fragment
uniform mat4 uModelViewMatrix, uProjectionMatrix;
uniform mat3 uNormalMatrix;
uniform vec3 uLightPosition;

attribute vec4 aPosition;
attribute vec3 aNormal;

varying vec3 vNormal, vLightDir;

void main() {
  vec4 worldPos = uModelViewMatrix * aPosition;
  gl_Position = uProjectionMatrix * worldPos;
  vNormal = uNormalMatrix * aNormal;
  vLightDir = uLightPosition - worldPos.xyz;
}

vertex
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 uDiffuseColor;

varying vec3 vNormal, vLightDir;

void main() {
  float nDotL = dot(normalize(vNormal), normalize(vLightDir));
  gl_FragColor = vec4(uDiffuseColor.rgb * max(0.0, nDotL), 1.0);
}

flat by Gwt-g3d

vertex
uniform mat4 uModelViewMatrix, uProjectionMatrix;

attribute vec4 aPosition;
attribute vec2 aTexCoord;

varying vec2 vTexCoord;

void main() {
  gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition;
  vTexCoord = aTexCoord;
}

fragment
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uTexture;
uniform vec4 uTintColor;

varying vec2 vTexCoord;

void main() {
  gl_FragColor = vec4((uTintColor * texture2D(uTexture, vec2(vTexCoord.s, 1.0 - vTexCoord.t))).rgb,
      uTintColor.a);
}


Comments