scala - Scalajs WebGL“Hello World!”

好的，它不是字面的“ Hello World！”程序，但等效：使用WebGL渲染上下文将两个三角形输出到画布。

该程序可以正常运行，但是有什么方法可以消除程序后半部分那些讨厌的动态转换和不雅观的scalajs Arrays初始化。显然，我可以创建自己的实用程序函数/类（我正在使用自己的实用程序来生成着色器源代码），但是我希望尽可能使用scalajs标准方法。

package pClient
import org.scalajs._
import dom._
import pUtil._

object ClientApp extends scalajs.js.JSApp
  {
    def main(): Unit =
    {
      var can: html.Canvas =    document.createElement("canvas").asInstanceOf[html.Canvas]
      document.body.appendChild(can)
      can.width = window.innerWidth
      can.height = window.innerHeight - 60

      import raw.WebGLRenderingContext._
      var gl: raw.WebGLRenderingContext = can.getContext("webgl").asInstanceOf[raw.WebGLRenderingContext]
      gl.clearColor(0.4, 0.0, 0.5, 0.8)
      gl.clear(COLOR_BUFFER_BIT)

      var vShader = gl.createShader(VERTEX_SHADER)
      var vertText = "attribute vec2 position;" -+ VMain(Seq("gl_Position = vec4(position, 0, 1);")).out(0)
      gl.shaderSource(vShader, vertText)
      gl.compileShader(vShader)

      var fShader = gl.createShader(FRAGMENT_SHADER)
      var fragText = "precision highp float;" -+ "uniform vec4 color;" -+ VMain(Seq("gl_FragColor = vec4(0, 1, 0, 1);")).out(0)
      gl.shaderSource(fShader, fragText)
      gl.compileShader(fShader)

      var program = gl.createProgram()
      gl.attachShader(program, vShader)
      gl.attachShader(program, fShader)
      gl.linkProgram(program)

      var tempVertices: scalajs.js.Array[Float] = scalajs.js.Array[Float]()
      tempVertices.push(-0.3f,-0.3f,   0.3f,-0.3f,  0.0f,0.3f,  0.2f,0.2f,   0.6f, 0.6f,   0.4f, -0.4f)
      import scalajs.js.typedarray.Float32Array
      var vertices: Float32Array = new Float32Array(tempVertices)

      var buffer = gl.createBuffer()
      gl.bindBuffer(ARRAY_BUFFER, buffer)
      gl.bufferData(ARRAY_BUFFER, vertices, STATIC_DRAW)

      gl.useProgram(program)
      var progDyn = program.asInstanceOf[scalajs.js.Dynamic]
      progDyn.color = gl.getUniformLocation(program, "color")
      var temp2 = scalajs.js.Array[Double]()
      temp2.push(0f, 1f, 0.5f, 1.0f)
      gl.uniform4fv(progDyn.color.asInstanceOf[raw.WebGLUniformLocation], temp2)

      progDyn.position = gl.getAttribLocation(program, "position")
      gl.enableVertexAttribArray(progDyn.position.asInstanceOf[Int])
      gl.vertexAttribPointer(progDyn.position.asInstanceOf[Int], 2, FLOAT, false, 0, 0)
      gl.drawArrays(TRIANGLES, 0, vertices.length / 2)
    }
}

我正在Eclipse中运行程序。在路径上有以下罐子：

scalajs-cli-assembly_2.11-0.6.5.jar
scalajs-compiler_2.11.7-0.6.5.jar
scalajs-dom_sjs0.6_2.11-0.9.0-SNAPSHOT.jar
scalajs-library_2.11-0.6.5.jar

我正在用sbt继续建设。 build.sbt：

enablePlugins(ScalaJSPlugin)
name := "ScalaClient"
scalaVersion := "2.11.7"
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.8.0"
scalaSource in Compile := baseDirectory.value / "src"
scalacOptions := Seq("-feature", "-language:implicitConversions", "-deprecation", "-target:jvm-1.8")
unmanagedSourceDirectories in Compile += file("/sdat/scalaPackages/pUtil")

最佳答案

您可以像这样显着改善数组初始化：

import scala.scalajs.js // common import in Scala.js
import scala.scalajs.js.typedarray._

val vertices = new Float32Array(js.Array(
    -0.3f,-0.3f,  0.3f,-0.3f,  0.0f,0.3f,  0.2f,0.2f,
    0.6f,0.6f,  0.4f,-0.4f))

至于对js.Dynamic的强制转换，主要是因为WebGL的类型不尽如人意。此时WebGLProgram为空。随时为这些打字做出贡献！