原生webgl实现带高光照效果的三维球体

sphere with specular light using webgl，漫反射只和光源和物体表面夹角有关，而高光和漫反射不同的是，高光和相机位置有关。

webgl, shader, light

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2399
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let canvas = document.getElementById('webgl');
let gl = getWebGLContext(canvas);

let VSHADER_SOURCE = null;
let FSHADER_SOURCE = null;

function getShader(gl, source, type) {
    var str = document.getElementById(source).text;
    return str;
}

VSHADER_SOURCE = getShader(gl, 'vert-shader', gl.VERTEX_SHADER);
FSHADER_SOURCE = getShader(gl, 'frag-shader', gl.FRAGMENT_SHADER);

if (VSHADER_SOURCE && FSHADER_SOURCE) {
    start();
}

function initVertexBuffers(gl) {
    let latitudeBands = 50;
    let longitudeBands = 50;
    let radius = 2;

let vertexPositionData = [];
    let normalData = [];
    let textureCoordData = [];
    let indexData = [];

// Calculate sphere vertex positions, normals, and texture coordinates.
    for (let latNumber = 0; latNumber <= latitudeBands; ++latNumber) {
        let theta = latNumber * Math.PI / latitudeBands;
        let sinTheta = Math.sin(theta);
        let cosTheta = Math.cos(theta);

for (let longNumber = 0; longNumber <= longitudeBands; ++longNumber) {
            let phi = longNumber * 2 * Math.PI / longitudeBands;
            let sinPhi = Math.sin(phi);
            let cosPhi = Math.cos(phi);

let x = cosPhi * sinTheta;
            let y = cosTheta;
            let z = sinPhi * sinTheta;

let u = 1 - (longNumber / longitudeBands);
            let v = 1 - (latNumber / latitudeBands);

vertexPositionData.push(radius * x);
            vertexPositionData.push(radius * y);
            vertexPositionData.push(radius * z);

normalData.push(x);
            normalData.push(y);
            normalData.push(z);

textureCoordData.push(u);
            textureCoordData.push(v);
        }
    }

// Calculate sphere indices.
    for (let latNumber = 0; latNumber < latitudeBands; ++latNumber) {
        for (let longNumber = 0; longNumber < longitudeBands; ++longNumber) {
            let first = (latNumber * (longitudeBands + 1)) + longNumber;
            let second = first + longitudeBands + 1;

indexData.push(first);
            indexData.push(second);
            indexData.push(first + 1);

indexData.push(second);
            indexData.push(second + 1);
            indexData.push(first + 1);
        }
    }

vertexPositionData = new Float32Array(vertexPositionData);
    normalData = new Float32Array(normalData);
    textureCoordData = new Float32Array(textureCoordData);
    indexData = new Uint16Array(indexData);

// Create buffer objects.
    let vertexPositionBuffer = gl.createBuffer();
    let vertexNormalBuffer = gl.createBuffer();
    let indexBuffer = gl.createBuffer();

// Write the vertex positions to their buffer object.
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexPositionData, gl.STATIC_DRAW);

// Assign position coords to attrib and enable it.
    let VertexPosition = gl.getAttribLocation(gl.program, 'VertexPosition');
    gl.vertexAttribPointer(VertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(VertexPosition);

// Write the normals to their buffer object.
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexNormalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, normalData, gl.STATIC_DRAW);

// Assign normal to attrib and enable it.
    let VertexNormal = gl.getAttribLocation(gl.program, 'VertexNormal');
    gl.vertexAttribPointer(VertexNormal, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(VertexNormal);

// Pass index buffer data to element array buffer.
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);

return indexData.length
}

function start() {
    // Init vertex and fragment shaders.
    initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

// Init vertex buffers (position, color, and index data).
    let n = initVertexBuffers(gl);

// Set up clear color and enable depth testing.
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

// Create projection matrix.
    let projection = mat4.create();
    mat4.perspective(projection, Math.PI / 6, 1.0, 0.1, 100.0);

// Create model-view matrix.
    let modelView = mat4.create();
    mat4.lookAt(modelView, [0.0, 0.0, 10.0], [0.0, 0.0, 0.0], [0.0, 1.0, 0.0]);

// Multiply the projection matrix by the model-view matrix to create the mvpMatrix.
    let mvpMatrix = mat4.create();
    mat4.multiply(mvpMatrix, projection, modelView);

// Pass the modelView matrix into the shader.
    let ModelViewMatrix = gl.getUniformLocation(gl.program, 'ModelViewMatrix');
    gl.uniformMatrix4fv(ModelViewMatrix, false, modelView);

// Pass the mvp matrix into the shader.
    let MVP = gl.getUniformLocation(gl.program, 'MVP');
    gl.uniformMatrix4fv(MVP, false, mvpMatrix);

// Pass the light position into the shader.
    let LightPosition = gl.getUniformLocation(gl.program, 'LightPosition');
    gl.uniform4fv(LightPosition, [10.0, 10.0, 10.0, 1.0]);

// Pass the material diffuse color into the shader.
    let Kd = gl.getUniformLocation(gl.program, 'Kd');
    gl.uniform3fv(Kd, [0.9, 0.5, 0.3]);

// Pass the light diffuse color into the shader.
    let Ld = gl.getUniformLocation(gl.program, 'Ld');
    gl.uniform3fv(Ld, [1.0, 1.0, 1.0]);

// Pass the specular shiniess parameter to the shader
    let Sn = gl.getUniformLocation(gl.program, 'u_Shininess')
    gl.uniform1f(Sn, 30.0);

// Clear & draw.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
}

编译

CSS

HTML

<canvas id="webgl" width="512" height="512">
  Please use a browser that supports canvas.
</canvas>

attribute vec3 VertexPosition;
attribute vec3 VertexNormal;

uniform vec4 LightPosition;
uniform vec3 Kd;
uniform vec3 Ld; 
uniform float u_Shininess;

uniform mat4 ModelViewMatrix;
uniform mat4 MVP;

varying vec3 LightIntensity;
varying vec3 v_Vertex;
varying vec4 v_Color;
varying vec3 v_Normal;

void main() {
  // Convert normal and position to eye coords.
  vec3 tnorm = normalize(VertexNormal);
  vec4 eyeCoords = ModelViewMatrix * vec4(VertexPosition, 1.0);
  vec3 s = normalize(vec3(LightPosition - eyeCoords));

// Diffuse shading equation.
  LightIntensity = Ld * Kd * max(dot(s, tnorm), 0.0);
  
  // Perform the model and view transformations on the vertex and pass this
  // location to the fragment shader.
  v_Vertex = vec3( ModelViewMatrix * vec4(VertexPosition, 1.0) );

// Perform the model and view transformations on the vertex's normal vector
  // and pass this normal vector to the fragment shader.
  v_Normal = vec3( ModelViewMatrix * vec4(VertexNormal, 0.0) );

// Pass the vertex's color to the fragment shader.
  v_Color = vec4(Kd, 1.0);

// Convert position to clip coords and pass along.
  gl_Position = MVP * vec4(VertexPosition, 1.0);
}
</script>

uniform vec4 LightPosition;
uniform vec3 Ld;
uniform float u_Shininess;

varying vec3 v_Vertex;
varying vec4 v_Color;
varying vec3 v_Normal;

void main() {
  vec3 to_light;
  float cos_angle;
  vec3 tnorm;
  vec3 reflection;  
  vec3 to_camera;
  vec3 specular_color;
  vec3 object_color;
  vec3 color;

// Calculate a vector from the fragment location to the light source
  to_light = normalize(vec3(LightPosition) - v_Vertex);

// The vertex's normal vector is being interpolated across the primitive
  // which can make it un-normalized. So normalize the vertex's normal vector.
  tnorm = normalize( v_Normal );
  
  // Calculate the reflection vector
  reflection = 2.0 * dot(tnorm,to_light) * tnorm - to_light;

// Calculate a vector from the fragment location to the camera.
  // The camera is at the origin, so negating the vertex location gives the vector
  to_camera = -1.0 * v_Vertex;

// Calculate the cosine of the angle between the reflection vector
  // and the vector going to the camera.
  reflection = normalize( reflection );
  to_camera = normalize( to_camera );
  cos_angle = dot(reflection, to_camera);
  cos_angle = clamp(cos_angle, 0.0, 1.0);
  cos_angle = pow(cos_angle, u_Shininess);

// If this fragment gets a specular reflection, use the light's color,
  // otherwise use the objects's color
  specular_color = Ld * cos_angle;
  object_color = vec3(v_Color) * (1.0 - cos_angle);
  color = specular_color + object_color;
  
  // Scale the color of this fragment based on its angle to the light.
  gl_FragColor = vec4(color, v_Color.a);
}
</script>

sphere with specular light using webgl，漫反射只和光源和物体表面夹角有关，而高光和漫反射不同的是，高光和相机位置有关。

webgl, shader, light

编辑器支持Emmet

快捷键

sphere with specular light using webgl，漫反射只和光源和物体表面夹角有关，而高光和漫反射不同的是，高光和相机位置有关。

webgl, shader, light

原生webgl绘制一个带漫反射光照效果的三维球体

webgl原生代码实现的三维逼真水体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：